微信小程序基础教程之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 相关文章推荐
jQuery遍历Form示例代码
Sep 03 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
JavaScript实现打砖块游戏
Feb 25 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
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
车辆安全检查制度
2014/01/12 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
求职意向书范本
2015/05/11 职场文书
2015年手术室工作总结
2015/05/11 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL