内容来源:2017年3月11日周伟鹏在“H5梦工厂”进行《京东小程序的三生三世》演讲分享。IT大咖说作为独家视频合作方经主办方和讲者审阅授权发布。阅读字数:2211 | 3分钟阅读摘要作为中国最大的自营式电商企业运营推广经主办方和讲者审阅授权发布。阅读字数:2211 | 3分钟阅读摘要作为中国最大的自营式电商企业 ...
内容来源: 2017年3月11日周伟鹏在“H5梦工厂”进行《京东小程序的三生三世》演讲分享。IT大咖说作为独家视频合作方经主办方和讲者审阅授权发布。
阅读字数:2211 | 3分钟阅读
摘要作为中国最大的自营式电商企业京东小程序的开发也是一波三折。
“不是每个人都能看透这三生三世的爱恨交织。”
嘉宾演讲视频地址: t.cn/R9Vtevu
前世
之前京东购物入口的首页还是比较复杂的现在首页简化到只有搜索和领券的功能。
初见 1、 小程序产品定位用完即走触手可及。
轻量、突出重点快速直达用户的核心需求。
优秀的操作体验。
2、 小程序组成作为开发者来说小程序需要WXML、WXSS和JS三部分。WXML和WXSS组成了view层负责view层的渲染。JS组成了manager层JS负责整个小程序的逻辑部分。
3、 小程序架构WXML和WXSS负责配置部分小程序的view层其实还是Web view的形式。Manger是在app service的部分。
页面可以通过JSbridge和app service进行交互也可以调用一些native组件。
Manager也是通过JSbridge额外有一个单独封装的API就可以直接通过API调用native组件。
4、 小程序native组件
小程序的实现方式是通过小程序JSbridge的API获取原来Web组件的信息在Webview上盖了一层native的组件。
小程序里具有native能力的组件大概有canvas、video、input、textarea、map和picker。这几个组件在小程序里是以native的形式展现出来。
5、 与Web端的区别
优点 :
小程序具有native的能力有扫码、离线、地图之类的功能。
它接近原生应用的用户体验。
它是类似Web的开发语言入门门槛低。
提供大量常用组件开发成本低。
自带ES6支持。
限制 :
无法访问到真实的DOM节点。
无法绑定原生事件。
更新需要发版本微信审核。
6、 京东购物小程序
技术预研 :前期我们做了大量的技术预研。阅读一些官方文档、事例代码动手编写demo也让一些同事组织了内部技术分享。
组件开发团队 :我们的开发团队前端是四个人“后台”开发有六个人。
确定结构及分工 :
我们把小程序分为page和models、API两部分。
前端主要负责page部分包括页面重构、数据渲染、用户交互逻辑等等。
Models和API这层是“后台”开发负责的它们主要负责数据的获取、加工提供公共的API。
制定开发规范:我们制定了命名规范、接口规范、样式规范、文档规范、文件目录规范和git分支规范。
渡劫1、 手动实现cookie
我们在开发小程序的时候遇到的第一个问题就是运行环境里没有cookie导致后台接口无法验证登录态。
利用本地存储的能力在获得网络请求的时候拿到cookie存到local storage里。下次发网络请求的时候再从storage里拿出cookie手动添加到header里实现了手动cookie的过程。
2、 用Nginx进行转发第二个问题是wx.request的合法域名最多为10个导致其他域名下的业务请求失败。
因为京东业务分散域名很多一个页面需要调用大量API接口这些API都散落在不同的域名下面。
我们配置了一台nginx培植了一个新域名专门供小程序进行域名的转发把需要用到的域名全都映射到新域名的路径里这样就可以把大量域名合并到一个或几个很小的域名里成功绕过了限制。