浅谈小程序生命周期

马上要做小程序的开发啦,看了一波文档,总结一下。

小程序开发框架
小程序的框架分为视图层和逻辑层。逻辑层由js 编写,视图层由WXML和WXSS编写。WXML 用来描述页面结构,相当于HTML;WXSS用来用来描述页面样式,相当于CSS。

小程序启动后,每个页面的数据放在data(这个data是在页面的js文件里)里面,初始化页面, 当用户触发页面的事件,逻辑层接受页面的事件反馈,通过setData发送新数据到视图层(异步),页面更新,同时改变对应的this.data的值(同步)。小程序里面的setData可以理解成React的setState,setData会更新当前页面的data,不可以直接修改this.data 。

生命周期
这里所说的生命周期包含小程序本身的生命周期和页面的生命周期。

小程序启动后,首先完成小程序的初始化(onLaunch)和显示(onShow),然后是页面的加载(onLoad)、显示(onShow)和渲染(onReady)。如图12345。

小程序进入后台时,先触发页面的生命周期函数onHide,再触发小程序的生命周期函数onHide;小程序启动显示或从后台进入前台时,先触发小程序的生命周期函数Onshow,再触发页面的生命周期函数onShow。

这里解释两个概念:

后台: 当用户点击左上角关闭(或者右上角退出),或者按了home键离开微信,小程序并没有直接销毁,而是进入了后台。

前台: 当再次进入微信或者再次打开小程序,又会从后台进入前台。

只有当小程序进入后台一定时间(目前是5分钟),或者系统资源占用过高,才会被真正的销毁。

页面栈

框架以栈的形式维护了当前的所有页面,当路由发生变化时:

路由方式 页面栈表现 路由前页面 路由后页面
初始化 新页面入栈

onLoad,onShow
打开新页面 wx.navigateTo 新页面入栈 onHide
onLoad, onShow

页面重定向 wx.redirectTo 当前页出栈,新页面入栈
onUnload

onLoad,onShow

页面返回 wx.navigateBack 页面不断出栈,直到目标返回页
onUnload

onShow

Tab切换 wx.switchTab

页面全部出栈,只留下新的Tab页面

重启动 wx.reLaunch 页面全部出栈,只留下新的页面 onUnload
onLoad,onShow

理解页面栈的概念可以知道页面什么时候隐藏什么时候是销毁。

用页面实例来说页面的生命周期

初始化:视图线程开始初始化,初始化完成发送通知到逻辑线程,视图线程开始等待数据,(逻辑线程初始化完成后等待视图线程的通知,)逻辑线程返回页面初始数据,逻辑线程进入等待激活状态。
首次渲染:视图线程拿到初始化渲染数据后,开始首次渲染,渲染完成后(视图层进入持续渲染状态)发送 【初始化完成通知】给逻辑线程,触发生命周期函数onReady,逻辑线程进入激活态。
持续渲染状态: 用户交互触发事件,逻辑线程处理,通过this.setData更新数据到渲染线程,数据更新,渲染线程局部更新页面。
前台->后台: 用户关闭小程序或home键退出微信,逻辑线程触发生命周期函数onHide进入后台态。
后台->前台:用户再次打开微信或小程序,逻辑线程触发生命周期函数onShow进入激活态。
销毁:页面或小程序被系统回收或销毁时,逻辑线程触发生命周期函数onUnload,结束。
小程序开发之插件推荐:
Easy LESS  //可以直接把less文件转成wxss 文件     
    如何使用:在编写的less文件文件头加一句注释: //out: index.wxss  ,当你修改完less文件时,保存,就会生成一个index.wxss文件。

minapp   //小程序的标签、属性智能补全
wechat-shippet //代码片段模板 json、js、wxml片段。
css转wxss:
wxss写样式,无法写嵌套。以我们本身的开发喜欢,我们会写less或css文件,再把它转成wxss。

Easy LESS //缺点:依赖于vscode编辑器,而且需要在less文件前加一句 //out: index.wxss
wxss-cli  小程序中将less编译成wxss   //star数太少,不推荐
gulp  //使用gulp来转
刚刚看完文档,目前还没有真正的上手小程序的开发,如有错误恳请指正。

原文地址:https://www.cnblogs.com/lanshu/p/11814061.html

时间: 2024-08-10 00:47:37

浅谈小程序生命周期的相关文章

小程序生命周期与小程序组件生命周期

小程序注册完成后,加载页面,触发onLoad方法. 页面载入后触发onShow方法,显示页面. 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次. 当小程序后台运行或跳转到其他页面时,触发onHide方法. 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload 小程序组件的生命周期,内容大致如下: created

微信小程序生命周期

微信小程序 生命周期 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的角度来看,生命周期指程序从创建.到开始.暂停.唤起.停止.卸载的过程. 下面从一下三个方面介绍微信小程序的生命周期: 应用生命周期 页面生命周期 应用生命周期影响页面生命周期 >>>应用生命周期 用户首次打开小程序,触发 onLaunch(全局只触发一次). 小程序初始化完成后,触发onShow方法,监听小程序显示. 小程序从前台进入后台,触发 onHide方法. 小程序从后台进入前台显示,触发 onShow方法

浅谈Vue的生命周期模型

Vue实例从创建到销毁的过程,就是生命周期.Vue的生命周期包括:开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些javascript方法中的this直接指向的是vue的实例. 在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会. Vue提供的生命周期钩子如下:① beforeCreate在实例初始化之后,数据观测(da

小程序生命周期(onLaunch、onShow、onHide、onReady、onLoad、onUnloa)

(1)onlaunch:当小程序初始化完成时,会触发 onLaunch(全局只触发一次)(app.js):(2)onLoad: 页面加载小程序注册完成后,加载页面,触发onLoad方法.一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数(页面js).(3)onShow: 页面显示页面载入后触发onShow方法,显示页面.每次打开页面都会调用一次(比如当小程序有后台进入到前台运行或重新进入页面时).(4)onReady: 首次显示页面,页面初次渲染完成,会触发

浅谈小程序

1.小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等2.pages用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息.文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理3.购物车首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(price),数量(num),是否选中(s

小程序生命周期

在app.js加入下面数据显示的效果 onShow: function() { console.log("onshow showshowshowshowshowshowshowshowshow ") }, onHide: function() { console.log("onHide HideHideHideHideHideHide") }, onLaunch: function () { console.log("onLaunchonLaunchonL

ASP.NET应用程序生命周期趣谈(三) HttpModule

在之前的文章中,我们提到过P_Module(HttpModule)这个能干的程序员哥们儿,它通过在项目经理HttpApplication那里得到的授权,插手整个应用程序级别的事件处理.所有的HttpModule都要实现IHttpModule接口,那么我们看IHttpModule的定义: namespace System.Web { public interface IHttpModule { void Dispose(); void Init(HttpApplication context);

【菜鸟学php】小菜鸟由帝国备份王在Wamp环境下打开500错误浅谈PHP程序员

===================问题情况描述=================== 小弟一直在玩discuz论坛开源程序,这个论坛程序经常涉及到论坛搬家的问题. 今天我在本地Wamp环境下,用开源软件帝国备份王2010进行数据库备份数据,结果打开发现报错500! 这真是坑爹了,回想下以前自己使用这个开源程序进行备份也不下于十几次了,大部分都正常成功, 但也不乏出现这种情况的,小弟之前一般遇到这种问题, 都是直接忽略,换其他办法来进行备份,但是用惯了帝国备份王,换其他的方法备份数据,总感觉难

ASP.NET应用程序生命周期趣谈(一)

这几天一直在看ASP.NET应用程序生命周期,真是太难了,我理解起来费了劲了,但偏偏它又是那么重要,所以我希望能给大家带来一篇容易理解又好用的文章来帮助学习ASP.NET应用程序生命周期.这篇就是了. 当你访问博客园想看我的这篇文章的时候,这个请求就被博客园的WEB SERVER(IIS)接收到了.博客园IIS看了一眼我的请求,“噢,是.aspx啊,给ASP.NET去处理吧,就把我这个请求给了ASP.NET,并且说:“这个你来处理,你处理完了之后把HTML给我,我好给邱爽一个回复”. ASP.N