Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
支付宝小程序的开放架构
Search
yiminghe
May 19, 2018
Programming
0
180
支付宝小程序的开放架构
yiminghe
May 19, 2018
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
form validation in react
yiminghe
4
550
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
12k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.1k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
3.2k
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
NPOでのDevinの活用
codeforeveryone
0
760
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
590
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
740
技術同人誌をMCP Serverにしてみた
74th
1
610
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
7.2k
5つのアンチパターンから学ぶLT設計
narihara
1
160
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
Scaling GitHub
holman
459
140k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making Projects Easy
brettharned
116
6.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
For a Future-Friendly Web
brad_frost
179
9.8k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Thoughts on Productivity
jonyablonski
69
4.7k
Transcript
支付宝小程序的开放架构 承玉/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 云测试
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