運行環境判斷以及平臺判斷

1. 前言

在日常開發過程中，一般測試服務器和生產服務器是分開的，測試服務器和生產服務器之間的項目配置數據是不同的，每次切換運行環境還要修改這些配置數據非常麻煩，并且不利于我們后期對項目的維護，萬一上線時某個數據忘記改了，整個項目不就歇菜了嘛。

那這個時候能判斷當前環境是開發環境還是生產環境就很重要了，可以自動幫助我們完成測試服務器和生產服務器之間的動態切換。

另外因為一些平臺的差異性，我們也需要對當前的平臺進行判斷，用來應對這些平臺的差異。

比如 uni-app 可以打包成原生 app、H5 頁面、小程序等項目，并運行在相應的平臺上面，但是各個平臺之間也是有區別的，比如微信小程序自帶了標題欄還有返回鍵，但是原生 app 沒有自帶標題欄和返回鍵，就需要我們自己定義。所以需要項目來自己判別當前運行在哪個平臺上面，根據平臺的特性顯示不同的頁面。

2. 判斷開發環境和生產環境

2.1 在 HBuilderX 中判斷

在用 HBuilderX 進行開發時，開發環境和運行環境不需要使用代碼判斷，點擊“運行”編譯出來的代碼是開發環境：

點擊“發行”編譯出來的代碼是生產環境：

2.2 使用代碼判斷

在 uni-app 中使用代碼來判斷開發環境還是生產環境也很簡單， uni-app 框架直接幫我們打包了一個現成的方法 process.env.NODE_ENV，我們通過這個方法可以直接來判斷當前環境是開發環境還是生產環境。
實例：

if(process.env.NODE_ENV === 'development'){
    console.log('開發環境')
}else{
    console.log('生產環境')
}

在這里我們只是打印了一下當前是開發環境還是生產環境，實際開發過程中，可以將打印語句換成相應開發環境下的配置數據，這樣切換平臺運行的時候就不用擔心配置數據出問題了。

3. 運行平臺判斷

運行平臺的判斷可以在編譯期判斷，也可以在運行期判斷。

3.1 在編譯器判斷

平臺之間的差異在講條件編譯的時候也說過，可以通過條件編譯使特定的代碼只運行在對應平臺上。

條件編譯里面的代碼，只會編譯到對應平臺的發行包里面，其他平臺發行包不會包含條件編譯的代碼。比如說下面的代碼，只會編譯到 H5 的發行包里面，其他平臺的發行包不會包含下面代碼。
實例：

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

3.2 在運行期判斷

運行期判斷是指代碼已經編譯到發行包里面，所以我們還是需要來判斷當前是在哪個平臺上面運行。這個時候可以使用 uni.getSystemInfoSync().platform 方法來判斷當前的平臺是Android，iOS還是小程序開發工具。

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

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

3.3 自定義平臺

如果我們還有其他的開發需求，比如微信服務號開發，uni-app 中沒有對應的平臺，我們就可以自定義一個，在 package.json 文件中增加 uni-app 擴展節點。
實例：

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

Tips：

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

使用自定義平臺
實例：

// #ifdef WX-PLATFORM
  console.log("微信服務號平臺特有代碼")
// #endif

4. 小結

本節課程我們主要學習了運行環境判斷和當前運行平臺的判斷，分別調用 process.env.NODE_ENV、uni.getSystemInfoSync().platform 來進行判斷。本節課程的重點如下：

• 掌握在使用 HBuilderX 開發、cli開發應該如何判斷當前環境是開發環境還是生產環境；
• 掌握兩種平臺判斷：編譯期判斷、運行期判斷；
• 了解自定義平臺，以及如何使用自定義平臺。