微信小程序(五)頁面生命周期詳細介紹

這里只要熟悉頁面的基本生命周期即可,業(yè)務(wù)在指定生命周期函數(shù)內(nèi)書寫。
以下是官網(wǎng)給出的生命周期函數(shù)方法和狀態(tài)圖


上面的生周期函數(shù)圖對于做Android 或者IOS的來書理解起來應(yīng)該不是難事,具體怎么掌握只有慢慢嘗試和摸索
代碼處理:
這里的代碼主需要對使用創(chuàng)建項目時index目錄下文件處理下就行,至于跳轉(zhuǎn)后的頁面用的還是logs不需要更改!下面貼下代碼注釋也比較詳細
index.wxml
<!--index.wxml-->
<view class="container">
<!--綁定點擊事件-->
<view bindtap="bindViewTap" class="userinfo">
</view>
<view class="usermotto">
<!--數(shù)據(jù)綁定-->
<text class="user-motto">{{motto}}</text>
</view>
</view>
index.wxss
/**index.wxss**/
.container {
width: 800;
height: 800;
}
.userinfo {
width: 120rpx;
height: 120rpx;
background: red;
}
index.js
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
/**
* 通過data初始化數(shù)據(jù)
*/
data: {
motto: '點擊上面View跳轉(zhuǎn)',
// userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
//通過調(diào)用API進行跳轉(zhuǎn)
wx.navigateTo({
url: '../logs/logs'
})
},
/**
* 監(jiān)聽頁面開在加載的狀態(tài)
* 頁面加載完成之后就不會在執(zhí)行
*/
onLoad: function () {
console.log('index---------onLoad()')
// //this指的就是本頁面對象
// var that = this
// //調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù)
// app.getUserInfo(function(userInfo){
// //更新數(shù)據(jù)
// that.setData({
// userInfo:userInfo
// })
// //更新本頁面
// that.update()
// })
},
/**
* 監(jiān)聽頁面顯示,
* 當(dāng)從當(dāng)前頁面調(diào)轉(zhuǎn)到另一個頁面
* 另一個頁面銷毀時會再次執(zhí)行
*/
onShow: function() {
console.log('index---------onShow()')
},
/**
* 監(jiān)聽頁面渲染完成
* 完成之后不會在執(zhí)行
*/
onReady: function() {
console.log('index---------onReaday()');
},
/**
* 監(jiān)聽頁面隱藏
* 當(dāng)前頁面調(diào)到另一個頁面時會執(zhí)行
*/
onHide: function() {
console.log('index---------onHide()')
},
/**
* 當(dāng)頁面銷毀時調(diào)用
*/
onUnload: function() {
console.log('index---------onUnload')
}
})
相關(guān)文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導(dǎo)航 progress組件 action-sheet
應(yīng)用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實例代碼
Meta開源JavaScript內(nèi)存泄漏監(jiān)測工具MemLab安裝使用
微信小程序 詳解Page中data數(shù)據(jù)操作和函數(shù)調(diào)用

