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

2024-10-04 05:51:30

前言

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

worker的一些说明

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

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

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

步骤说明

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

步骤一：配置

在app.json中配置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使用方法就是这样了，一般来说密集计算和高延迟的代码片段我们会放入其中，其他的话在主线程直接执行就好了。

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

微信小程序的线程架构【推荐】

小程序的线程架构每个小程序包含一个描述整体程序的app实例和多个描述页面的page. 其中app由3个文件构成: app.json 公共配置文件 app.wxss 公共样式文件 app.js 主体逻辑文件 page页面最多由4个文件构成: page.jason 页面配置 page.wxml 页面结构 page.wxss 页面样式 page.js 页面主体逻辑 app.js和page.js中包含小程序在生命周期的每个阶段相应的事件. 典型的app.js代码结构如下: App({ onLaunch
微信小程序基础教程之worker线程的使用方法

前言我们知道js是单线程的,在有时候需要处理一些密集计算或者是高延迟的时候,总会出现不便.而且,现在的cpu都是多核的,单线程也无法充分发挥电脑的计算能力.正是基于这种情况,才有了worker的诞生.由于微信小程序官方的教程比较看不懂...所以本篇主要介绍一下worker在小程序中的用法. worker的一些说明本篇主要是在小程序中使用worker,因为说明部分也是和小程序相关. 1.主线程和worker线程之间是通过消息来通信的,主线程不能直接调用worker线程中的函数 2.worker
微信小程序基础教程之echart的使用

前言先看下最终实现的效果–自己做的小demo 首先到ECharts官网下载官网地址根据上面的网址下载代码把ec-canvas文件拷贝下来放到你自己的项目中, 我放的是tool文件夹下面,你们随意引入的时候注意路径就行 2.使用然后在你需要用的页面引入,在json中加入,这里要注意路径echart.json "usingComponents": { "tab":"../../component/tabs/tab", "ec-canv
微信小程序基础知识css样式media标签

微信小程序基础知识css样式media标签前言: 微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式.这样使得文档更有得于打印,如将页面宽度增宽.或屏蔽掉一些不需要打印的内容. <link href="styles/main.css"
微信小程序基础组件与导航组件详细介绍

微信小程序基础组件与导航组件详解: 1.基础组件 1.1 图标 icon 1.2 文本 text 1.3 进度条 progress 2.导航组件(navigator) 1.基础组件 1.1 图标 icon (1)总结 (2) 案例效果截图 page.wxml <view class="type-group"> <block wx:for="{{iconType}}"> <icon type="{{item}}&qu
详解mpvue开发微信小程序基础知识

一.mpvue简介 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验.mp 即 mini program 的缩写. 二.mpvue快速入门 ① 通过脚手架引入mpvue模板 vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤
微信小程序云函数添加数据到数据库的方法

1.新建小程序,建立云开发快速启动模板这里和普通小程序的区别有三点一是 project.config.json写上云函数所在目录"cloudfunctionRoot": "cloudfunctions/", 二是app.json写上"cloud":true 三是 app.js 添加,用于记录访问用户 onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础
微信小程序实现提交input信息到后台的方法示例

本文实例讲述了微信小程序实现提交input信息到后台的方法.分享给大家供大家参考,具体如下: wxml文件:  <view class="fl_form"> <text>您的姓名</text> <input type="text" placeholder='请输入您的姓名' value="{{userName}}" bindblur='userNameInput
微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind
微信小程序实现动态获取元素宽高的方法分析

本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1. obj.in(co
微信小程序页面间值传递的两种方法

一:url带参数传递与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面. index.wxml:  <view class="container">  <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>

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

相关推荐

随机推荐