微信小程序的技术基石：JsCore 与 JSBridge

发表于

微信小程序的流畅体验，离不开其独特的技术架构。与传统网页不同，小程序采用了一个双线程架构，将业务逻辑与页面渲染彻底分离。在这套架构中，JsCore 和 JSBridge 扮演着至关重要的角色，它们是小程序高效运行的幕后英雄。

JsCore：小程序的大脑

JsCore 是微信小程序运行环境中的一个精简版 JavaScript 解释器。它位于小程序的逻辑层（App Service），这个独立的线程专门负责处理所有业务逻辑。JsCore 之所以”精简”，是因为它剔除了浏览器中与 DOM 操作、CSS 渲染等直接相关的部分。

说白了，这就是一个阉割版的 JavaScript 引擎，专门为小程序定制的。它只专注于以下几个任务：

  • 执行业务代码：处理你在 .js 文件中编写的所有函数、数据和 API 调用，比如发起网络请求什么的
  • 管理数据与状态：当你调用 this.setData 改变数据时，JsCore 会生成数据更新指令
  • 控制生命周期：负责触发和执行 onLoad、onShow 等生命周期函数

这种设计的好处很明显：让 JsCore 专心搞复杂的逻辑计算，避免了与页面渲染互相打架，大大提升了小程序的运行效率。

JSBridge：连接大脑与页面的桥梁

如果 JsCore 是小程序的”大脑”，那么 JSBridge 就是连接”大脑”与”页面”（视图层）的”桥梁”。由于逻辑层和视图层是相互独立的线程，它们之间没法直接通信，JSBridge 的核心作用就是打破这种隔阂，实现跨线程的数据与事件传递。

需要注意的是，JSBridge 本身并不是纯粹的 JavaScript 代码，而是一个通信机制或者说协议。它的实现依赖于小程序底层的原生代码（Native Code）。

JSBridge 的组成部分

JSBridge 主要包含两大部分：

  1. JavaScript 层的封装：你在小程序代码里看到的 wx.scanCode、wx.request 等 API，就是 JSBridge 在 JavaScript 层的封装。这些函数内部并不直接执行任务，而是向底层发送一条消息

  2. 原生层的实现：这是 JSBridge 的真正核心。这部分代码由微信客户端的原生语言（如 iOS 上的 Objective-C/Swift，Android 上的 Java/Kotlin）编写，负责监听来自 JavaScript 层的消息，解析指令，然后调用相应的系统原生 API

协同工作机制：以 wx.scanCode 为例

JsCore 和 JSBridge 的协同工作构成了一个完整的闭环。以调用 wx.scanCode 方法为例，整个流程是这样的：

  1. 发起调用：当你在小程序逻辑层调用 wx.scanCode 时，JsCore 识别到这是一个需要调用原生能力的 API

  2. 指令传递：wx.scanCode 函数通过 JSBridge 将一条指令（包含方法名、参数和回调 ID）打包成 JSON 字符串，发送给原生层

  3. 原生层执行：原生层通过消息队列等机制接收并解析这条指令。它会调用手机系统提供的原生 API，启动摄像头并进行扫码

  4. 结果返回：扫码成功后，原生层将结果打包成一个新的数据包，通过 JSBridge 的通信通道返回给逻辑层

  5. 处理回调：JsCore 接收到数据包后，根据其中的回调 ID，找到并执行对应的 success 或 fail JavaScript 回调函数，最终你在小程序中看到扫码结果

整个过程就像是一个消息传递系统，各个组件各司其职，配合得天衣无缝。

总结

JsCore 负责前端业务逻辑，而 JSBridge 则负责让这些逻辑能够与底层的原生能力和视图层进行交互。