核心骨架: 小程序双线程架构

发布时间：2026/7/28 5:09:44

核心骨架: 小程序双线程架构

本节简介

从本小节开始，我们将实现小程序架构的核心逻辑: 双线程架构，开始之前我们先简单介绍下双线程架构以及选择双线程架构的原因;

小程序在渲染过程中，将逻辑代码的执行和页面逻辑的渲染分割开，各自独立在一个线程内运行，及小程序的双线程运行架构;

采用双线程运行的小程序的优势主要有:

  • JS 逻辑的独立运行不会影响 UI 的渲染，性能更优
  • 安全性: JS逻辑独立运行，避免利用一些浏览器api操作DOM，执行动态脚本等，方便更好的管控 (预防XSS和CSRF攻击)

通过下图我们来看看双线程架构的大致实现:

在这里插入图片描述

i. 小程序页面采用Webview进行UI渲染(我们这里是用 iframe，也是一样的)

ii. 小程序的JS逻辑是用一个单独的JS线程来执行，这里是用 JS Worker 来运行

iii. UI 线程和逻辑线程之间的通信，都通过Native层实现的 JS Bridge 进行通信，JS Bridge 负责消息的中转

现在我们就通过上面简单的分析，开始实现我们的双线程架构吧~~

JSCore 逻辑运行线程

一个小程序的多个UI页面的JS逻辑共同跑在一个JS逻辑线程内，JSCore 类主要实现逻辑线程的创建和负责监听逻辑线程的消息并通知给 bridge 层，以及通过消息机制向逻辑发送通知.

import mitt, { Emitter } from 'mitt';
import workerJs from './worker.js?raw';
import type { MiniApp } from "@native/miniApp";
import type { IMessage } from "@native/types/common";/*** JSCore js逻辑执行的逻辑线程* * parent: MiniApp 小程序实例* worker: Worker 逻辑线程* event: Emitter 小程序逻辑线程消息通知* * + init(): void 初始化jscore* + postMessage(message: any): void 向逻辑线程发送消息* + addEventListener(type: string, listener: (event: any) => void): void 监听逻辑线程消息*/
export class JSCore {/*** 父级小程序实例*/parent: MiniApp | null = null;/*** jscore worker实例*/worker: Worker | null = null;/*** jscore event emitter实例*/event: Emitter<Record<string, any>>;constructor() {this.event = mitt();}// 创建小程序逻辑执行线程async init() {const jsBlob = new Blob([workerJs], { type: 'text/javascript' });const urlObj = URL.createObjectURL(jsBlob);this.worker = new Worker(urlObj);this.worker.addEventListener('message', (e) => {const msg = e.data;this.event.emit('message', msg)});}/*** 向逻辑线程发送消息*/postMessage(msg: IMessage) {this.worker?.postMessage(msg);}/*** 监听逻辑线程消息*/addEventListener<T = any>(type: string, listener: (event: T) => void) {this.event.on(type, listener);}
}

这里我们先随便写了一个JS脚本，用于测试逻辑线程启动效果:

// worker.js
console.log('miniApp logic inited');self.addEventListener('message', (message) => {console.log('logic worker receive message', message.data);
});

Webview 页面渲染

小程序的UI页面渲染部分，我们通过一个 iframe 来模拟，Webview 类的作用是创建一个页面渲染环境: 小程序 Header， 导航，iframe 页面渲染器，同时根据小程序的页面配置信息(就是app.json中定义的页面配置)设置到当前创建的页面节点上；

在开始实现 Webview 类之前，我们来创建一下webview的节点元素模版:

// tpl.ts
export const webviewTpl = `<div class="wx-native-webview"><!-- 导航区域 --><div class="wx-native-webview__navigation"><div class="wx-native-webview__navigation-content"><div class="wx-native-webview__navigation-left-btn"></div><h2 class="wx-native-webview__navigation-title"></h2></div></div><!-- iframe --><div class="wx-native-webview__body"><div class="wx-native-webview__root"><iframe class="wx-native-webview__window" src="/miniApp.html" frameborder="0"></iframe></div></div>
</div>`;

Webview 模版中我们有加载一个html文件，大家只需要在项目的 public 目录下创建一个html即可，随便添加点内容;

根据当前模板我们开始创建 Webview 类:

import { uuid } from '@native/utils/util';
import mitt, { Emitter } from 'mitt';
import { webviewTpl } from './tpl';
import type { IMessage, WebviewParams } from "@native/types/common";
import type { Bridge } from "@native/bridge";export class Webview {/*** webview id*/id: string;/*** webview 初始化参数*/opts: WebviewParams;/*** webview el 元素根*/el: HTMLElement;/*** 当前webview 的父容器 Bridge*/parent: Bridge | null = null;/*** 当前webview 对应的iframe*/iframe: HTMLIFrameElement;/*** ui 渲染线程消息事件*/event: Emitter<Record<string, any>>;constructor(opts: WebviewParams) {this.opts = opts;// 每个webview的唯一idthis.id = `webview_${uuid()}`;this.el = document.createElement('div');this.el.classList.add('wx-native-view');this.el.innerHTML = webviewTpl;// 根据小程序配置初始化页面信息this.setInitialStyle();this.iframe = this.el.querySelector('.wx-native-webview__window') as HTMLIFrameElement;this.iframe.name = this.id;this.event = mitt();this.bindBackEvent();}/*** 初始化webview*/async init(callback: () => void) {// 等待frame 加载完成await this.frameLoaded();callback && callback();}frameLoaded() {return new Promise<void>((resolve) => {this.iframe.onload = () => {resolve();}});}// 绑定左上角返回按钮点击事件bindBackEvent() {const backBtn = this.el.querySelector('.wx-native-webview__navigation-left-btn') as HTMLElement;backBtn.onclick = () => {console.log('点击返回按钮')};}// 向UI线程发送消息通知postMessage(message: IMessage) {const iframeWindow = (window.frames as any)[this.iframe.name];if (iframeWindow) {// todo: 发送消息给ui线程}}/*** 监听UI渲染线程消息*/addEventListener<T = any>(type: string, listener: (event: T) => void) {this.event.on(type, listener);}setInitialStyle() {const config = this.opts.configInfo;const webview = this.el.querySelector('.wx-native-webview') as HTMLElement;const pageName = this.el.querySelector('.wx-native-webview__navigation-title') as HTMLElement;const navigationBar = this.el.querySelector('.wx-native-webview__navigation') as HTMLElement;const leftBtn = this.el.querySelector('.wx-native-webview__navigation-left-btn') as HTMLElement;const root = this.el.querySelector('.wx-native-webview__root') as HTMLElement;// 根页面的时候不显示左侧返回按钮if (this.opts.isRoot) {leftBtn.style.display = 'none';} else {leftBtn.style.display = 'block';}// 设置顶部的文字的颜色类if (config.navigationBarTextStyle === 'white') {navigationBar.classList.add('wx-native-webview__navigation--white');} else {navigationBar.classList.add('wx-native-webview__navigation--black');}// 如果声明了自定义 header，则通过css样式隐藏默认的 navigation 元素if (config.navigationStyle === 'custom') {webview.classList.add('wx-native-webview--custom-nav');}// 设置页面背景色root.style.backgroundColor = config.backgroundColor;// 设置导航栏背景色navigationBar.style.backgroundColor = config.navigationBarBackgroundColor;// 设置标题内容pageName.innerText = config.navigationBarTitleText;}
}

JSBridge 通信类

Bridge 的作用主要是构建起 webview 和 js core 之间的消息通信，比如将逻辑线程的信息发送给UI线程进行页面渲染（setData的数据），或者是UI线程的用户行为调用逻辑线程的方法等

import { uuid } from '@native/utils/util';
import { Webview } from '@native/webview';
import type { JSCore } from "@native/jscore";
import type { MiniApp } from "@native/miniApp";
import type { BridgeParams, IMessage } from "@native/types/common";export class Bridge {/*** bridge id*/id: string;/*** bridge 关联的 webview ui线程*/webview: Webview | null = null;/*** bridge 关联的 jscore 逻辑线程*/jscore: JSCore;/*** 小程序App实例*/parent: MiniApp | null = null;opts: BridgeParams;constructor(opts: BridgeParams) {this.id = `bridge_${uuid()}`;this.opts = opts;// 一个小程序公用一个 jscore，所以这个由外部小程序实例类传入this.jscore = opts.jscore;this.jscore.addEventListener('message', this.jscoreMessageHandler.bind(this));}jscoreMessageHandler(message: IMessage) {console.log('接收到来自于逻辑线程的消息: ', message);}uiMessageHandler(message: IMessage) {console.log('接收到来自UI线程的消息: ', message);}// 创建一个 webview 并监听其消息通知async init() {this.webview = await this.createWebview();this.webview.addEventListener('message', this.uiMessageHandler.bind(this));}/*** 创建当前bridge关联的webview渲染线程*/createWebview() {return new Promise<Webview>((resolve) => {const webview = new Webview({configInfo: this.opts.configInfo,isRoot: this.opts.isRoot,});webview.parent = this;webview.init(() => {resolve(webview);});// 将webview添加到miniApp的webview容器节点中this.parent?.webviewContainer?.appendChild(webview.el);});}  
}

在小程序类中集成 JSCore、Webview、Bridge

一个小程序实例需要维护一个 JSCore 逻辑线程和多个 Webview UI线程，每个page对应一个 Webview

export class MiniApp {/*** 当前小程序的 jscore 实例* * 一个小程序公用一个唯一的 jscore 实例，用于执行小程序的 js 代码*/jscore: JSCore;/*** bridge列表*/bridgeList: Bridge[] = [];/*** bridge ID -> bridge 实例的映射 */bridges: Record<string, Bridge> = {};constructor(opts: OpenMiniAppOpts) {// ...// 创建 JSCore 实例
+    this.jscore = new JSCore();}/* 初始化小程序页面 */viewDidLoad() {// ...// 小程序初始化
+   this.init();}// 小程序初始化async init() {// 初始化小程序逻辑执行线程this.jscore?.init();// 创建 js bridge，构建起 logic worker -> ui worker 通信const entryPageBridge = await this.createBridge({jscore: this.jscore,isRoot: true,appId: this.app.appId,pagePath: this.app.path,pages: [],query: this.app.query,scene: this.app.scene,configInfo: { // 暂时模拟构造一下美团小程序的页面配置参数，后续我们会通过读取小程序的 app.json 文件获取"navigationBarBackgroundColor": "#ffd200","navigationBarTextStyle": "black","navigationBarTitleText": "美团","backgroundColor": "#fff","usingComponents": {}}});this.bridgeList.push(entryPageBridge);// 隐藏小程序加载状态this.hideLaunchScreen();}async createBridge(opts: BridgeParams) {const bridge = new Bridge(opts);bridge.parent = this;// 初始化bridgebridge.init();return bridge;}
}

这里只展示了 miniApp 类关于双线程架构逻辑集成的部分，关于该类的其他部分可以查看上篇文章中的内容或者查看本节的项目代码;

至此，我们整个小程序的双线程基础模型就构建起来了，现在点击小程序列表，我们就可以看到拉起的小程序页面展示出了html页面，并且设置了小程序的导航栏，控制台也打印出来了相应的逻辑线程的信息:

本小节的项目代码已上传至 github: mini-wx-app

相关新闻

macos 安装 xcode

macos 安装 xcode

在 macOS 上安装 Xcode&#xff08;或者 Xcode Command Line Tools&#xff09;的方法如下&#xff1a; 1. 安装 Xcode Command Line Tools&#xff08;轻量级&#xff0c;满足大部分编译需求&#xff09; 终端命令&#xff1a; xcode-select --install会弹出安装提示&#x…

2026/7/24 17:28:34
JavaEE：分布式session

JavaEE：分布式session

一、使用Redis存储分布式session&#xff1a; 1.SpringBoot整合Redis&#xff0c;见如下地址&#xff1a; JavaEE&#xff1a;SpringBoot整合Redis_a526001650a-CSDN博客 2.代码实现分布式session存储(此处以token为例)&#xff1a; Autowired private RedisTemplate<St…

2026/7/25 5:44:42
企业级路由器技术全解析：从基础原理到实战开发

企业级路由器技术全解析：从基础原理到实战开发

简介 在当今数字化时代，路由器作为网络的核心设备，其技术深度与应用广度直接影响着企业网络的性能与安全性。本文将全面解析路由器的基础原理、工作机制以及企业级开发技术，从网络层寻址到路由协议算法，从安全配置到QoS实现，再到多厂商API开发实战，旨在帮助网络工程师和…

2026/7/26 14:06:42

最新新闻

柔性电子墨水屏技术解析：从原理到智能表带应用实践

柔性电子墨水屏技术解析：从原理到智能表带应用实践

1. 项目概述&#xff1a;当表带也“活”了起来“电子墨水表&#xff1a;除了表盘 表带也能变身”&#xff0c;这个标题乍一看有点科幻&#xff0c;但细想之下&#xff0c;它精准地指向了智能穿戴领域一个被长期忽视的“沉默地带”——表带。我们早已习惯了智能手表的表盘可以千…

2026/7/28 5:09:12
goimports-reviser命令行参数全解析：解锁高效导入管理的7个技巧

goimports-reviser命令行参数全解析：解锁高效导入管理的7个技巧

goimports-reviser命令行参数全解析&#xff1a;解锁高效导入管理的7个技巧 【免费下载链接】goimports-reviser Right imports sorting & code formatting tool (goimports alternative) 项目地址: https://gitcode.com/gh_mirrors/go/goimports-reviser goimports…

2026/7/28 5:09:12
基于Docker与鱼香ROS镜像，5分钟一键生成MoveIt IKFast插件

基于Docker与鱼香ROS镜像，5分钟一键生成MoveIt IKFast插件

1. 项目概述&#xff1a;为什么我们需要一个“开箱即用”的ikfast环境&#xff1f;如果你在ROS&#xff08;Robot Operating System&#xff09;和MoveIt的圈子里混过一段时间&#xff0c;尤其是搞过机械臂运动学规划&#xff0c;那你一定对“ikfast”这个词又爱又恨。爱的是&a…

2026/7/28 5:09:12
goimports-reviser vs goimports：为什么这款工具能提升你30%的开发效率？

goimports-reviser vs goimports：为什么这款工具能提升你30%的开发效率？

goimports-reviser vs goimports&#xff1a;为什么这款工具能提升你30%的开发效率&#xff1f; 【免费下载链接】goimports-reviser Right imports sorting & code formatting tool (goimports alternative) 项目地址: https://gitcode.com/gh_mirrors/go/goimports-rev…

2026/7/28 5:09:13
iisnode配置实战：Web.config与iisnode.yml参数完全指南

iisnode配置实战：Web.config与iisnode.yml参数完全指南

iisnode配置实战&#xff1a;Web.config与iisnode.yml参数完全指南 【免费下载链接】iisnode Hosting node.js applications in IIS on Windows 项目地址: https://gitcode.com/gh_mirrors/iis/iisnode iisnode是一款强大的工具&#xff0c;能让开发者在Windows系统的II…

2026/7/28 5:09:13
自回归大语言模型相关维度的研究与应用

自回归大语言模型相关维度的研究与应用

1. 项目概述&#xff1a;自回归大语言模型的相关维度研究2025年NIPS会议上关于自回归大语言模型相关维度的研究&#xff0c;本质上是在探索这类复杂神经系统的内在结构特性。相关维度&#xff08;Correlation Dimension&#xff09;作为非线性动力学中的经典概念&#xff0c;被…

2026/7/28 5:09:13

日新闻

告别臃肿！3步让你的暗影精灵笔记本重获新生

告别臃肿！3步让你的暗影精灵笔记本重获新生

告别臃肿&#xff01;3步让你的暗影精灵笔记本重获新生 【免费下载链接】OmenSuperHub Control Omen laptop performance, fan speeds, and keyboard lighting, and unlock power limits. 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 你是否也曾为官方Om…

2026/7/28 0:00:52
RAG必踩坑！财报法规检索不准？这款开源工具让答案浮出水面，准确率飙升98.7%！

RAG必踩坑！财报法规检索不准？这款开源工具让答案浮出水面，准确率飙升98.7%！

做 RAG 的人应该都踩过这个致命的坑&#xff1a;把几百页的财报、法规、技术手册扔给向量库&#xff0c;问一个具体问题&#xff0c;搜出来的全是沾边但没用的内容 —— 关键信息要么被硬切块拆碎了&#xff0c;要么藏在几十条结果的最下面。语义相似≠真正相关&#xff0c;这个…

2026/7/28 0:00:52
抖音视频文案提取工具全指南：免费2026版、手机App、在线工具一网打尽

抖音视频文案提取工具全指南：免费2026版、手机App、在线工具一网打尽

2026年做短视频运营&#xff0c;从抖音上扒文案早就不是偷偷抄笔记的事了。我刚开始做内容的时候&#xff0c;每天刷半小时抖音&#xff0c;手动把爆款视频的口播敲进备忘录&#xff0c;一条2分钟的视频得花十来分钟&#xff0c;碰到语速快的还要反复回听。后来试了一圈工具&am…

2026/7/28 0:00:52

周新闻

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex检测数据集数据集详情检测类别&#xff1a; allies enemy tag图片总量&#xff1a;7247张训练集&#xff1a;5139张验证集&#xff1a;1425张测试集&#xff1a;683张标注状态&#xff1a;全部已标注&#xff0c;即拿即用数据格式&#xff1a;支持YOLO格式及其他格式&#…

2026/7/27 7:47:45
智慧飞行 大疆无人机一站式智能管控平台/支持大疆机场/私有化部署 从航线规划、自动飞行、AI识别到数据管理，一个平台全搞定

智慧飞行 大疆无人机一站式智能管控平台/支持大疆机场/私有化部署 从航线规划、自动飞行、AI识别到数据管理，一个平台全搞定

智慧飞行-大疆无人机一站式智能管控平台/支持大疆机场/私有化部署 企业级全域智能无人机一体化管控平台源码&#xff01; 专为电力巡检、安防监控、应急救援、测绘勘察等行业打造&#xff0c;让您的无人机舰队实现 “无人化、自动化、智能化” 管理&#xff01; &#x1f3af; …

2026/7/27 5:35:46
揭秘ChatGPT+Mathematica协同教学：为什么92%的初学者在72小时内建立函数直觉？

揭秘ChatGPT+Mathematica协同教学：为什么92%的初学者在72小时内建立函数直觉？

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;AI帮助理解数学概念 人工智能正以前所未有的方式重塑数学学习的路径。通过自然语言处理与符号计算的深度融合&#xff0c;AI不仅能解析抽象定义&#xff0c;还能将定理、证明和几何直觉转化为可交互、可验证的…

2026/7/27 7:47:48

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/28 2:07:36
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/28 2:07:37
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/27 9:28:36