uni-app下Worker的使用

1、在static目录下创建一个目录用于存放worker文件

为啥要在static目录下创建worker目录呢?那是因为worker.js没办法在别的js中被引用,uni-app项目编译成微信小程序代码时会进行Tree-shaking(摇树优化),把那些没被引用的js文件给剔除掉,放在static目录下可以避免被摇树优化。

2、在pages.json文件中引用刚创建的worker目录


注意:pages.json最后一项后面不要有逗号,否则会报错

3、编写worker.js(名字任意取,要在上面创建的workers目录下面)
js 复制代码
//MyWorker.js
//用于接收外部消息
worker.onMessage(function(res) {
	console.log('worker内部线程')
	console.log(res)
	//用于发送
	worker.postMessage({
		message: '收到worker的消息'
	});
});
4、主线程中创建调用和销毁Worker

1、创建Worker

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

useExperimentalWorker: true 引用官方注释:是否使用实验worker。在iOS下,实验worker的JS运行效率比非实验worker提升近十倍,如需在worker内进行重度计算的建议开启此选项。同时,实验worker存在极小概率会在系统资源紧张时被系统回收,因此建议配合 worker.onProcessKilled 事件使用,在worker被回收后可重新创建一个。

2、发送消息给Worker线程

js 复制代码
worker.postMessage({message:'主线程发来的消息'})

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

3、监听Worker线程的消息

js 复制代码
worker.onMessage((res)=>{
	console.log('主线程打印的')
	console.log(res)
})

4、结束当前Worker线程(仅限在主线程 worker 对象上调用)

java 复制代码
worker.terminate()
5、Worker中如何引入其他js

被引入的js文件必须要放在上面创建的Worker目录内部,不然无法引用

在刚创建的workers文件夹下创建一个Test.js文件

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

MyWorker.js中引入该js

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.terminate() 结束当前 Worker。
  • Worker 内不支持 wx 系列的 API。
相关推荐
willow1 天前
uniapp实战
uni-app
只会cv的前端攻城狮1 天前
兼容性地狱-Uniapp钉钉小程序环境隔离踩坑实录
前端·uni-app
codingWhat3 天前
小程序里「嵌」H5:一套完整可落地的 WebView 集成方案
前端·uni-app·webview
小时前端4 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Mr_li5 天前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup5 天前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Mintopia6 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia6 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲7 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang8 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程