跳到主内容

微信小程序架构解析

· 4分钟阅读

小程序作为前端越来越流行的开发应用新的方式,能够在应用里面运行独立的一个程序,能够赋予小程序调用底层应用的一些原生能力,比如原生的相机,定位功能等。

小程序架构

但是小程序不同于 H5,为什么在体验上比 H5 会好很多,先来看下小程序的架构图

小程序架构图

从上面可以看出,微信会创建两个线程来管理渲染层和逻辑层,WebView 主要处理 WXML 和 WXSS,负责渲染等工作,多个页面会创建多个 WebView 线程, JsCore 主要执行业务逻辑代码,渲染层和逻辑层通过 Native 来进行通信。例如请求数据,WebSocket 都是通过 Native 来执行后给 JsCore 处理或者给 WebView 来渲染。不同于纯 H5 只有一个 WebView 线程来处理渲染和 JS 逻辑,所以小程序性能相对比较好

因为 JsCore 里面没有暴露 window,document 对象,所以无法跟 web 开发一样直接操作 DOM

数据驱动

小程序的数据驱动类似于 React 的逻辑,通过把视图转为虚拟 DOM,然后手动调用 this.setData 来改变状态,当数据变更的时候,会驱动视图进行更新

例如下面有一个 WXML 定义

<view>
<view>{{ name }}</view>
</view>
data: {
name: "1024nav.com";
}

小程序会转为下面的对象,然后渲染成 1024nav.com 文档

{
name: "view",
children: [
{
text: "1024nav.com"
}
]
}

当调用 this.setState({ name: 'hello world' }) 就会重新创建新的对象

{
name: "view",
children: [
{
text: "hello world"
}
]
}

经过前后虚拟 DOM 对比得出差异,把 view 的 text 改为 hello world

虚拟 DOM 构建和对比是在 JsCore 运行,然后通过 Native 传递到渲染层进行渲染

小程序的冷启动和热启动

冷启动:用户首次打开或者小程序被微信销毁后再次打开,就需要重新完全开始加载小程序

热启动:用户已经打开过小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台(此时小程序能够保持最后访问的那个页面)

如果小程序占用的内存过高或者小程序切入后台超过 5 分钟以上没有操作,那么微信会销毁小程序