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.1k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.1k
form validation in react
yiminghe
4
530
Other Decks in Programming
See All in Programming
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
310
macOS でできる リアルタイム動画像処理
biacco42
7
2k
現場で役立つモデリング 超入門
masuda220
PRO
13
3k
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
僕がつくった48個のWebサービス達
yusukebe
18
17k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
570
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
620
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
960
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.9k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.2k
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Building an army of robots
kneath
302
42k
Code Review Best Practice
trishagee
64
17k
How to Ace a Technical Interview
jacobian
275
23k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Happy Clients
brianwarren
97
6.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