微信小程序实战教程——1.基础知识(3)

6 声明周期
小程序的声明周期分为整个应用的声明周期以及单个页面的声明周期,对于初学者来说这部分内容可以先跳过,它就像一幅眼镜,你自然会知道什么时候需要。

6.1 应用生命周期回调函数
在app.js中调用的App函数中,可以设置应用声明周期的回调函数

教育小程序开发

App({
onLaunch (options) {
//初始化完成后执行
},
onShow (options) {
//进入小程序后执行
},
onHide () {
//离开小程序后执行,注意不是销毁,如切换其他App时,微信处于后台中,这时调用onHide
},
onError (msg) {
//小程序出错时执行
}
});
复制代码
6.2 页面的生命周期回调函数
Page({
onLoad: function(options) {
//页面初始化后执行
},
onReady: function() {
//初次渲染结束执行
},
onShow: function() {
//进入页面执行
},
onHide: function() {
//页面隐藏/切入后台时触发,如 wx.navigateTo 或底部 tab 切换到其他页面,小程序切入后台等
},
onUnload: function() {
//页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
},
onPullDownRefresh: function() {
// Do something when pull down.监听下拉刷新事件,必须开启enablePullDownRefresh
},
onReachBottom: function() {
// Do something when page reach bottom. 监听用户上拉触底事件
},
onShareAppMessage: function () {
// return custom share data when user share.点击转发按钮
},
onPageScroll: function() {
// Do something when page scroll 页面滚动事件
},
onResize: function() {
// Do something when page resize旋转屏幕触发
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})

复制代码
6.3 组件生命周期回调函数
Component({
lifetimes: {
created:function() {
//组件实例化的时候执行,此时不能调用setData()
}
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
});
复制代码
7零碎知识点(http://www.zhaoweb.cn
7.1<image>
<image>标签中,不管图片多大,默认的图片大小宽度为300px,高度为225px,所以一定要给图片设置宽高。

7.2页面最外层元素
html页面中最外层的元素为<html>,小程序中的最外层元素为<page>,且<page>不需要自己添加啊,小程序自动添加的。

7.3开启识别转义字符
<text></text>标签中默认不能识别 <>等转移字符,设置decode属性即可识别这些转移字符。

<text>< ><text>
==>输出,不可识别转移字符
< >
<text decode="{{true}}">< ><text>
==>输出,可以识别转移字符
< >
复制代码
7.4 隐藏元素
VueJS中使用v-if控制元素是否渲染,使用v-show控制元素是否显示。微信小程序中也有对应的操作,使用wx:if控制元素是否渲染,使用属性hidden控制元素是都显示。

<!--渲染且显示(display:inline)-->
<text>Hello World<text>
<!--渲染但不显示(display:none)-->
<text hidden="{{true}}">Hello World<text>
复制代码

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章