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
170
支付宝小程序的开放架构
yiminghe
May 19, 2018
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
150
gitc2016 react based architecture
yiminghe
1
140
antd at qcon2016
yiminghe
1
190
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
260
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
form validation in react
yiminghe
4
540
Other Decks in Programming
See All in Programming
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.3k
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
260
Duke on CRaC with Jakarta EE
ivargrimstad
0
240
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
190
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
1k
コードを読んで理解するko build
bells17
1
120
CIBMTR振り返り+敗北から学ぶコンペの取り組み方反省
takanao
1
170
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
2
510
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
TCAを用いたAmebaのリアーキテクチャ
dazy
0
240
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
660
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Side Projects
sachag
452
42k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
A better future with KSS
kneath
238
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
390
Raft: Consensus for Rubyists
vanstee
137
6.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
550
Into the Great Unknown - MozCon
thekraken
35
1.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