#yyds干货盘点#愚公系列2022年10月 微信小程序-全局配置属性之Worker

Posted 2022-10-18

一、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代码路径，即一个相对插件代码包根目录的路径。