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

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 )  // 全域性引數

相關文章