微信小程序开发---应用与页面的生命周期
App
App()
App()
函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
object参数说明:
属性 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onLaunch | Function | 生命周期函数--监听小程序初始化 | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) |
onShow | Function | 生命周期函数--监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发 onShow |
onHide | Function | 生命周期函数--监听小程序隐藏 | 当小程序从前台进入后台,会触发 onHide |
其他 | Any |
开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
|
前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。
只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。
示例代码:
App({onLaunch: function() { // Do something initial when launch.},onShow: function() {// Do something when show.},onHide: function() {// Do something when hide.},globalData: 'I am global data'
})
App.prototype.getCurrentPage()
getCurrentPage()
函数用户获取当前页面的实例。
getApp()
我们提供了全局的 getApp()
函数,可以获取到小程序实例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意:
App()
必须在 app.js
中注册,且不能注册多个。
不要在定义于 App()
内的函数中调用 getApp()
,使用 this
就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage()
,此时 page 还没有生成。
通过 getApp()
获取实例之后,不要私自调用生命周期函数。
Page
Page()
函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数说明:
属性 | 类型 | 描述 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | Function | 生命周期函数--监听页面加载 |
onReady | Function | 生命周期函数--监听页面初次渲染完成 |
onShow | Function | 生命周期函数--监听页面显示 |
onHide | Function | 生命周期函数--监听页面隐藏 |
onUnload | Function | 生命周期函数--监听页面卸载 |
onPullDownRefreash | Function | 页面相关事件处理函数--监听用户下拉动作 |
其他 | Any |
开发者可以添加任意的函数或数据到 object 参数中,用 this 可以访问
|
示例代码:
//index.js
Page({data: {text: "This is page data."},onLoad: function(options) {// Do some initialize when page load.},onReady: function() {// Do something when page ready.},onShow: function() {// Do something when page show.},onHide: function() {// Do something when page hide.},onUnload: function() {// Do something when page close.},onPullDownRefresh: function() {// Do something when pull down},// Event handler.viewTap: function() {this.setData({text: 'Set some data for updating view.'})}
})
初始化数据
初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。
渲染层可以通过 WXML 对数据进行绑定。
示例代码:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({data: {text: 'init data',array: [{msg: '1'}, {msg: '2'}]}
})
生命周期函数
onLoad
: 页面加载- 一个页面只会调用一次。
- 参数可以获取
wx.navigateTo
和wx.redirectTo
及<navigator/>
中的 query。
onShow
: 页面显示- 每次打开页面都会调用一次。
onReady
: 页面初次渲染完成- 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
- 对界面的设置如
wx.setNavigationBarTitle
请在onReady
之后设置。详见生命周期
onHide
: 页面隐藏- 当
navigateTo
或底部tab
切换时调用。
- 当
onUnload
: 页面卸载- 当
redirectTo
或navigateBack
的时候调用。
- 当
页面相关事件处理函数
onPullDownRefresh
: 下拉刷新- 监听用户下拉刷新事件。
- 需要在
config
的window
选项中开启enablePullDownRefresh
。 - 当处理完数据刷新后,
wx.stopPullDownRefresh
可以停止当前页面的下拉刷新。
事件处理函数
除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。
示例代码:
<view bindtap="viewTap"> click me </view>
Page({viewTap: function() {console.log('view tap')}
})
Page.prototype.setData()
setData
函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data
的值。
注意:
- 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
- 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
setData() 参数格式
接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message
,a.b.c.d
,并且不需要在 this.data 中预先定义。
示例代码:
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({data: {text: 'init data',array: [{text: 'init data'}],object: {text: 'init data'}},changeText: function() {// this.data.text = 'changed data' // bad, it can not workthis.setData({text: 'changed data'})},changeItemInArray: function() {// you can use this way to modify a danamic data paththis.setData({'array[0].text':'changed data'})},changeItemInObject: function(){this.setData({'object.text': 'changed data'});},addNewField: function() {this.setData({'newField.text': 'new data'})}
})
以下内容你不需要立马完全弄明白,不过以后它会有帮助。
生命周期
下图说明了 Page 实例的生命周期。
页面的路由
在小程序中所有页面的路由全部由框架进行管理,对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由后页面 | 路由前页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad,onShow | |
打开新页面 |
调用 API wx.navigateTo 或使用组件<navigator />
|
onLoad,onShow | onHide |
页面重定向 |
调用 API wx.redirectTo 或使用组件<navigator />
|
onLoad,onShow | onUnload |
页面返回 |
调用 API wx.navigateBack 或用户按左上角返回按钮
|
onShow | onUnload |
Tab切换 | 多 Tab 模式下用户切换 Tab | 第一次打开 onLoad,onshow;否则 onShow | onHide |
微信小程序开发---应用与页面的生命周期相关推荐
- 微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
- 微信小程序开发笔记—设置页面密码
文章目录 一.功能概述 二.实现效果 三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
- 小程序初始化服务器数据,微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页...
步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...
- 微信小程序把玩(四)应用生命周期
为什么80%的码农都做不了架构师?>>> App() 函数用来注册一个小程序,注意必须在 app.js 中注册,且不能注册多个. 使用方式也跟Android中的Applicat ...
- 微信小程序开发---京东登录页面(company)
页面效果 代码 company.wxml <form bindsubmit="formSubmit" bindreset="formReset">& ...
- 微信小程序开发实战(页面导航)
@作者 : SYFStrive @博客首页 : HomePage
- 微信小程序开发(5)-新闻页面制作之banner
如图: 分四步: 1.在newspage.js中准备图片数据 bannerUrl:['/images/01.png','/images/02.png','/images/03.png'] //要 ...
- 【微信小程序开发•系列文章一】入门
本系统文章主要有以下几篇: <[微信小程序开发•系列文章一]入门> <[微信小程序开发•系列文章二]视图层> <[微信小程序开发•系列文章三]数据层> <[微 ...
- 微信小程序开发必备的八个插件
wechat-snippet 微信小程序代码辅助,代码片段自动完成 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wxa ...
最新文章
- 为什么要使用 Service Mesh?
- LINGO 12安装教程
- FLOAT或DOUBLE列与具有数值类型的数值进行比较 问题
- 在windows中使用scp命令将文件上传到远端服务器
- 前端封装接口弹出错误_用SpringBoot教你写出优雅的后端接口
- tomcat部署war总结
- 倒计时小插件,懒人专用
- 计算机论文英文摘要范文,毕业论文英文摘要范文三篇
- linux硬盘异响,完美解决Ubuntu Linux关机异响[SATA硬盘]
- 大疆网上测评题库_大疆在线测评 - 逻辑题
- CCNA、CCNP、H3C认证精品视频课程
- [技术讨论]网络软件开发的bug分析与公司开发管理问题之阿里篇
- 复制粘贴之后出现问号怎么办_CAD图形文字复制粘贴以后出现变化该怎么办?
- oracle 多字段条件查询,Oracle 多字段查询
- 基于Ubuntu搭建CTFd平台(全网最全)
- 嫌微信公众号排版太丑?这里让你一步到位
- 胜利学院计算机考试时间,胜利学院2019年3月全国计算机等级考试报名时间
- POJ 3842 An Industrial Spy 快筛质数+STL乱搞
- 最小生成树prim之挖井
- Verilog功能模块——取滑动平均值(使用FIFO)
热门文章
- 【裂缝检测识别】基于计算机视觉实现路面裂缝检测识别系统设计含Matlab源码
- (郁闷p2pover中)整理记录一
- 一分钟了解微信公众号服务器配置自动回复
- Thinkpad-t470电脑 Hackintosh 黑苹果efi引导文件
- 《2008年全国计算机软件水平考试官方指定教材及辅导书》(Software Qualification Study Materials)
- uniapp 中 editor的使用
- 打发无聊的100个网站
- 迅雷云加速开放平台学习笔记——说明
- 四种方法解决VMware Workstation pro 无法在Windows上运行(亲测有效)
- python调用c/c++代码以及解决ctypes.ArgumentError: argument 1: class 'TypeError': Don't know how to convert