微信小程序基础教程之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获取指定的cookie的具体实现
Feb 20 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 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快速排序原理与实现方法分析
2016/05/26 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
JS 遮照层实现代码
2010/03/31 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python socket模块方法实现详解
2019/11/05 Python
python代码如何注释
2020/06/01 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
群众路线个人整改方案
2014/10/25 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
公司介绍信范文
2015/01/31 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python