微信小程序基础教程之worker线程的使用方法


Posted in Javascript onJuly 15, 2019

前言

我们知道js是单线程的,在有时候需要处理一些密集计算或者是高延迟的时候,总会出现不便。而且,现在的cpu都是多核的,单线程也无法充分发挥电脑的计算能力。正是基于这种情况,才有了worker的诞生。由于微信小程序官方的教程比较看不懂...所以本篇主要介绍一下worker在小程序中的用法。

worker的一些说明

本篇主要是在小程序中使用worker,因为说明部分也是和小程序相关。

1、主线程和worker线程之间是通过消息来通信的,主线程不能直接调用worker线程中的函数

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

步骤说明

小程序中,worker用法主要分为3步(按我个人的划分),分别是:配置、主线程中创建调用和销毁、worker线程中实现。

步骤一:配置

在app.json中配置worker目录,如下图(具体需要自己一一对应目录)

微信小程序基础教程之worker线程的使用方法

步骤二:主线程中创建调用和销毁

这一步需要注意的就是,创建时填写的是绝对路径,其他基本没什么问题。例如以下代码,我们创建了worker线程,并向其发送了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线程中实现

worker中其实是默认注入了一个叫worker的对象,直接调用监听消息和发送消息即可。如以下代码:

// myworker.js
worker.onMessage(function(res){
 console.log('这是worker内部线程打印的')
 console.log(res)
 let sum = add(res.x,res.y);
 worker.postMessage({
  sum : sum
 })
});

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

打印代码如下图:

微信小程序基础教程之worker线程的使用方法

小结

worker使用方法就是这样了,一般来说密集计算和高延迟的代码片段我们会放入其中,其他的话在主线程直接执行就好了。

好的,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js浮动图片的动态效果
Jul 10 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
简单的js表单验证函数
Oct 28 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 #Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
You might like
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
仓库组长岗位职责
2014/01/29 职场文书
运动会开幕式解说词
2014/02/05 职场文书
财务担保书范文
2014/04/02 职场文书
师范生求职自荐信
2014/06/14 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技