小程序開發(fā)第四彈: uni-app 必備知識

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：78

生命周期

在了解組件之前 , 先來看下生命周期, 學過 vue 或者 react 同學肯定不會陌生這個概念, 簡單概括就是小程序從創(chuàng)建到銷毀的階段所經(jīng)歷的鉤子函數(shù) ;

小程序的生命周期分為三種 , 「應用生命周期」 「頁面生命周期」 「組件生命周期」

復雜的咱先不說 , 遇到情況直接翻文檔 ; 說說簡單的先

應用生命周期

值得注意的是應用的生命周期只在App.vue 中能夠有效使用 ; 其他頁面無效

<script>
export default {
 name: 'App',
 onLaunch() { // 全局只會觸發(fā)一次
  console.log('App - 初始化完成時調(diào)用');
 },
 onShow() {
  console.log('App - 頁面啟動時, 或者應用后臺進入前臺時調(diào)用')
 },
 onHide() {
  console.log('App - 頁面從前臺進入后臺時調(diào)用')
 }
}
</script>
復制代碼

可以看出觸發(fā)了 onLaunch onShow 但是沒有觸發(fā) onHide 大家可以根據(jù)圖中標注的紅色位置, 手動觸發(fā) onHide 鉤子 ;

頁面生命周期

對應你工程下的 pages 中的每一個頁面的鉤子, 這個鉤子還是比較多的, 暫時也只看幾個常用的, 個人認為學習先入門, 做項目的時候再摳摳細節(jié) , 畢竟不可能一個演示功能把所有的細節(jié)都帶上 ;

onLoad : 監(jiān)聽頁面加載 ; 可以傳遞參數(shù) , 參數(shù)是上個頁面?zhèn)鬟f的參數(shù)
onShow : 監(jiān)聽頁面顯示 , 頁面「每次」出現(xiàn)在屏幕時都會觸發(fā)
onReady : 監(jiān)聽頁面初次渲染完成
onHide : 頁面隱藏監(jiān)聽
onUnload : 頁面監(jiān)聽卸載

這次的示例代碼有些許不同 , 首先當頁面首次加載的時候, 頁面的生命周期肯定是和我的書寫順序是一致的 , 但是他們要銷毀或者切換頁面時呢 ? 這里我大致測試了三種情況

切后臺
切入時先調(diào)用page的 onHide 在調(diào)用 app 的 onHide
切出時先調(diào)用 app 的 onShow 在調(diào)用 page 的 onShow

有緩存跳轉(zhuǎn) navigator
跳轉(zhuǎn)時進入 onHide
回退到當前頁面 onShow

沒有緩存跳轉(zhuǎn) redirect
跳轉(zhuǎn)時 onUnload
再次進入時, onLoad onShow onReady

<template>
 <view>
  <button type="default" @click="clickHandle">navigatorTo</button>
  <button type="primary" @click="clickHandle1">redirectTo</button>
 </view>
</template>

<script>
 export default {
  onLoad() {
   console.log('page - 頁面加載');
  },
  onShow() {
   console.log('page - 頁面顯示');
  },
  onReady() {
   console.log('page - 頁面初次渲染完成');
  },
  onHide() {
   console.log('page - 頁面隱藏');
  },
  onUnload() {
   console.log('page - 頁面卸載');
  },
  methods: {
   clickHandle() {
    uni.navigateTo({
     url: './new_file'
    })
   },
   clickHandle1() {
    uni.redirectTo({
     url: './new_file'
    })
   }
  }
 }
</script>
復制代碼