【小程序 - 大智慧】深入微信小程序的核心原理

【小程序 - 大智慧】深入微信小程序的核心原理

引用

CSDN

1.

https://blog.csdn.net/qq_53673551/article/details/141925234

微信小程序自2017年上线以来，以其独特的双线程架构和高效的渲染机制迅速赢得了开发者的青睐。本文将深入探讨微信小程序的核心原理，包括其双线程架构、渲染机制、通讯系统、生命周期以及跨端开发框架等内容。

双线程架构

微信小程序的设计与前端浏览器有着本质的区别，它将JavaScript操作层和界面渲染层进行了隔离。具体来说：

1. App Service（逻辑层）：这是一个专门用于执行JavaScript的沙箱环境，无法直接操作DOM或访问浏览器API，只能通过Native异步查询DOM元素并进行操作。小程序的WXML和WXSS会被编译为JS脚本进行注入操作。

2. Web View（渲染层）：负责页面的展示，采用多页面模式，类似于App的多页面结构。每个页面都运行在一个独立的Web View中。

3. Native（微信客户端）：利用微信的缓存机制，提前注入微信SDK、接口请求和组件渲染等功能。

WebView 结构

小程序的页面加载过程可以分为以下几个阶段：

1. 启动一个WebView，这在iOS和Android系统上都需要一定的时间。
2. 在WebView中初始化基础库，并进行一些性能优化。
3. 注入小程序的WXML结构和WXSS样式，以便在接收到页面初始数据后立即开始渲染。
4. 每个页面都独立运行在一个页面层级上，通过wx.navigateTo创建新的页面层级，通过wx.navigateBack销毁页面层级。

快速渲染 PageFrame

为了提高渲染效率，微信小程序采用了PageFrame模板机制：

1. 利用PageFrame模板生成Web View视图。
2. 首次加载时缓存PageFrame模板生成的内容，后续加载时直接使用缓存。
3. 初始化Web View地址为http://127.0.0.1:${global.proxyPort}/aboutblank?${c}，其中${c}是对应Web View的ID。
4. 监听页面的ready操作，注入执行代码脚本生成最终的Web View地址和执行代码。

编译原理

小程序的WXML和WXSS文件需要经过编译才能在Web View中渲染：

1. WXSS通过wcsc编译为JS文件，然后注入到Web View中。
2. WXML通过wcc编译为JS文件，生成虚拟DOM树。对于需要异步获取的数据，会使用虚拟DOM元素进行占位。

通讯系统

小程序的通讯系统基于发布-订阅模式：

1. Native层向渲染层和逻辑层注入WeixinJSBridge。
2. 通过invoke调用Native API，通过publish和subscribe实现消息传递。

生命周期

小程序的生命周期包括以下几个关键阶段：

1. onLaunch：App主应用开始初始化。
2. onLoad：页面加载时触发，一个页面只会调用一次。
3. onShow：页面显示/切入前台时触发。
4. onHide：页面隐藏/切入后台时触发。
5. onReady：页面初次渲染完成时触发。
6. onUnload：页面卸载时触发。

跨端框架

为了应对多平台小程序开发的需求，市面上出现了多种跨端开发框架，其中Taro和uni-app最为流行：

1. Taro：采用TypeScript和Rust开发，兼容React和Vue，支持WebPack和Vite。
2. uni-app：基于Vue开发，提供了完整的开发工具链和云服务支持。

总结

微信小程序以其独特的架构设计和高效的渲染机制，为开发者提供了一种全新的开发模式。通过深入理解小程序的核心原理，开发者可以更好地利用这一平台，开发出更优质的应用。