深刻解读-微信小程序SDK

时间 2019-11-06

标签深刻解读微信程序 sdk 繁體版

原文原文链接

前言

这篇文章主要是对小程序官方文档作部分深刻解读；让你们了解小程序实现背后的机制原理。
因为笔者没有获取到微信官方提供的小程序实现原理图，不少内容都是经过阅读文档资料反推和理解所得，若有误解之处，望指正。
本文建议阅读时间： 5minjavascript

小程序SDK
- 定义
- JS-SDK
  - 小程序基础库与JS-SDK的共同点
  - 小程序基础库与JS-SDK的不一样点
- 小程序基础库查看方法
- 小程序基础库与客户端之间的关系
- 小程序基础库更新机制
- 微信版本分布
- 微信版本和基础库版本
- 开发者工具切换基础库版本
- wx对象
JsBridge
- webview与客户端的关系
- 两种JsBridge实现思路
- 微信关于JsBridge的实现
通讯机制
- 架构介绍
- 执行环境
- 事件
- 生命周期事件
- UI事件
- Page.prototype.setData
总结

小程序SDK

官方文档称其为“基础库”。html

这是一个很宽泛的名词，只是以为很重要，但说很差它具体有什么做用。我总结了小程序5月带给个人惊喜，它支持的功能也愈来愈丰富，体验也越变越好，而这些动做若是用专业一点的术语归纳就是“升级基础库”。
微信从开放内测到如今，微信基础库已经从的 v1.0.0 升级到了 v1.3.0 。
那么，“基础库”究竟是什么东西？ java

小程序基础库提供丰富的微信原生API，能够方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。web

这是官方对于“基础库”的定义。咱们知道小程序的开发十分相似于如今的移动web开发，而移动web能使用到手机系统功能，app特点功能是很是有限的，而“基础库”的做用就是为了拓展小程序这方面能力，让其功能与表现更接近原生app。小程序

JS-SDK

咱们发现“基础库”的功能和微信的 JS-SDK 十分相似，顺便再回顾下微信 JS-SDK 又是作什么的呢？微信小程序

微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。经过使用微信 JS-SDK ，网页开发者可借助微信高效地使用拍照、选取图片、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特点功能，为微信用户提供更优质的网页体验。api

小程序基础库与JS-SDK的共同点

为当前应用调起手机系统能力和微信能力；
都须要基础库的支持；

小程序基础库与JS-SDK的不一样点

支持的API：小程序基础库对系统能力和微信能力作了更全面的封装，包括网络请求、存储等，而网页版JS-SDK相应的功能直接调用window能力；
引入方式：小程序基础库直接集成到微信的不一样版本中，JS-SDK是以一个js文件的形式被引入项目里；

小程序基础库查看方法

官方API : getSystemInfo、getSystemInfoSync。移动web开发

wx.getSystemInfo({
    success: function(obj) {
        obj = obj || {};
        console.log('SDKVersion: ', obj.SDKVersion);
    },
    fail: function() {
        console.error('[error]: getSystemInfo failed.');
    }
});复制代码

返回对象中SDKVersion的值就是该微信版本携带的小程序基础库的版本号。
注意：该属性在小程序版本 v1.1.0 才开始支持。数组

小程序基础库与客户端之间的关系

小程序的能力须要微信客户端来支撑，每个基础库都只能在对应的客户端版本上运行，高版本的基础库没法兼容低版本的微信客户端。缓存

官方的这种说法存在一些问题。如今基础库版本和客户端版本并非一一对应关系。客户端能够主动升级小程序基础库版本达到灰度上线新版的目的，因此必然存在一个客户端版本对应多个基础库版本的状况。

小程序基础库更新时机

为了不新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带上一个稳定版的基础库发布的。
在新版本客户端发布后，咱们再经过后台灰度新版本基础库，灰度时长通常为 12 小时，在灰度结束后，用户设备上才会有新版本的基础库。

以微信 6.5.8 为例，客户端在发布时携带的是 1.1.1 基础库（6.5.7上已全量的稳定版）发布，在 6.5.8 发布后，咱们再经过后台灰度 1.2.0 基础库。

笔者使用的IOS设备更新到v6.5.8时对应的 SDKVersion 是 1.2.0, 但截止发稿日，该值已经变成了 1.2.4。
“细思恐极”，若是咱们已经完成一台装有 6.5.4 版本微信的Oppo手机对小程序的兼容测试，颇有可能过几天这台Oppo手机将小程序基础库更新到新版本致使小程序不可用。
建议：了解产品的用户手机微信版本分布，肯定回归覆盖范围，完成回归测试。

微信版本分布

这是咱们点餐小程序中用户各版本微信的占比图。经过这两张图咱们可以清晰的得出目前用户使用的微信版本分布，就可以制定针对性的测试覆盖方案。

微信版本和基础库版本

在 基础库更新时机 那小结咱们提到，小程序的基础库和微信版本并非一一对应关系，且随着基础库和微信的不断升级，它们的对应关系在时刻发生着变化。
下面是我整理的小程序基础库和微信版本对应表。

开发者工具切换基础库版本

在使用新API、新特性的时候，能够经过切换基础库版本完成兼容性测试。

`wx`对象

小程序基础库的全部功能所有封装在 wx 全局对象中，开发者能够在小程序逻辑层代码的任何地方调用该对象的方法。

看到 wx 对象，使用过 JS-SDK 的朋友表示很熟悉。咱们在前面章节 小程序基础库与JS-SDK 对它们作了简单的比较，下面深刻学习它们出于同源的技术：JsBridge。
下一节，咱们详细讲解一下JsBridge的原理和实现。

`JsBridge`

Native层须要暴露一些方法给js调用，好比，弹Toast提醒，弹Dialog，分享等等，有时候甚至把h5的网络请求放着native去完成。缘由很简单，Native有更好的性能，更一致的表现和体验。这就是 JsBridge 技术。

webview与客户端的关系

webview是客户端的一个可调用的组件，且客户端能够对webview作函数，事件的封装，能够拦截webview的请求作统一控制，也能够向webview注入方法供JS调用等。

两种`JsBridge`实现思路

经过重写 JavascriptInterface接口；
在客户端拦截全部WebView的Url请求；

经过这些方式可以实现JS和客户端通讯，调起客户端以及手机系统能力。

微信小程序`JsBridge`的实现

wx 就是客户端暴露给小程序的JsBridge接口。而这个封装的JsBridge很是强大，它不只仅支持toast，弹框等简单功能，甚至包括网路request请求，缓存操做，手机硬件设备蓝牙、重力感应等。下一个章节，咱们介绍微信如何使用 JsBridge、视图层、逻辑层交互操做。

通讯机制

架构介绍

这张图展现了视图层、逻辑层之间通讯方式,以及JsBridge起到纽带的做用。咱们能够作如下几点总结：

视图层和逻辑层分开在两个线程中运行;
视图层、逻辑层经过事件完成通讯;
JsBridge一方面传递基础功能，另外一方面作视图层和逻辑层的数据传递工做；

执行环境

三端的js执行环境以及用于渲染非原生组件的环境是各不相同的：

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的；

在 Android 上，小程序的 javascript 代码是经过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53 内核来渲染的；

在开发工具上，小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的；

这是官方关于视图层和逻辑层运行环境的介绍。

视图层（不包括Native组件）在webview组件中渲染；逻辑层的js代码则经过js容器来执行。js代码执行过程当中能够经过JsBridge调起微信、系统的能力，也能够将数据经过setData()函数传递给视图层作渲染。视图层在渲染和交互过程当中能够经过事件与客户端进行通讯。

视图层向逻辑层的通讯由事件来完成，而逻辑层数据向视图层发送渲染指令是经过Page的setData函数。下面咱们详细说明他们的细节原理；

事件

这张生命周期图很是详尽的描述了一个页面从建立入栈、数据交互、销毁出栈的整个过程。在页面渲染和使用过程当中会出现大量的事件，而这些事件会被JsBridge捕获到，并传递给逻辑层处理，主要包括：生命周期事件、UI事件。

生命周期事件

视图进程在完成阶段性工做后，须要向逻辑层同步其当前状态以便逻辑层作出应对策略。主要包括：onLoad、onReady、onShow、onHide、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage等。

UI事件

视图层向逻辑层的通讯方式。

这类事件绑定在组件上，触发则能够将用户的行为反馈到逻辑层对应的注册函数，如bindtap、bindinput、bindconfirm、bindfocus、bindsubmit、bindchange、bindlinechange等

Page.prototype.setData()

逻辑层向视图层发送渲染指令的方式。

setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。
注意：data 将会以 JSON 的形式由逻辑层传至渲染层，因此其数据必须是能够转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

从性能角度考虑，UI渲染是比较耗时的，一方面尽可能减小页面渲染操做，另外一方面其会对data的内容作深层次diff，尽可能控制data的大小和数据结构的深度（官方限制data数据量最大为1024K。

笔者在作小程序性能监控的时候，遇到的一个问题就是没法准确统计到页面渲染完成的时间。缘由是 setData函数只负责发送数据和渲染指令，但并无对应的反馈通知。

经过仔细分析，微信实际上是能够提供这样的能力的，在视图层完成渲染后经过某种方式再告知逻辑层渲染状态，我想出了两个解决方案：

提供一个页面渲染的事件，在渲染完成后将相关结果经过事件抛出；
拓展setData函数，提供一个回调函数,将渲染结果返回。

在和腾讯的同事提出该建议后，他们给出否认答案。缘由是：回调函数会增长一次渲染层到逻辑层的通讯开销，而这个开销相对而已比较重，目前他们官方是作了一些数据采样，下图是他们发给咱们的渲染结果。

总结

本文经过对小程序基础库的介绍、拓展 JsBridge到融会贯通，介绍基础库、视图层、逻辑层的运行机制，就是但愿你们可以创建对小程序架构理解，了解各模块在框架中所处位置和功用。

以上均为我的理解所得，因为没有一些系统学习客户端开发webview的经验，因此关于 JsBridge 的一些讲解比较浅显，若有不当言论，望指出，谢谢。

-做者介绍-J文，美团点评点餐终端团队C端组成员，负责大众点评云餐厅微信小程序开发。