小程序SDK简介

前言

本文主要是对小程序官方文件的局部深入解读；让大家知道小程序实现背后的机制原理。

由于作者没有获得微信官方提供的小程序实施示意图，很多内容都是通过阅读文件资料获得的，如有误解，请指正。

本文建议阅读时间：5min。

目录

小程序SDK定义了JS-SDK小程序基础库和JS-SDK的相似之处，以及小程序基础库和JS-SDK的区别。小程序基础库的查看方法小程序基础库与客户端的关系。小程序基础库的更新机制微信版本分发微信版本与基础库版本开发者工具切换基础库版本wx对象JsBridgewebview与客户端的关系JsBridge实现的两个思路：微信上实现JsBridge Communication机制架构介绍执行环境事件生命周期事件UI事件page . prototype . setdata summary

小程序SDK

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

这是一个非常宽泛的术语。我只是觉得它很重要，但不知道它的具体功能是什么。我总结了5月份小程序给我带来的惊喜，它支持的功能越来越多，体验也越来越好。如果用专业术语来概括这些行动，它们将是“升级基本库”。

从微信开放内测到现在，微信基础库已经从v1.0.0升级到v1.3.0。

那么，到底什么是“基础库”呢？

小程序基础库提供丰富的原生微信API，可以轻松调动微信提供的功能，如获取用户信息、本地存储、支付功能等。

这是官方对“基础库”的定义。我们知道小程序的发展与目前移动web的发展非常相似，而移动web可以使用手机系统的功能，app的功能非常有限。“基础库”的功能是扩展小程序的功能，使其功能和性能更接近原生app。

JS-SDK

我们发现“基础库”的功能和微信JS-SDK非常相似。对了，微信JS-SDK又是做什么的？

微信JS-SDK是微信公众平台为网页开发者提供的基于微信的网页开发工具包。借助微信JS-SDK，网页开发者可以高效利用手机系统的拍照、选图、语音、定位等功能。同时，他们可以直接使用微信的功能，如分享、扫单、卡券、支付等。为微信用户提供更好的网页体验。

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

针对当前应用调整手机系统能力和微信能力；都需要基础库的支持；

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

支持的API:小程序基础库更全面地封装了系统能力和微信能力，包括网络请求、存储等。而web版JS-SDK的相应功能直接调用窗口能力；简介：小程序基础库直接集成到不同版本的微信中，js-SDK以js文件的形式引入到项目中；

小程序基础库查看方法

官方API :getSystemInfo，getSystemInfoSync。

wx . getsysteminfo({ success : function(obj){ obj=obj | | { }；console . log(' sdkversi : '，obj。SDKVersion)；}，fail : function(){ console . error('[error]: getSystemInfo失败。);}});返回对象中SDKVersion的值是微信版本携带的小程序基础库的版本号。

注意：在applet版本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 来渲染的；