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

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
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:站在巨⼈人的肩膀上
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. 苏宁⼩小程序 SNT <Sview> SMINP <SButton> <SSwiper> <SImage> Loader 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!