遊戲陪玩原始碼開發中,頁面跳轉方式及生命週期分析

雲豹科技程式設計師發表於2021-12-13

遊戲陪玩原始碼開發中,頁面跳轉的方式

navigate

uni.navigateTo({
    url:"test?id=1&name=uniapp"})

保留當前頁面,跳轉到遊戲陪玩原始碼內的某個頁面

redirect

uni.redirectTo({
    url:"test?id=1&name=uniapp"})

關閉當前頁面,跳轉到遊戲陪玩原始碼內的某個頁面

switchTab

uni.switchTab({
    url:"test?id=1&name=uniapp"})

跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面

reLaunch

uni.reLaunch({
    url:"test?id=1&name=uniapp"})

關閉所有頁面,開啟到遊戲陪玩原始碼內的某個頁面

navigateBack

uni.navigateBack({
    url:"test?id=1&name=uniapp"})

關閉當前頁面,返回上一頁面或多級頁面

遊戲陪玩原始碼開發中,頁面的生命週期

  onLoad() {
     console.log('頁面載入')
    },
    onShow() {
        console.log('頁面顯示')
    },
    onReady(){
         console.log('頁面初次顯示')
     },
     onHide() {
         console.log('頁面隱藏')
     },
     onUnload() {
         console.log('頁面解除安裝')
     },
     onBackPress(){
        console.log('頁面返回...')
     },
    onShareAppMessage() {
         console.log('分享')
     },
     onReachBottom() {
         console.log('下拉載入...')
     },
     onPageScroll(){
         console.log('頁面滾動...')
     },
    onPullDownRefresh() {
         console.log('上拉重新整理...')
        uni.stopPullDownRefresh();
    },

1、遊戲陪玩原始碼頁面的載入過程是 : 載入-顯示-載入完成-頁面隱藏-頁面解除安裝
2、頁面生命週期的出發過程 : onLoad:監聽頁面載入 --> onShow:監聽頁面顯示 --> onReady:監聽頁面初次渲染完成 --> onHide:監聽頁面隱藏 --> onUnload:監聽頁面解除安裝
3、onLoad跟onLoadonShow的區別
(1)onShow: 監聽頁面顯示。遊戲陪玩原始碼開發中頁面每次出現在螢幕上都觸發,包括從下級頁面點返回露出當前頁面
例如:頁面b:通過快取跳轉到頁面a
頁面B:快取一個變數newMember uni.setStorageSync(‘newMember’, this.newMember)
頁面A可以接受這個引數變數:onShow() { let str = uni.getStorageSync(‘newMember’) },
(2) onLoad:只載入一次,監聽頁面載入,其引數為上個頁面傳遞的資料,引數型別為Object(用於頁面傳參)
只載入一次 所以如果b頁面不斷的修改資料 再通過 onLoad(){ uni.navigateBack({delta: 1,}) 回到A頁面 a頁面的資料不會隨之改變

總結:A頁面跳轉到B頁面後,從二級頁面B返回該頁面A時,onLoad不會再次載入,而onshow會重新載入。

4、如果從遊戲陪玩原始碼開發中一個頁面攜帶引數跳轉到另外一個頁面,在另一個頁面獲取引數的方式: onLoad(options){ console.log(options.xxx) },這些引數都掛在在options.
5、在一些資料變化較少的時候我們用onload

  • onLoad先於onShow執行
  • onLoad頁面的整個生命週期裡,只執行一次
  • onShow頁面的整個生命週期裡,可執行多次,即每次顯示都會執行
  • 獲取引數並且只請求一次的事件放在 onLoad 裡。
  • 遊戲陪玩原始碼開發中當前頁面需要時時刷資料的請求多次的事件放在 onShow 裡。

本文轉載自網路,轉載僅為分享乾貨知識,如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996194/viewspace-2847476/,如需轉載,請註明出處,否則將追究法律責任。

相關文章