快捷導(dǎo)航

微信小程序基礎(chǔ)教程之worker線程的使用方法

更新時間：2019年07月15日 10:41:34 作者：甚時躍馬歸來

這篇文章主要給大家介紹了關(guān)于微信小程序基礎(chǔ)教程之worker線程的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

我們知道js是單線程的，在有時候需要處理一些密集計(jì)算或者是高延遲的時候，總會出現(xiàn)不便。而且，現(xiàn)在的cpu都是多核的，單線程也無法充分發(fā)揮電腦的計(jì)算能力。正是基于這種情況，才有了worker的誕生。由于微信小程序官方的教程比較看不懂...所以本篇主要介紹一下worker在小程序中的用法。

worker的一些說明

本篇主要是在小程序中使用worker，因?yàn)檎f明部分也是和小程序相關(guān)。

1、主線程和worker線程之間是通過消息來通信的，主線程不能直接調(diào)用worker線程中的函數(shù)

2、worker線程中不能使用使用wx系列的api。

步驟說明

小程序中，worker用法主要分為3步（按我個人的劃分），分別是：配置、主線程中創(chuàng)建調(diào)用和銷毀、worker線程中實(shí)現(xiàn)。

步驟一：配置

在app.json中配置worker目錄，如下圖（具體需要自己一一對應(yīng)目錄）

步驟二：主線程中創(chuàng)建調(diào)用和銷毀

這一步需要注意的就是，創(chuàng)建時填寫的是絕對路徑，其他基本沒什么問題。例如以下代碼，我們創(chuàng)建了worker線程，并向其發(fā)送了1個對象，對象中x=10和y=2。然后在接收到worker線程的消息時，打印出來。

// welcome.js
 onLoad: function (options) {

  const worker = wx.createWorker('/worker/myworker.js');
  worker.postMessage({
   x : 10,
   y : 2
  });

  worker.onMessage(function(res){
   console.log('這是主線程打印的')
   console.log(res)
  });
  
 },

worker線程中實(shí)現(xiàn)

worker中其實(shí)是默認(rèn)注入了一個叫worker的對象，直接調(diào)用監(jiān)聽消息和發(fā)送消息即可。如以下代碼：

// myworker.js
worker.onMessage(function(res){
 console.log('這是worker內(nèi)部線程打印的')
 console.log(res)
 let sum = add(res.x,res.y);
 worker.postMessage({
  sum : sum
 })
});

function add(x,y){
 return x+y;
}

打印代碼如下圖：