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
160
支付宝小程序的开放架构
yiminghe
May 19, 2018
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
130
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
form validation in react
yiminghe
4
530
Other Decks in Programming
See All in Programming
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
250
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
360
最新TCAキャッチアップ
0si43
0
200
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
260
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.2k
Functional Event Sourcing using Sekiban
tomohisa
0
100
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
CSC509 Lecture 12
javiergs
PRO
0
160
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
170
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
受け取る人から提供する人になるということ
little_rubyist
0
250
Featured
See All Featured
Thoughts on Productivity
jonyablonski
67
4.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
BBQ
matthewcrist
85
9.3k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
A Tale of Four Properties
chriscoyier
156
23k
Faster Mobile Websites
deanohume
305
30k
The Pragmatic Product Professional
lauravandoore
31
6.3k
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