微信小程序全局變量功能與用法詳解
本文實例講述了微信小程序全局變量功能與用法。分享給大家供大家參考,具體如下:
全局變量的作用
在微信小程序開發(fā)中,會遇到一個很實際的應(yīng)用場景,就是一個變量會在多個頁面進(jìn)行使用。
例如:
1. 在微信小程序開發(fā)中使用高德地圖的微信小程序開發(fā),其中key值就需要在多個頁面使用;
2. 在微信小程序開發(fā)電商平臺時同樣,比如客服電話,就需要在多個頁面使用。
在以上兩種類似的場景中,開發(fā)者就需要使用全局變量,當(dāng)然也有開發(fā)者說不能每個page頁面都定義一個?如果客服電話改變,如果客服要求采用他的高德key,這個時候只需要修改全局,就能進(jìn)行整個小程序的修改,如果每個page一個變量,將會在修改中花費大量的時間做低效的工作。所以可以看出全局變量在這里的作用就是提高開發(fā)效率!
如何定義全局變量
方法一:用APP定義全局變量
在app.js中的
APP({})傳入對象中定義一個全局屬性globalData,作為保存全局變量的對象。
示例代碼:
聲明變量進(jìn)行引入!
// 引入高德地圖js
const amap = require('./src/js/amap-wx.js');
// 引入接口js
const urlList = require('./src/js/config.js');
// 引入wetoast插件js
const { WeToast } = require('./src/wetoast/wetoast.js');
// 全局變量高德地圖key
const key = 'c290b7e016c85e8f279b2f80018c';
// 全局變量服務(wù)電話
const phone = '400-007-859';
進(jìn)行全局變量的賦值!
App({
globalData: {//全局變量
amap: amap,
key: key,
phone: phone,
urlList: urlList.urlList
}
})
方法一全局變量的使用:
//在page頁面引入app,同時聲明變量,獲得所需要的全局變量 const app = getApp(); const urlList = app.globalData.urlList;
方法二:用引入js的方法定義全局變量
在公用js文件夾中創(chuàng)建一個保存全局變量的js文件
實例:我在公用文件夾src下的js文件夾中創(chuàng)建的三個保存全局變量的文件:base64.js、config.js、data.js

這三個文件作用:
1. base64.js保存背景圖標(biāo)轉(zhuǎn)化的base64碼
2. config.js保存request請求數(shù)據(jù)的路徑
3. data.js 保存初次開發(fā)的模擬數(shù)據(jù)
示例代碼:
let basePath = 'https://xxxxx.com';
let urlList = {
goodsListUrl: basePath + '/goodsList',
shopCartUrl: basePath + '/shopCart',
...
}
module.exports = {
urlList: urlList
}
使用方法:
// 引入接口js
const urlList = require('./src/js/config.js');
wx.request({
url: urlList.urlList.goodsListUrl,
data: {},
success: res => {}
})
總結(jié)
其實兩種方法都可以定義全局變量,那么在什么時候采用哪一種方法?我個人建議,在像高德地圖的key值這種只需要單獨定義的,可以采用方法一,方便、簡潔、不用單獨創(chuàng)建文件。在請求地址這種批量全局變量的定義時,采用方法二,有利于后期的查找和修改。兩種方法結(jié)合,更有利于開發(fā)!
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
js簡單實現(xiàn)根據(jù)身份證號碼識別性別年齡生日
根據(jù)身份證號碼識別性別年齡生日,目前就有一個這樣的需求,那么接下來為大家介紹下使用js是如何實現(xiàn)的,感興趣的朋友不要錯過2013-11-11
Javascript中定義方法的另類寫法(批量定義js對象的方法)
用了很多的Javascript框架,偶爾也會去看一下框架的源碼,經(jīng)常會看到這樣的代碼。2011-02-02
使用js對select動態(tài)添加和刪除OPTION示例代碼
動態(tài)刪除select中的所有options、某一項option以及動態(tài)添加select中的項option,在IE和FireFox都能測試成功,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08

