【UniApp】-uni-app-全域性資料和區域性資料

BNTang發表於2023-12-08
APP

前言

  • 好，經過上個章節的介紹完畢之後，瞭解了一下 uni-app-全域性樣式和區域性樣式
  • 那麼瞭解完了全域性樣式和區域性樣式之後，這篇文章我再來給大家介紹一下 UniApp 中全域性資料和區域性資料

搭建演示環境

建立一個全新的專案：

然後在配置一下，微信小程式的 AppId，直接去之前的專案中複製一下即可，找到之前專案的 manifest.json 檔案，然後選擇微信小程式配置，複製一下即可：

  • 經過如上的這麼一頓操作之後，就可以搭建完畢執行環境，與編碼環境

步入正題

全域性資料

  • 先來看一下全域性資料，全域性資料在微信小程式中怎麼搞？在微信小資料中是不是有個 globalData
  • 那麼在 UniApp 當中也有 globalData，回到官方文件，然後找到 全域性檔案
  • 在全域性檔案中找到 App.vue/uvue
  • 點選 App.vue/uvue 就可以發現這裡有 globalData

官方介紹：

  • 小程式有 globalData，這是一種簡單的全域性變數機制。這套機制在uni-app裡也可以使用，並且全端通用
  • 當然vue框架的全域性變數，另有其他方式定義
  • 好了看完之後我們來驗證一下，官方說明了 globalData 是定義在 App.vue 中，所以我們也需要這麼來寫

定義全域性資料

  • 開啟新建立好的專案然後，找到 App.vue 檔案

  • 我定義了兩個屬性分別是 name, age
globalData: {  
    name: 'BNTang',
    age: 18
}

獲取全域性資料

  • 我們定好了資料，是不是要進行使用
  • 使用方式在官方也是有介紹的，官方是這麼說的：js 中操作 globalData 的方式透過 getApp().globalData.text = 'test'

首頁

  • 我們在首頁輸出列印一下全域性的資料就相當於使用了好吧，更改 index.vue
onLoad() {
	console.log("全域性資料: ", JSON.stringify(getApp().globalData));
}

測試

Web端

  • 在官方文件中，提到了 並且全端通用，所以我這裡還需要在執行在微信小程式上看看效果

微信小程式

總結

  • 使用全域性資料，只需要在 App.vue 當中透過 globalData 來儲存資料
  • 然後在其他頁面當中透過 getApp().globalData 來獲取儲存的全域性資料

這裡大家可以看到我的文章目錄中沒有體現區域性資料，區域性資料其實是和 vue 一樣，在自己頁面的 data 中返回一個物件，然後在這個物件中定義的屬性就是區域性資料，沒什麼好說的所以我這裡就沒有單獨起一個 title 來進行介紹。

最後

大家好我是 BNTang, 一個熱愛分享的技術的開發者，如果大家覺得我的文章對你有幫助的話，可以關注我的公眾號 JavaBoyL，我會在公眾號中分享一些IT技術和一些個人的見解，謝謝大家的支援

相關文章