微信小程序开发多线程处理机制worker如何配置,小程序多线程切换页面

本文小编为大家详细介绍“微信小程序开发多线程处理机制worker如何配置,小程序多线程切换页面”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序开发多线程处理机制worker如何配置,小程序多线程切换页面”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

不少从事搭建岗的技术人员都了解过多线程问题，多线程是指从系统或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程，进而提升整体处理性能。在微信小程序中也可能有线程并发执行的阶段，这时候worker可以处理开发小程序的多线程机制。

微信小程序的一些异步处理任务可放置worker中运行，原理是调用worker执行多条并行线程，待结果返回到微信小程序的主线程。当操作worker时，主线程数据被复制并通过 Worker.Message()来传输，其中 Worker.postMessage()是发送数据函数，Worker.onMessage()则是接收。

操作worker首先要配置worker信息，在app.js中声明worker放置目录，目录下的代码将被打包成一个文件：

{

workers: workers

}

接着在worker中添加文件，添加一个请求文件夹request和一个相应文件夹response。

workers/request/index.js

workers/request/utils.js

workers/response/index.js

添加后，目录结构如下：

├── app.js

├── app.json

├── project.config.json

└── workers

├── request

│   ├── index.js

│   └── utils.js

└── response

└── index.js

下一步编写 Worker 代码

在workers/request/index.js编写 Worker 响应代码

var utils = require(\'./utils\')

// 在 Worker 线程执行上下文会全局设立一个 `worker` 对象，直接调用

worker.onMeesage/postMessage 即可

worker.onMessage(function (res) {

console.log(res)

})

接着在主线程中初始化Worker

在主线程的代码 app.js 中声明 Worker

var worker = wx.createWorker(\'workers/request/index.js\') // 文件名指定 worker

的入口文件路径，绝对路径

最后主线程向Worker发出数据接收请求

worker.postMessage({

msg: \'hello worker\'

})

操作worker注意事项：

Workers 之间不支持发送消息。

Worker 的入。口文件由 wx.createWorker() 时指定，搭建者可动态指定 Worker 入口文件

Worker 内代码只能 require 指定 Worker 路径内的文件，无法引用其它路径。

Worker 最大并发数量束缚为 1 个，设立下一个前请用 Worker.terminate() 结束当前 Worker。

Worker 内不支持 wx 系列的 API。

自学微信小程序开发第五天- 页面切换相关

创建多个页面

页面间跳转

页面间传值

另一个页面跳转的方式（重定向）

点击跳转元素时的样式

导航API

研究过页面样式设计后，就是多页面的呈现了，这就需要研究下页面切换的相关内容。

创建多个页面

首先我们创建若干个页面。微信小程序的页面创建在 pages 目录下，与目录同名创建 .js/.json/.wxml/.wxss 四个文件，这就是一个新的页面了。然后在 app.json 里的 pages 数组写入创建的页面路径，就可以使用了。但是这样创建有点慢，其实只要在 app.json 里的 pages 数组写入要创建的页面路径，然后保存，则4个基本文件和目录开发工具会自动帮我们创建。

页面间跳转

在HTML里，使用 <a> 标签创建超链接，进行页面间跳转。而小程序也提供了跳转标签 <navigator> 。

<!--index.wxml-->

<navigator url="../demo1/demo1">go demo1 page</navigator>

写入了这条命令后，其实并不能进行跳转。从控制台中看到， demo1.json 文件不能是空的。所以要么把 demo1.json 文件删除，或者在内部写一个空的代码，比如 {} 。这样，点击 go demo1 page 的文本就能够跳转页面了。

光文本不好看，也可以在标签内添加图片，达到点击图片跳转的目的。

<navigator url="../demo2/demo2">

    <image style="height:40px;width:40px;" src="../../images/play.png"></image>

</navigator>

还可以点击按钮跳转

<navigator url="../demo3/demo3">

    <button type="primary">点我跳转</button>

</navigator>

页面间传值

可以进行跳转后，也需要在跳转的时候，将数据传递给下一个页面，即页面间传值。

小程序的值传递也可以使用 url 后面加 ? 带参数来传递，例：

<!--index.wxml-->

<navigator url="../demo1/demo1?name=Jack&sex=male">Jack</navigator>

<navigator url="../demo1/demo1?name=Tom&sex=female">Annie</navigator>

而获取参数则要麻烦些，在 .js 里，使用页面加载函数的参数能够获取值。

// pages/demo1/demo1.js

Page({

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad(options) {

        console.log(options)

    }

})

这样我们在控制台就能看到， options 有2个键值，就是我们传递的2个参数。

另一个页面跳转的方式（重定向）

之前的页面跳转过后，都会有个返回按钮，可以返回上一页面上。在实际使用中，可能会有些页面我们只访问一次就好，比如说明、引导页、登录页等，并不需要或禁止再次访问，则需要使用另一种页面跳转方式来访问。

<navigator url="../demo1/demo1?name=Timmy&sex=female" redirect>redirect</navigator>

这样跳转的页面就没有返回按钮了。

点击跳转元素时的样式

点击跳转元素会发现样式有改变，是因为小程序自动设置了一个点击样式。可以使用 hover-class=“className” 进行更改。如果 hover-class=“none” 则没有点击效果。

引申一下，如果想让其他元素也有点击效果，可以给元素添加 <navigator> 标签包裹，不写 url 属性，在 hover-class 属性上增加点击效果。

另外，在元素样式中，添加 cursor: pointer; 则可以让元素变得有个点击效果。

导航API

除了 <navigator> ，也可以使用代码的方式进行页面跳转，使用的就是导航API。

导航API可以使用 wx:wx.navigateTo() 和 wx:wx.redirectTo() 来进行跳转，效果和 <navigator> 标签及增加 redirect 属性效果是一样的。也可以使用 url 增加 ? 的方法传递值。

wx:wx.navigateTo({

url: '../demo3/demo3?name=123&text=456',

})

wx:wx.redirectTo({

url: '../demo3/demo3?name=123&text=456',

})

如果不是用 redirect 方式跳转的，则可以使用 navigateBack() 函数返回。此函数有个参数 delta ，指的是返回页面栈里的多少层。如参数大于页面栈里的页面总数，则跳转到首页。小程序的页面栈最多保存10层。

上文就是小编为大家整理的微信小程序开发多线程处理机制worker如何配置,小程序多线程切换页面。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。