返回
快速导航关闭
当前搜索
网站分类
栏目推荐
实用工具
热门标签
子分类:
创奇学院 >微信 >小程序 >微信小程序 » 正文

小程序模板多少钱一套,33. 教你零基础搭建小程序:页面的生命周期(1)

微信小程序 更新时间: 发布时间: 微信小程序归档 最新发布 网站地图

筒子们!!


这一章开始我们来看一下最基础也是最重点的部分—— 小程序的生命周期


小程序的生命周期分为应⽤⽣命周期和⻚⾯⽣命周期两种。

今天,我们来讲解一下小程序的⻚⾯⽣命周期。


整理了其主要属性及使用说明,如下表格:




我们一一来介绍一下哈。




(一)data


这不是一个页面, 这里指对象,是我们页面中常用的初始数据。


这里不多介绍了。


(二)onLoad


这属于⽣命周期回调,用来监听⻚⾯加载。


这个功能类似于onlaunch的使用场景。


应用场景是:通过在onLoad 中发送异步请求来初始化页面数据。


具体步骤如下:


1、新建一个页面demo18


2、打开demo18.js 文件,可发现页面中已存在onload函数,


3、在onload函数中进行打印,写入如下代码:


onLoad: function (options) {console,log("onload")
},


4、保存,打开调试器,发现console 中出现 onload




(三)onshow


这属于⽣命周期回调函数,用来监听⻚⾯显⽰。


我们还在demo18.js 文件中演示,步骤如下:


1、在文件中找到原先存在的oshow函数,打印 onshow ,代码如下:


onShow: function () {console,log("ononShow")
},


2、保存,打开调试器,发现console 中出现 onload 、onshow。


并且是先触发 onload,再触发onshow




(四)onReady


这是一枚⽣命周期回调函数,用来监听⻚⾯初次渲染完成的情况。


具体步骤如(三)onshow


但是,

触发的顺序为onload-onshow-onReady


(五)onHide


这是一枚⽣命周期回调函数,用来监听⻚⾯隐藏的情况。


具体步骤同(三)(四),保存后,控制台出现onHide


在整个小程序隐藏时,页面也会隐藏。


并且,在当前页面中直接跳转页面,也就相当于将此页面隐藏。


啥意思呢?


这里,我们可以做一个测试来:


1、打开demo18.wxml文件,加入导航标签,代码如下:


<navigator url="pages/demo17/demo17" open-type="navigate">
demo17
</navigator>


2、保存,小程序页面如下:



3、点击页面demo17,会发生跳转。跳转后,会发现console中出现onHide




(六)onUnload


这是一枚⽣命周期回调函数,用来监听⻚⾯卸载的情况。


这个函数只有页面卸载的时候才会触发,这里也可以通过点击超链接来操作。


但是还要增加一个步骤,使用navigator 属性中 open-type 的属性值—— redirect ,


作用就是关闭当前页面,就相当于卸载页面了。


步骤如下:


1、在demo18.js 文件,原先存在的onUnload函数中,打印这一函数,代码:


onUnload: function () {console,log("onUnload")
},


2、在demo18.wxml 文件中,加入redirect ,代码如下:


<navigator url="pages/demo17/demo17" open-type="redirect ">
demo17 redirect
</navigator>


3、保存,点击页面demo17 redirect ,就会触发onUnload





所以,这里使用redirect 关闭当前页面,就是指卸载该页面。


本章先找前六个函数,剩下的六个,我们下一章再见。



转载请注明:文章转载自 http://www.320g.com/
本文地址:http://www.320g.com/wxxcx/25848.html
考高分网交流群

扫一扫加入QQ交流群

和更多志同道合朋友一起交流,分享干货资料!
创奇学院客服

扫一扫加客服微信

有疑问请咨询创奇学院微信号,在线为您解答!
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 Copyright 320g.com Rights Reserved. Powered · 创奇学院

ICP备案号:陇ICP备2020003353号