微信小程序中使用 多线程 Worker

目录

使用流程

[1. 配置 Worker 信息](#1. 配置 Worker 信息)

[2. 添加 Worker 代码文件](#2. 添加 Worker 代码文件)

[3. 编写 Worker 代码](#3. 编写 Worker 代码)

[4. 在主线程中初始化 Worker](#4. 在主线程中初始化 Worker)

[5. 主线程向 Worker 发送消息](#5. 主线程向 Worker 发送消息)

注意事项


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

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

使用流程

1. 配置 Worker 信息

app.json 中可配置 Worker 代码放置的目录,目录下的所有 JS 代码最终将被打包成一个 JS 文件:

配置示例:

javascript 复制代码
{
  "workers": "workers"
}

通过以上方式配置,workers 目录下的所有 JS 文件会被打包为一个 JS 文件,并作为小程序首包的一部分。

小程序首包体积是有上限的(目前为2M),为了使 worker 代码不占用首包体积,从基础库 v2.27.3 开始支持将 worker 代码打包为一个分包。(需要更新开发者工具至最新 nightly 版本)

worker 代码配置为分包示例:

javascript 复制代码
{
  "workers": {
    "path": "workers",
    "isSubpackage": true  // true 表示把 worker 打包为分包。默认 false。填 false 时等同于 { "workers": "workers" }
  }
}

2. 添加 Worker 代码文件

根据步骤 1 中的配置,在代码目录下新建以下两个入口文件:

javascript 复制代码
workers/request/index.js
workers/request/utils.js
workers/response/index.js

添加后,目录结构如下:

javascript 复制代码
├── app.js
├── app.json
├── project.config.json
└── workers
    ├── request
    │   ├── index.js
    │   └── utils.js
    └── response
        └── index.js

3. 编写 Worker 代码

workers/request/index.js 编写 Worker 响应代码

javascript 复制代码
const utils = require('./utils')

// 在 Worker 线程执行上下文会全局暴露一个 worker 对象,直接调用 worker.onMessage/postMessage 即可
worker.onMessage(function (res) {
  console.log(res)
}

4. 在主线程中初始化 Worker

在主线程的代码 app.js 中初始化 Worker

javascript 复制代码
const worker = wx.createWorker('workers/request/index.js') // 文件名指定 worker 的入口文件路径,绝对路径

从基础库 v2.27.3 开始,如果 worker 代码配置为了分包,则需要先通过 wx.preDownloadSubpackage 接口下载好 worker 代码,再初始化 Worker

javascript 复制代码
var task = wx.preDownloadSubpackage({
   packageType: "workers", 
   success(res) {
      console.log("load worker success", res)
      var worker = wx.createWorker("workers/request/index.js")   // 创建 worker。 如果 worker 分包没下载完就调 createWorker 的话将报错
   },
   fail(res) {
      console.log("load worker fail", res)
   }
})

task.onProgressUpdate(res => {
  console.log(res.progress) // 可通过 onProgressUpdate 接口监听下载进度
  console.log(res.totalBytesWritten)
  console.log(res.totalBytesExpectedToWrite)
})

5. 主线程向 Worker 发送消息

javascript 复制代码
worker.postMessage({
  msg: 'hello worker'
})

worker 对象的其它接口请看 worker接口说明

注意事项

  1. Worker 最大并发数量限制为 1 个,创建下一个前请用 Worker.terminate() 结束当前 Worker
  2. Worker 内代码只能 require 指定 Worker 路径内的文件,无法引用其它路径
  3. Worker 的入口文件由 wx.createWorker() 时指定,开发者可动态指定 Worker 入口文件
  4. Worker 内不支持 wx 系列的 API
  5. Workers 之间不支持发送消息
  6. Worker 目录内只支持放置 JS 文件,其他类型的静态文件需要放在 Worker 目录外
  7. 基础库 v2.18.1 开始支持在插件内使用 worker。相应地,插件使用worker前需要在plugin.json内配置workers代码路径,即一个相对插件代码包根目录的路径。
相关推荐
卷Java1 天前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
祐言QAQ1 天前
(超详细,于25年更新版) VMware 虚拟机安装以及Linux系统—CentOS 7 部署教程
linux·运维·服务器·c语言·物联网·计算机网络·centos
猿究院--杨昊行1 天前
计算机网络模型
计算机网络
笨笨狗吞噬者1 天前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
安然~~~1 天前
计算机网络
计算机网络
巧夺噶事来1 天前
培训班小程序模板如何一键套用,分享微信小程序的制作方法
微信小程序·小程序
OEC小胖胖1 天前
组件化思维(上):视图与基础内容组件的深度探索
微信·微信小程序·小程序·微信开放平台
卷Java1 天前
WXML 编译错误修复总结
xml·java·前端·微信小程序·uni-app·webview
云起SAAS2 天前
养成合成小游戏抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·养成合成小游戏