微信小程序多线程使用(含视频讲解、源码)
简介
我们在开发微信小程序的时候，有时候会用到异步任务，如果把耗时任务放在主线程中，会导致主线程被阻塞，后面代码执行不了，界面会卡主、程序崩溃等问题。这时候就要用到多线程，来并发处理业务需求。
工具/原料
-
微信开发者工具
-
微信小程序APPID或可选测试号
-
视频讲解：https://www.bilibili.com/video/BV11K41157RG?from=search&seid=7961875538802847306
-
源码下载：https://pan.baidu.com/s/16iZpOmxTFAPXWgeGWz45Tg 提取码: 3xw7
方法/步骤
-
1
在打开微信开发者工具，依次点项目 -> 新建项目，项目名称(随便写)：workerDemo，目录：C:\Users\Administrator\WeChatProjects\workerDemo ，AppID：自己的AppID(不用发布，可用测试号)，开发模式选“小程序”，然后点“新建”。
-
2
打开项目根目录下的app.json文件，在最后一行追加
"workers": "workers"，记得上一行的最后要加逗号“,”，这是为了配置 Worker 代码放置的目录。
-
3
在项目根目录下新建一个workers目录，workers目录下在新建两个目录分别是：request，response，然后在request里新建两个js文件：index.js、utils.js，在response目录下新建index.js文件。
-
4
在项目根目录下的workers/request/index.js里写上如下代码（worker线程核心代码）：
const utils = require('./utils')
// 在 Worker 线程执行上下文会全局暴露一个 worker 对象，直接调用 worker.onMeesage/postMessage 即可
//监听主线程向当前线程发送的消息的事件
worker.onMessage(function (res) {
console.log(res.msg)
})
var count = 0
setInterval(function () { //每秒定时像主线程发送消息
console.log('这是worker内部线程打印的')
//向主线程发送的消息
worker.postMessage({
msg: '来自于worker线程：' + count++
})
}, 1000)
-
5
在"pages/index/index"下的index.wxml文件加入如下代码：
<!--index.wxml-->
<view class="container">
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
-
6
在"pages/index/index"下的index.js文件加入如下代码（主线程核心代码）：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello Worker',
},
onLoad: function () {
// 文件名指定 worker 的入口文件路径，绝对路径
const worker = wx.createWorker('/workers/request/index.js');
//向Worker线程发送的消息
worker.postMessage({
msg: '来自于主线程的消息'
});
//监听Worker线程向当前线程发送的消息的事件
var that = this
worker.onMessage(function(res){
var resValue = res.msg
console.log('------------------------------------------')
console.log('这是主线程打印的')
console.log(resValue) //打印res对象里的属性成员变量的值
that.setData({ //绑定数据
motto:resValue
})
});
//worker.terminate()
},
})
-
7
点击编译运行，即可看到主线程和worker线程互相通信，传递信息。页面实时数据更新。子线程（worker线程）与主线程各做各的事，互不干扰。
注意事项
-
注意逗号问题，语句尾一般不加，否则报错。