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目录下面)
//MyWorker.js
//用于接收外部消息
worker.onMessage(function(res) {
	console.log('worker内部线程')
	console.log(res)
	//用于发送
	worker.postMessage({
		message: '收到worker的消息'
	});
});
4、主线程中创建调用和销毁Worker

1、创建Worker

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

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

2、发送消息给Worker线程

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

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

3、监听Worker线程的消息

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

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

worker.terminate()
5、Worker中如何引入其他js

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

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

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

MyWorker.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。
uni-app使用PWA(Progressive Web App,渐进式网络应用程序)可以提升应用的离线使用能力、推送通知功能以及提供类似原生应用的体验。以下是如何在uni-app项目中使用PWA的步骤: 1. **注册Service Worker**: Service Worker是实现PWA的关键技术之一,它是一个运行在浏览器后台的独立线程,负责缓存资源、提供服务工作线程等。要在uni-app使用PWA,首先需要在项目中注册Service Worker。 2. **配置manifest.json**: PWA通常需要一个配置文件`manifest.json`来定义应用的名称、图标、主题颜色等元数据,以及启动画面、显示模式等。这个文件对于将网页添加到主屏幕以及应用的安装和启动至关重要。 3. **优化离线体验**: 利用Service Worker的缓存机制,可以预先缓存应用的资源文件,包括HTML、CSS、JavaScript以及多媒体资源等,以便在没有网络连接的情况下依然能够加载和使用应用。 4. **添加推送通知功能**: PWA支持推送通知,可以在用户不打开应用的情况下发送消息提醒。这需要使用到Web Push API,并且通常还需要一个服务器来管理推送订阅和消息发送。 5. **测试和调试**: 由于Service Worker必须在HTTPS环境下工作,因此在本地测试时需要通过HTTPS服务器或者使用localhost来绕过这一限制。 6. **发布和部署**: 完成开发和测试后,需要将应用部署到支持HTTPS的服务器上,以便用户可以从网站安装PWA到他们的设备上。 此外,在使用uni-app开发PWA时,可以参考一些已有的案例和教程,这样可以更快地了解整个流程和最佳实践。同时,也要注意测试在不同设备和浏览器上的兼容性,确保应用能够在各种环境下都表现良好。 总之,通过上述步骤,您可以在uni-app项目中集成PWA,从而为用户提供更加丰富和便捷的应用体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值