京东小程序的三生三世

内容来源：2021年3月11日，周伟鹏在“H5梦工厂”进行《京东小程序的三生三世》演讲分享。IT大咖说作为独家视频合作方，经主办方和讲者审阅授权发布。阅读字数：2211|3分钟阅读摘要作为中国很大的自营式电商企业，...

内容来源：2021年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层其实还是Webview的形式。Manger是在appservice的部分。

页面可以通过-ridge和appservice进行交互，也可以调用一些native组件。

Manager也是通过-ridge，额外有一个单独封装的API，就可以直接通过API调用native组件。

4、小程序native组件

小程序的实现方式是通过小程序-ridge的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，存到localstorage里。下次发网络请求的时候，再从storage里拿出cookie，手动添加到header里，实现了手动cookie的过程。

2、用Nginx进行转发

第二个问题是wx.request的合法域名很多为10个，导致其他域名下的业务请求失败。

因为京东业务分散，域名很多，一个页面需要调用大量API接口，这些API都散落在不同的域名下面。

我们配置了一台nginx，培植了一个新域名专门供小程序进行域名的转发，把需要用到的域名全都映射到新域名的路径里，这样就可以把大量域名合并到一个或几个很小的域名里，成功绕过了限制。

3、使用Websocket

wx.request的并发数不能超过5个，导致并发能力受限，超出限制时请求失败。