運(yùn)行環(huán)境判斷以及平臺(tái)判斷

1. 前言

在日常開發(fā)過程中，一般測試服務(wù)器和生產(chǎn)服務(wù)器是分開的，測試服務(wù)器和生產(chǎn)服務(wù)器之間的項(xiàng)目配置數(shù)據(jù)是不同的，每次切換運(yùn)行環(huán)境還要修改這些配置數(shù)據(jù)非常麻煩，并且不利于我們后期對(duì)項(xiàng)目的維護(hù)，萬一上線時(shí)某個(gè)數(shù)據(jù)忘記改了，整個(gè)項(xiàng)目不就歇菜了嘛。

那這個(gè)時(shí)候能判斷當(dāng)前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境就很重要了，可以自動(dòng)幫助我們完成測試服務(wù)器和生產(chǎn)服務(wù)器之間的動(dòng)態(tài)切換。

另外因?yàn)橐恍┢脚_(tái)的差異性，我們也需要對(duì)當(dāng)前的平臺(tái)進(jìn)行判斷，用來應(yīng)對(duì)這些平臺(tái)的差異。

比如 uni-app 可以打包成原生 app、H5 頁面、小程序等項(xiàng)目，并運(yùn)行在相應(yīng)的平臺(tái)上面，但是各個(gè)平臺(tái)之間也是有區(qū)別的，比如微信小程序自帶了標(biāo)題欄還有返回鍵，但是原生 app 沒有自帶標(biāo)題欄和返回鍵，就需要我們自己定義。所以需要項(xiàng)目來自己判別當(dāng)前運(yùn)行在哪個(gè)平臺(tái)上面，根據(jù)平臺(tái)的特性顯示不同的頁面。

2. 判斷開發(fā)環(huán)境和生產(chǎn)環(huán)境

2.1 在 HBuilderX 中判斷

在用 HBuilderX 進(jìn)行開發(fā)時(shí)，開發(fā)環(huán)境和運(yùn)行環(huán)境不需要使用代碼判斷，點(diǎn)擊“運(yùn)行”編譯出來的代碼是開發(fā)環(huán)境：

點(diǎn)擊“發(fā)行”編譯出來的代碼是生產(chǎn)環(huán)境：

2.2 使用代碼判斷

在 uni-app 中使用代碼來判斷開發(fā)環(huán)境還是生產(chǎn)環(huán)境也很簡單， uni-app 框架直接幫我們打包了一個(gè)現(xiàn)成的方法 process.env.NODE_ENV，我們通過這個(gè)方法可以直接來判斷當(dāng)前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。
實(shí)例：

if(process.env.NODE_ENV === 'development'){
    console.log('開發(fā)環(huán)境')
}else{
    console.log('生產(chǎn)環(huán)境')
}

在這里我們只是打印了一下當(dāng)前是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，實(shí)際開發(fā)過程中，可以將打印語句換成相應(yīng)開發(fā)環(huán)境下的配置數(shù)據(jù)，這樣切換平臺(tái)運(yùn)行的時(shí)候就不用擔(dān)心配置數(shù)據(jù)出問題了。

3. 運(yùn)行平臺(tái)判斷

運(yùn)行平臺(tái)的判斷可以在編譯期判斷，也可以在運(yùn)行期判斷。

3.1 在編譯器判斷

平臺(tái)之間的差異在講條件編譯的時(shí)候也說過，可以通過條件編譯使特定的代碼只運(yùn)行在對(duì)應(yīng)平臺(tái)上。

條件編譯里面的代碼，只會(huì)編譯到對(duì)應(yīng)平臺(tái)的發(fā)行包里面，其他平臺(tái)發(fā)行包不會(huì)包含條件編譯的代碼。比如說下面的代碼，只會(huì)編譯到 H5 的發(fā)行包里面，其他平臺(tái)的發(fā)行包不會(huì)包含下面代碼。
實(shí)例：

// #ifdef H5
    console.log("只有 H5 平臺(tái)才能打印這句話")
// #endif

3.2 在運(yùn)行期判斷

運(yùn)行期判斷是指代碼已經(jīng)編譯到發(fā)行包里面，所以我們還是需要來判斷當(dāng)前是在哪個(gè)平臺(tái)上面運(yùn)行。這個(gè)時(shí)候可以使用 uni.getSystemInfoSync().platform 方法來判斷當(dāng)前的平臺(tái)是Android，iOS還是小程序開發(fā)工具。

在百度小程序開發(fā)工具、微信小程序開發(fā)工具、支付寶小程序開發(fā)工具中使用 uni.getSystemInfoSync().platform 返回值都是 devtools，所以我們只能知道當(dāng)前是小程序開發(fā)工具，不能繼續(xù)往下細(xì)分了。
實(shí)例：

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('運(yùn)行在Android平臺(tái)上面')
       break;
    case 'ios':
       console.log('運(yùn)行在iOS平臺(tái)上面')
       break;
    default:
       console.log('運(yùn)行在開發(fā)者工具上面')
       break;
}

3.3 自定義平臺(tái)

如果我們還有其他的開發(fā)需求，比如微信服務(wù)號(hào)開發(fā)，uni-app 中沒有對(duì)應(yīng)的平臺(tái)，我們就可以自定義一個(gè)，在 package.json 文件中增加 uni-app 擴(kuò)展節(jié)點(diǎn)。
實(shí)例：

    "uni-app": {
        "scripts": {
            "wx-platform": { //自定義編譯平臺(tái)配置，可通過cli方式調(diào)用
                "title":"微信服務(wù)號(hào)", // 自定義平臺(tái)名稱，在HBuilderX中會(huì)顯示在 運(yùn)行/發(fā)行 菜單中
                "env": {//環(huán)境變量
                    "UNI_PLATFORM": "mp-weixin"  //基準(zhǔn)平臺(tái)，僅限：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
                 },
                "define": { //自定義條件編譯
                    "WX-PLATFORM": true //自定義條件編譯常量，建議為大寫
                }
            }
        }    
    }

Tips：

• 通過 HBuilderX 可視化界面創(chuàng)建的項(xiàng)目一般是沒有 package.json 文件的。通過vue-cli命令行方式創(chuàng)建的項(xiàng)目默認(rèn)有 package.json 文件；
• package.json文件中不允許出現(xiàn)注釋，否則擴(kuò)展配置無效，所以我們配置時(shí)需要將所有注釋都刪掉；
• 使用自定義平臺(tái)功能，vue-cli需更新到最新版，HBuilderX需升級(jí)到 2.1.6+ 版本。

使用自定義平臺(tái)
實(shí)例：

// #ifdef WX-PLATFORM
  console.log("微信服務(wù)號(hào)平臺(tái)特有代碼")
// #endif

4. 小結(jié)

本節(jié)課程我們主要學(xué)習(xí)了運(yùn)行環(huán)境判斷和當(dāng)前運(yùn)行平臺(tái)的判斷，分別調(diào)用 process.env.NODE_ENV、uni.getSystemInfoSync().platform 來進(jìn)行判斷。本節(jié)課程的重點(diǎn)如下：

• 掌握在使用 HBuilderX 開發(fā)、cli開發(fā)應(yīng)該如何判斷當(dāng)前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境；
• 掌握兩種平臺(tái)判斷：編譯期判斷、運(yùn)行期判斷；
• 了解自定義平臺(tái)，以及如何使用自定義平臺(tái)。