支付宝小程序的开放架构

 支付宝小程序的开放架构

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

May 19, 2018
Tweet

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