微信小程序實戰教程——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>
複製代碼

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