【微信小程序开发?系列文章六】生命周期和路由

这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出。

整个微信小程序从打开到关闭,整个过程可以分为很多阶段或者说状态,这一整段的过程,我们称之为小程序的生命周期。而周期中的每种不同的状态,到另一个状态的过度和转化,是需要一个触发机制的,这种机制我们称之为路由。

一、生命周期

先来分析一下小程序官网给的这张图,它指的是Page的整个生命周期。要理解它,我们还是先回顾一下React.js的渲染机制。

react里面有一个virtual DOM的概念,它实际上是把界面中的每个元素,用js实现的树形数据结构对应起来,结构里记录了节点的所有信息。我们可以把这个virtual DOM看成一个独立的线程(js里没有真正的多线程),我们暂时称它为view线程,它的工作就是负责界面的渲染。当virtual DOM上的数据发生变化的时候,界面的相应的部分就会跟着更新,更新机制被称为DOM diff,这里有篇文章详细地分析了这种更新机制:http://calendar.perfplanet.com/2013/diff/,不过可惜的是它要FQ才能看,后面发现segmentfault上有人把它转成中文描述了:https://segmentfault.com/a/1190000000606216,有兴趣的读者可以阅读一下这篇文章。

这里简单地介绍下:React.createClass创建的类都有一个render方法,它返回的不是真正的html代码,而是我们上面讲到的virtual DOM,每一次渲染会直接按内部转换关系画到界面上,这个流程跟传统的网页渲染差不多。但是当要修改界面上某些元素的时候,react的性能才会真正的突显出来,它会去调用setState方法,这时有内置的算法会去比对这次操作引起的变化前后,最小的差异是什么,然后把这个最小的差异更新到界面上。DOM diff的这篇文章讲到,传统的两个树形结构要分析出差异,复杂度至少要O(n^3),但react巧妙地把这个复杂度做到了接近O(n),优化了非常多,这也是它的核心算法。
这整个东东,就是我们上面讲到的“view线程”,它负责拿到数据后去做界面的更新,不过这个“线程”不处理主业务逻辑,只负责view层,用react的时候,它的内部框架已经帮我们做好了,所以react被称为是一个view层的框架。

那么我们还需要一个“线程”来处理主逻辑,这些就是我们自己要写的主要的代码。微信小程序跟react一样,也帮我们做好了这种渲染的算法。上图中,左侧绿色的部分,可以理解为上文中的“view线程”,应用启动时,他会用Page里的data初始值去Init出一个初始的virtual DOM,当setData被调用的时候,MINA就会触发我们上面讨论的DOM diff的过程,自动去更新界面。这也是为什么我们直接修改data无效的原因,一定要调用setData界面才会有变化。
上图右侧的“AppService线程”,其实就是我们说的主业务逻辑“线程”,我们就是跟它打交道。

下面简述一下整个生命周期的过程:
“view线程”和“AppService线程”在Page({… })被执行时差不多同时启动(实际上,个人理解,后者应该要先一步启动,因为它要接收notify,纯属猜测)。前者init结束时,发送一个notify到后者。后者在create完成后,会同时触发Onload和Onshow回调(至于为什么要同时触发两个看起来差不多的状态,在下方会分析到),在这两个函数里面对page的data做一些修改(setData),然后挂起进入等待状态,等“view线程”init完,才会进行下面的流程,因为对用户来说这个应用的直接使用方式就是界面,背后逻辑用户不管,所以一定要等“view线程”准备好后,再做下面的事情才有意义。
如果Onload和Onshow有对data做修改,收到notify通知前也不会做什么动作,直到收到通知才会把变化发送给“view线程”,之后的流程里,setData就不用等通知了,因为这个通知只是为了让“AppService线程”知道“view线程”已经准备好了,进入可用状态了,后面就可以随意setData了,“view线程”随时都会做出响应,一发现数据变化就会重新render然后做DOM diff操作,去更新界面。

而当用户进入另一个页面时(wx.nativateTo),onHide函数被触发,页面被切换到后台,可以看成是挂起状态,不会有什么动作。而当用户切换回来的时候(wx.navigateBack),onShow会被触发,但onLoad不会,onLoad只会在page初始化完成时触发一次,后面不会再进入了,所以对于只需要做一次的操作,千万不要写到onShow里面,如请求页面初始数据,要写到onLoad里。上面讲到“AppService线程”初始化的时候要同时触发onShow和onLoad,虽然字面上理解起来比较相似,但其实是不一样的过程,触发条件也是不一样的。

二、路由

路由的控制逻辑主要在WAService.js里,这个文件,当程序在运行时,调试工具里可以查看。可惜的是,这个文件是压缩过的,格式化之后,还是很难看懂主要的逻辑。不过上表微信官方给的也表述得比较明显。

大概按这表介绍下路由的几种情况。
(1)当程序打开的时候,第一个页面会被加载(第一个页面,指在app.json里的pages配置的第一项),先初始化,这时这个页面的onLoad和onShow会被调用。
(2)从第一个页面跳到其它页面(navigateTo),这时第一个页面的onHide会被调用,跳过去的其它页面onLoad和onShow会被调用。
(3)如果是redirectTo跳转,则第一个页面被触发的是onUnload,其它跟(2)一样
(4)页面返回时,前一个页面被onUnload卸掉,返回后的页面onShow被调用。从这可以看出,返回时,前一个页面被销毁了。
(5)tab的切换,就只有onShow和onHide,当然第一个出现页面还有一个onLoad。
这几个情况也比较直观。

时间: 01-04

【微信小程序开发?系列文章六】生命周期和路由的相关文章

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序: https://mp.weixin.qq.com/cgi-bin/wx 点击按钮"前往注册".注意我们需要使用一个没有注册过微信小程序或者微信公众号的邮箱.我用的是网易邮箱.注册之后,邮箱会收到一封激活邮件. 激活之后,就可以进入小程序主体信息登记页面了.这里需要使用×××号码和手机验

微信小程序开发优秀教程及文章合集第一期

我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列:微信小程序开发手记<一>:项目的代码结构微信小程序开发手记<二>:属性display微信小程序开发手记<三>:backgroud和border属性微信小程序开发手记<四>:视图容器微信小程序开发手记<五>:组件微信小程序开发手记<六>:API 艺龙系列:精品!艺龙小程序:开发项目遇到的问题以及解决方案:http://www.wxapp-unio

微信小程序之微信登陆 —— 微信小程序教程系列(20)

简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自家的后台中而已. 新建一个Hello World项目,找到app.js文件打开,代码如下: app.js: App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

微信小程序开发备忘

前言 从去年一月份微信宣告要做小程序时的圈子里已经有了局部躁动,去年九月内测时,更是全民热捧,似乎张晓龙和他的微信已经准备好再一次改变世界.还好微信比它的粉丝们要理智的多,不做分发,不搞渠道,不发"红利",所以,昨天正式发布时,也并没有想象中的所有人一起迎接新世界到来的景象.OSC上有人发帖问"微信小程序就要发布了,大家激动吗",底下居然都已经有人开喷了.. 但是,话说回来,从技术角度看,微信为我们提供了基于微信本身的新应用场景下的新技术,那么作为一个开发者,对他有

资讯 | 2018年1月15日微信公开课解读!微信小程序开发资源

引言:2018年1月15日 微信公开课PRO开课了,本次课时内容将涉及:小程序.智慧零售.企业微信.小游戏  (附学习参考资料) 为了快速理解「2018 微信公开课 PRO 版」上张小龙的一小时演讲内容,结合下午微信公开课课室A_B_C的课时安排,这里为大家提前整理了相应的小程序学习参考资料: 微信公开课pro_A课室(14:00-17:50) 主题:小程序产品能力.开发.应用及规则 一.如何开发一个优秀的微信小程序/小游戏 微信小程序官方工具  https://mp.weixin.qq.com

微信小程序开发之普通链接二维码

本文主要介绍扫普通链接二维码打开小程序, 详情请看官方文档https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html 配置普通链接二维码规则 生成二维码 访问https://cli.im/url,将https://test.com/linkcode?id=1_2生成二维码图片 小程序接收参数 if(option.q){ console.log(option.q); var link = decodeURIComponent(opt

微信小程序开发基础(一)「配置」与「逻辑层」

微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结和阐述,包括配置.函数.语法.事件及其处理.数据绑定.模块.样式等.想开发小程序,这些内容是必须掌握的. 全文知识结构预览: 一.程序配置: 1.全局配置:2.页面配置 二.逻辑层: 1.程序注册:App()方法:2.页面注册:Page()方法:3.模块与调用:4.微信原生API 三.视图层(将在单

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,