支付宝小程序的开放架构

Transcript

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

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

3. 能⼒力力⼤大图 组件 视图 容器器 画布 地图 表单 ⽣生活号 … API

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

4. 整体架构 ⽀支付宝 APP 搜索 聚合⻚页 附近 ⾸首⻚页 card ⽣生活号 开发者中⼼心

   ⼊入驻 开发 测试 运维 运营 开放平台 接⼝口管理理 应⽤用管理理 码管理理 数据平台 运营数据 运维数据 运⾏行行引擎 框架 web 容器器 包管理理 服务平台 审核 处罚 社区

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

6. 框架

7. 框架 Components Framework Native SDK React WEBVIEW IDE DSL(template/css/js) js

   bundle build run

8. 开发语⾔言 JS Template CSS App Page Component

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

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

    setData

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

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

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

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

    Component1 Component2 js css html

15. 运⾏行行架构 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

16. 运⾏行行⽣生命周期 Native JSCore webview launch onLaunch page onLoad->onShow User Event

    render onReady handler re-render send data navigateTo onHide onShow webview

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

18. IDE

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

20. IDE 调试

21. IDE 云测试

22. IDE 云测试

23. IDE 发布

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

25. IDE 架构 每个⻚页⾯面独⽴立的 webview 使⽤用 webview 模拟 JSCore 模拟 API

    实现 webview JSCore webview Mock Services Operation System IPC native api

26. 后台服务

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

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

29. 成员管理理 开发成员 体验成员

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

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

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

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

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

35. 下⼀一步

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

37. 开放⽣生态 Ali App MPASS App

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