uni-app 中 Worker 线程的使用与注意事项详解

首先在 static 目录下新建一个专门存放 worker 相关文件的目录。

将 worker 文件放置在 static 目录下是必要的，因为 worker.js 无法被其他普通 js 文件直接引用。uni-app 在编译为微信小程序代码时会执行 Tree-shaking（摇树优化），自动剔除未被引用的 js 文件。若 worker 文件不在 static 目录下，极有可能被该优化机制误删。

接着，需要在 pages.json 文件中注册刚才创建的 worker 目录。

请务必注意，pages.json 文件中该配置项的最后一行末尾不能包含逗号，否则会导致语法报错。

随后，编写具体的 worker.js 文件。文件名可自定义，但必须放置在之前创建的 workers 目录中。

//MyWorker.js
//用于接收外部消息
worker.onMessage(function(res) {
	console.log('worker内部线程')
	console.log(res)
	//用于发送
	worker.postMessage({
		message: '收到worker的消息'
	});
});

接下来，在主线程中实现 Worker 的创建、调用及销毁逻辑。

第一步是创建 Worker 实例。

let worker = wx.createWorker('/static/workers/MyWorker.js', {
	useExperimentalWorker: true,
});

在创建时建议开启 useExperimentalWorker: true 选项。根据官方注释，该选项表示是否使用实验性 Worker。在 iOS 平台下，实验性 Worker 的 JS 运行效率相比非实验性版本可提升近十倍。若需在 Worker 中进行重度计算，建议开启此选项。同时需注意，实验性 Worker 在系统资源极度紧张时存在极小概率被系统回收的风险，因此建议配合 worker.onProcessKilled 事件使用，以便在 Worker 被回收后能重新创建实例。

第二步是向 Worker 线程发送消息。

worker.postMessage({message:'主线程发来的消息'})

需要注意的是，发送给 Worker 的消息必须是一个可序列化的 JavaScript key-value 形式的对象。

第三步是在主线程中监听来自 Worker 线程的消息。

worker.onMessage((res)=>{
	console.log('主线程打印的')
	console.log(res)
})

第四步是结束当前的 Worker 线程。此操作仅限在主线程的 worker 对象上调用。

worker.terminate()

第五步探讨如何在 Worker 内部引入其他 js 文件。

被 Worker 引入的 js 文件必须放置在之前创建的 Worker 目录内部，否则无法被正确引用。

例如，在刚创建的 workers 文件夹下创建一个名为 Test.js 的文件。

//Test.js
function test(){
	console.log('我是外部js文件中的内容')
}
export default{
	test
}

在 MyWorker.js 中引入该 Test.js 文件。

import Test from 'Test.js'
//用于接收外部消息
worker.onMessage(function(res) {
	console.log('worker内部线程')
	console.log(res)
	Test.test();//调用其他js文件中的代码
	//用于发送
	worker.postMessage({
		message: '收到worker的消息'
	});
});

运行后打印结果如下。

使用 Worker 时需注意以下事项：

• Workers 之间不支持直接发送消息。
• Worker 的入口文件由 wx.createWorker() 指定，开发者可以动态指定 Worker 的入口文件。
• Worker 内的代码只能 require 指定 Worker 路径内的文件，无法引用其他路径的文件。
• Worker 的最大并发数量限制为 1 个。在创建下一个 Worker 之前，必须使用 Worker.terminate() 结束当前 Worker。
• Worker 内部不支持调用 wx 系列 API。

至此，关于 uni-app 下 Worker 的使用介绍完毕。如需了解更多 uni-app Worker 相关内容，请搜索本站历史文章或继续浏览后续文章，感谢大家的支持！