微信小程式的全域性彈窗以及全域性例項

fanction發表於2023-02-23

全域性元件

微信小程式元件關係中,父元件使用子元件需要在父元件index.json中引入子元件,然後在父元件頁面中使用,這種元件的對應狀態是一對一的,一個元件對應一個頁面。如果有一個全域性彈窗(登入),那麼每個頁面引入一次元件會非常麻煩,這裡就需要封裝全域性彈窗,在頁面直接引入使用即可。

微信小程式提供全域性元件,只需要在app.json中引入元件,該元件就會被註冊為全域性元件,父元件的json檔案不需要引入元件即可使用。
在這裡插入圖片描述

  "usingComponents": {
    "whatStore": "/components/whatStore/index"
  },

usingComponents中註冊的元件就是全域性元件,在小程式的任意頁面都可以引入並使用元件
在這裡插入圖片描述
直接將元件寫入頁面即可,元件的使用方法和普通元件一致。


全域性例項

App(Object object)
在這裡插入圖片描述

App()必須在app.js中呼叫,必須呼叫並且全域性只能呼叫一次,在App()中有應用的的生命週期。全域性函式可以寫在App()中,透過getApp()獲取App()上掛載的方法。
在這裡插入圖片描述

// 頁面上使用
let app = getApp()
console.log(app.sayHi());  // 全域性函式

在這裡插入圖片描述
可以在App()上掛載登入方法,當使用者token過期或者未登入時,透過全域性函式配合全域性彈窗來發起登入,也可以只呼叫全域性函式預設重新整理token


getApp()
在這裡插入圖片描述

getApp()上定義的引數為全域性引數,都可以在小程式任意頁面直接使用,建議將引數新增到globalData上。

// A頁面
let app = getApp()
app.globalData.params = '全域性引數'

// B頁面
let app = getApp()
console.log(app.globalData.params )  // 全域性引數

相關文章