微信小程序實戰教程——1.基礎知識（3）

時間 2020-05-19

標籤微信程序實戰教程基礎知識简体版

原文原文鏈接

6 聲明週期
小程序的聲明週期分爲整個應用的聲明週期以及單個頁面的聲明週期，對於初學者來講這部份內容能夠先跳過，它就像一幅眼鏡，你天然會知道何時須要。html

6.1 應用生命週期回調函數
在app.js中調用的App函數中，能夠設置應用聲明週期的回調函數web

教育小程序開發小程序

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>不須要本身添加啊，小程序自動添加的。app

7.3開啓識別轉義字符
<text></text>標籤中默認不能識別 <>等轉移字符,設置decode屬性便可識別這些轉移字符。ide

<text>< ><text>
==>輸出，不可識別轉移字符
< >
<text decode="{{true}}">< ><text>
==>輸出，能夠識別轉移字符
< >
複製代碼
7.4 隱藏元素
VueJS中使用v-if控制元素是否渲染，使用v-show控制元素是否顯示。微信小程序中也有對應的操做，使用wx:if控制元素是否渲染，使用屬性hidden控制元素是都顯示。函數

<text>Hello World<text>

<text hidden="{{true}}">Hello World<text>
複製代碼this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。