禹立彬—苏宁易购小程序同构实践 GMTC

2020-03-01 259浏览

1.苏宁易易购⼩小程序同构实践禹立彬苏宁易购
2.在此键入姓名在此键入tittle
3.在此键入姓名在此键入tittle
4.⾃自我介绍前端老兵，10+年一线开发经历。现任苏宁易购消费者平台研发中心前端技术总监，负责苏宁电商前台业务。
5.⽬目录苏宁的小程序开发小程序转换方案苏宁小程序小程序平台的架构限制
6.⽬目录苏宁的小程序开发
7.苏宁的⼩小程序开发 2017年中，上线微信小程序
8.苏宁的⼩小程序开发 2018年中，上线百度小程序
9.苏宁的⼩小程序开发 2018年底，上线头条小程序
10.苏宁的⼩小程序开发 2018年微信小程序矩阵化
11.苏宁的⼩小程序开发微信，百度，头条同步开发人力消耗大：最多时，40位前端工程师在开发业务项目控制难：人工的方式同步业务，周期控制困难质量问题大：测试资源不足，又进一步导致了质量问题，bug增多
12.⽬目录小程序转换方案
13.业内的⼩小程序同构⽅方案 Taro uni-app
14.这些⽅方案不不适合苏宁需要大规模的重构代码，业务风险大会增大代码体积，在苏宁的业务中矛盾突出处理业务不同的模块时，不够灵活
15.⼩小程序转换⽅方案使用微信小程序作为开发语言开发代码转换器，将微信转化为百度和头条小程序在ReactNative基础上，开发苏宁小程序转换器同步兼容苏宁小程序实现一次开发，80%以上可复用
16.百度⼩小程序与微信⼩小程序的不不同 1. 接口差异：checkSession，navigateToSmartProgram 2. 组件差异：input scroll-view 3. 样式差异：个别情况下line-height处理不一致 4. 行为差异：onshow执行频率 5. 框架差异：this上下文，状态管理 6. 组件差异：component / filter
17.@suning/wx2swan：站在巨⼈人的肩膀上
18.
19.代码兼容准备
20.wxs2filter基础转换
21.wxs2filter重构弥补
22.wxs2filter—抽出内嵌filter 其他：if/for降级等等
23.replaceFile—20%的业务⽆无法同构预约特卖拼购客服⼴广告列列表店铺评价会员营销券推荐购物⻋车订单登录⽀支付⾸首⻚页频道⻚页搜索商品
24.replaceFile
25.转换器器策略略转80%相同的代码忽略业务不同的代码，并定制开发
26.头条⼩小程序⽀支持微信语法 1. 同步微信代码至头条 2. 复写WXS等头条不支持的部分 3. 改写业务不同部分
27.⽬目录苏宁小程序
28.苏宁⼩小程序使用ReactNative作为底层技术栈外在表现为小程序，远程加载小程序包执行同步微信UI组件和微信小程序API
29.苏宁⼩小程序 SNTSMINPLoader Admin …. Sn.pay Sn.request …. ReactNative Bridge SView SButton SSwiper SImage SPay SRequest … 登录⽀支付⽹网络图⽚片播放器器监控 …
30.⼀一个微信⼩小程序 1. App app.js + app.wxss + app.json 2. Page index.js + index.json + index.wxml + index.wxss
31.⼀一个ReactNative项⽬目 1. index.js 入口文件 2. App.js 页面文件
32.1.转化⼀一个⻚页⾯面(pages/index/index) index.wxml index.jsx.js index.wxss index.stylesheet.js index.js index.js index.json index.json
33.1.1 转换WXML
34.1.2 转换WXSS
35.1.3 转换js
36.SBaseScreen⻚页⾯面基类
37.SBaseScreen⻚页⾯面基类
38.2.转化App app.js app.js app.wxss app.stylesheet.js app.json route.js app.json
39.2.1 转化app.wxss
40.2.2 提取app.json的路路由
41.2.3 合成app.js
42.其他⼀一点点的⼯工作 1. 合并app.stylesheet.js 的样式到每个页面里 2. 实现getApp() 和 getCurrentPages() 3. 实现模板和wxs 4. 实现底部Tabs 5. subpages解析支持 6. 转换所有的api, 从wx.method 转换为 sn.method 7.实现enablePullDownRefresh 8. ……..
43.SNT——样式强化解决ReactNative样式无法继承问题使ReactNative支持position:fixed支持小程序的style=“color:#000”写法
44.SMINIP——组件强化支持图片懒加载属性支持组件sticky 支持组件曝光埋点超级播放器功能
45.SMINIP——API强化分享组件强化——支持微信外的其他分享支持API关闭小程序支持手动显示/隐藏导航条支持API获取当前地址支持超级路由
46.⽬目录一些性能调优
47.超⻓长列列表性能问题列表元素延时加载，降低渲染压力
48.sn-lazy 图片消耗内存较高，移出屏幕后，回收。
49.⽬目录小程序平台框架限制
50.⼩小程序开发语法严格严格使用flex布局，不能使用float 严格使用微信小程序标签，不能超出范围
51.业务尽可能的复⽤用转换器会跳过业务不同的代码，只转换相同的业务逻辑。因此不适合在不同小程序平台下完全业务不同的团队。
52.不不适合迭代速度要求极⾼高的团队转换器转完的代码，很多时候还是需要回归测试校正，往往需要微信代码稳定无bug才能转换，迭代速度很快的团队可能无法接受等待的时间。
53.维护问题实践中，需要有团队成员稳定支撑，需要同时了解多个小程序的开发异同。追求效率的最大化，搭配自动化测试更佳。
54.⼀一些成绩
55.在此键入姓名在此键入tittle
56.在此键入姓名在此键入tittle
57.THANKS THANKS！ THANKS！