支付宝小程序的开放架构

支付宝小程序的开放架构承玉/YIMINGHE

朋友⽀支付宝内的⼩小程序聚合页搜索哈罗单车

能⼒力力⼤大图组件视图容器器画布地图表单⽣生活号 … API
多媒体信⽤用蓝⽛牙 … 分享设备位置系统原⽣生能⼒力力容器器、表单输⼊入图标、进度条、⽂文字滚动视图、滑块视图⽹网络、位置、蓝⽛牙设备信息，下拉刷新键盘，弹层⽀支付宝特⾊色服务芝麻信⽤用实名认证信⽤用授权 OCR 识别跳转⽣生活号⼈人脸识别卡券⼩小程序跳转

整体架构⽀支付宝 APP 搜索聚合⻚页附近⾸首⻚页 card ⽣生活号开发者中⼼心
⼊入驻开发测试运维运营开放平台接⼝口管理理应⽤用管理理码管理理数据平台运营数据运维数据运⾏行行引擎框架 web 容器器包管理理服务平台审核处罚社区

技术⾃自有技术开源技术⽀支付宝⼩小程序

框架

框架 Components Framework Native SDK React WEBVIEW IDE DSL(template/css/js) js
bundle build run

开发语⾔言 JS Template CSS App Page Component

app.js 处理理应⽤用级⽣生命周期

page.axml 数据绑定逻辑算术、运算模版、⾃自定义组件事件绑定 axml virtual dom dom compile
setData

page.acss import rpx css StyleSheet <style> compile render

page.js 渲染⻚页⾯面数据处理理⻚页⾯面级⽣生命周期处理理⻚页⾯面级系统事件处理理⻚页⾯面级⽤用户事件

component.js 渲染组件数据、属性处理理组件⽣生命周期处理理⻚页⾯面级⽤用户事件事件通知上层组件

开发模式 APP Data Page1 Page2 navigateTo navigateTo js css(acss) html(axml)
Component1 Component2 js css html

运⾏行行架构 JSCore webview Page a js Page a css/template Page
b js webview Page b css/template native render data ui event render data ui event api system event

运⾏行行⽣生命周期 Native JSCore webview launch onLaunch page onLoad->onShow User Event
render onReady handler re-render send data navigateTo onHide onShow webview

运⾏行行优化通过离线化技术，应⽤用静态资源⽆无需请求⽹网络，加快⾸首屏速度。 Map/Input 等组件直接使⽤用 Native 渲染，提升⽤用户体验。提前创建 JSCore、webiew，预加载框架和⻚页⾯面代码，加快渲染速度。退出应⽤用进⼊入保活区域，5 分钟内重新打开⽆无需重新创建。

IDE ⼀一站式开发⼯工具开发

IDE 调试

IDE 云测试

IDE 发布

IDE 架构基于 Electron 主进程、渲染进程 IPC 通信单⻚页⾯面 webapp

IDE 架构每个⻚页⾯面独⽴立的 webview 使⽤用 webview 模拟 JSCore 模拟 API
实现 webview JSCore webview Mock Services Operation System IPC native api

后台服务

版本管理理开发版本体验版本审核版本线上版本灰度与回滚

能⼒力力管理理基础能⼒力力 OCR ⽀支付芝麻信⽤用

成员管理理开发成员体验成员

码管理理⼩小程序码关联普通⼆二维码

数据分析实时数据⻚页⾯面分析⽤用户留留存⾃自定义事件

附近的⼩小程序关联线下地址

监控 http 监控 api 调⽤用失败率监控运⾏行行错误监控 …

其他 http 域名⽩白名单 web-view 域名⽩白名单模板消息⾦金金融云服务 …

下⼀一步

能⼒力力增强 web-view ⾃自定义组件附近⼩小程序分包加载 AR …

开放⽣生态 Ali App MPASS App

THANKS 官⽅方站点：https://docs.alipay.com/mini

支付宝小程序的开放架构

支付宝小程序的开放架构

More Decks by yiminghe

Other Decks in Programming

Featured

Transcript