【愚公系列】2022年02月 微信小程序-app.json配置属性之Worker

举报
愚公搬代码 发表于 2022/02/22 15:55:09 2022/02/22
【摘要】 一、app.json配置属性之Worker我们知道js是单线程的,在有时候需要处理一些密集计算或者是高延迟的时候,总会出现不便。而且,现在的cpu都是多核的,单线程也无法充分发挥电脑的计算能力。正是基于这种情况,才有了worker的诞生。一些异步处理的任务,可以放置于 Worker 中运行,待运行结束后,再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中,不能直接...

一、app.json配置属性之Worker

我们知道js是单线程的,在有时候需要处理一些密集计算或者是高延迟的时候,总会出现不便。而且,现在的cpu都是多核的,单线程也无法充分发挥电脑的计算能力。正是基于这种情况,才有了worker的诞生。

一些异步处理的任务,可以放置于 Worker 中运行,待运行结束后,再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中,不能直接调用主线程的方法。

Worker 与主线程之间的数据传输,双方使用 Worker.postMessage() 来发送数据,Worker.onMessage() 来接收数据,传输的数据并不是直接共享,而是被复制的。

二、配置

1.app.json

在app.json中配置worker目录

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "workers": "workers",
  "sitemapLocation": "sitemap.json"
}

如下图:
在这里插入图片描述

2.子线程

// myworker.js
worker.onMessage(function(res){
 console.log('这是worker内部线程打印的')
 console.log(res)
 let sum = add(res.x,res.y);
 worker.postMessage({
  sum : sum
 })
});
 
function add(x,y){
 return x+y;
}

3.主线程

onLoad: function (options) {

 const worker = wx.createWorker('/workers/request/index.js');
 worker.postMessage({
  x : 10,
  y : 2
 });

 worker.onMessage(function(res){
  console.log('这是主线程打印的')
  console.log(res)
 });
},

4.监听回收事件

function createNewWorker() {
  const worker = wx.createWorker('workers/request/index.js', {
    useExperimentalWorker: true
  })
  // 监听worker被系统回收事件
  worker.onProcessKilled(() => {
    // 重新创建一个worker
    createNewWorker()
  })
}
// 创建实验worker
createNewWorker()

5. 注意事项

  • Worker 最大并发数量限制为 1 个,创建下一个前请用 Worker.terminate() 结束当前 Worker
  • Worker 内代码只能 require 指定 Worker 路径内的文件,无法引用其它路径
  • Worker 的入口文件由 wx.createWorker() 时指定,开发者可动态指定Worker 入口文件
  • Worker 内不支持 wx 系列的 API
  • Workers 之间不支持发送消息
  • Worker 目录内只支持放置 JS 文件,其他类型的静态文件需要放在 Worker 目录外
  • 基础库 v2.18.1 开始支持在插件内使用 worker。相应地,插件使用worker前需要在plugin.json内配置workers代码路径,即一个相对插件代码包根目录的路径。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。