简介

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

工具/原料

  • 微信开发者工具
  • 微信小程序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(不用发布,可用测试号),开发模式选“小程序”,然后点“新建”。

java 微服务多线程调用第三方 微服务中多线程怎么用_根目录

  1. 2
    打开项目根目录下的app.json文件,在最后一行追加
    "workers": "workers",记得上一行的最后要加逗号“,”,这是为了配置 Worker 代码放置的目录。

java 微服务多线程调用第三方 微服务中多线程怎么用_主线程_02

  1. 3
    在项目根目录下新建一个workers目录,workers目录下在新建两个目录分别是:request,response,然后在request里新建两个js文件:index.js、utils.js,在response目录下新建index.js文件。
  2. 4在项目根目录下的workers/request/index.js里写上如下代码(worker线程核心代码):
1. 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)2. 5
在"pages/index/index"下的index.wxml文件加入如下代码:

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>3. 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()
  },


  1. })
  2. 7
    点击编译运行,即可看到主线程和worker线程互相通信,传递信息。页面实时数据更新。子线程(worker线程)与主线程各做各的事,互不干扰。

注意事项

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