深入解读-小程序SDK

关注

原创最新推荐文章于 2026-07-30 22:34:06 发布 1.2w 阅读 AI 写同款· GEO 优化 ›

微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API 设置key的时候，还需要小程序的APPID。看清哪一个key并且设置配额。最终展示：点击搜索周边KFC就出现红色的预设值坐标的地址。2 调用的接口要开通相应的接口权限。入门中第一步：申请开发者密钥key。1 调用API有次数和额度限制。调用WebService API。示例2： “关键词输入提示”举例：定位服务 --IP定位。阅读详情

前言

这篇文章主要是对小程序官方文档做部分深入解读；让大家了解小程序实现背后的机制原理。
由于笔者没有获取到微信官方提供的小程序实现原理图，很多内容都是通过阅读文档资料反推和理解所得，如有误解之处，望指正。
本文建议阅读时间： 5min

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

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

小程序基础库查看方法

官方API : getSystemInfo、getSystemInfoSync。

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手机将小程序基础库更新到新版本导致小程序不可用。
建议：了解产品的用户手机微信版本分布，确定回归覆盖范围，完成回归测试。

微信版本分布

IOS 设备微信版本分布 (数据截止 2017-06-16)
Android 设备微信版本分布 (数据截止 2017-06-16)

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

微信版本和基础库版本

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

微信版本和基础库版本对应关系（统计时间：2017-06-10）

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

微信web开发者工具
在使用新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起到纽带的作用。我们可以做以下几点总结：

视图层和逻辑层分开在两个线程中运行;
视图层、逻辑层通过事件完成通信;
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函数。下面我们详细说明他们的细节原理；