微信小程序多线程使用(含视频讲解、源码)

简介

我们在开发微信小程序的时候，有时候会用到异步任务，如果把耗时任务放在主线程中，会导致主线程被阻塞，后面代码执行不了，界面会卡主、程序崩溃等问题。这时候就要用到多线程，来并发处理业务需求。

工具/原料

• 微信开发者工具

• 微信小程序APPID或可选测试号

• 视频讲解：https://www.bilibili.com/video/BV11K41157RG?from=search&seid=7961875538802847306

• 源码下载：https://pan.baidu.com/s/16iZpOmxTFAPXWgeGWz45Tg 提取码: 3xw7

方法/步骤

1. 1

   在打开微信开发者工具，依次点项目 -> 新建项目，项目名称(随便写)：workerDemo，目录：C:\Users\Administrator\WeChatProjects\workerDemo ，AppID：自己的AppID(不用发布，可用测试号)，开发模式选“小程序”，然后点“新建”。

   

   

2. 2

   打开项目根目录下的app.json文件，在最后一行追加

   "workers": "workers"，记得上一行的最后要加逗号“,”，这是为了配置 Worker 代码放置的目录。

   

   

3. 3

   在项目根目录下新建一个workers目录，workers目录下在新建两个目录分别是：request，response，然后在request里新建两个js文件：index.js、utils.js，在response目录下新建index.js文件。

   

4. 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. 5

   在"pages/index/index"下的index.wxml文件加入如下代码：

    

   <!--index.wxml-->

   <view class="container">

     <view class="usermotto">

       <text class="user-motto">{{motto}}</text>

     </view>

   </view>

   

6. 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. 7

   点击编译运行，即可看到主线程和worker线程互相通信，传递信息。页面实时数据更新。子线程（worker线程）与主线程各做各的事，互不干扰。

   

    

注意事项

• 注意逗号问题，语句尾一般不加，否则报错。