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
190
支付宝小程序的开放架构
yiminghe
May 19, 2018
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
220
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
160
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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
530
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
290
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
470
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Faster Mobile Websites
deanohume
308
31k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A better future with KSS
kneath
238
17k
How to Ace a Technical Interview
jacobian
278
23k
Thoughts on Productivity
jonyablonski
69
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
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