UniApp自定義條件編譯詳細使用流程為什么國內的uniapp一直沒人討論呢

本文主要介紹關于uniapp,條件編譯的知識點，對【UniApp 自定義條件編譯詳細使用流程】和【為什么國內的uniapp一直沒人討論呢】有興趣的朋友可以看下由【卡爾特斯】投稿的技術文章，希望該技術和經驗能幫到你解決你所遇的UniApp相關技術問題。愛掏網 - it200.com

一、簡介

官方自定義條件編譯文檔。愛掏網 - it200.com

舉例：開發一個 wx 小程序，但是這小程序需要支持打包多種 UI 風格，如果用 if 或者現有的條件編譯肯定是不能滿足的，這時候就需要以 wx 小程序 為 基準平臺，在擴展一個新的 子平臺 進行條件編譯，但是它還是屬于 基準平臺，只是在這個 基準平臺 上，在多了一層獨立條件編譯，專門用來打包或開發這個 UI 風格。愛掏網 - it200.com

自定義條件編譯擴展需放到 package.json 文件中，格式如下：

// 拷貝代碼后去掉注釋，不能包含注釋，放到 package.json 中即可，推薦文件底部
"uni-app": {
   
        // 擴展配置
        "scripts": {
   
                // 自定義編譯平臺配置，可通過 cli 方式調用
                "custom-platform": {
   
                        // 會顯示在 HBuilderX 中的  菜單中
                        "title": "自定義擴展名稱", 
                        // 運行到的目標瀏覽器，僅當 UNI_PLATFORM 為 h5 時有效
                        "browser": "",
                        // 環境變量
                        "env": {
   
                                // 基準平臺
                                "UNI_PLATFORM": "",
                                // ... 其他自定義環境變量
                                "MY_TEST": ""
                         },
                        // 自定義條件編譯
                        "define": {
   
                                // 自定義條件編譯常量，建議為大寫，代碼中也是以此代碼作為條件編譯
                                "CUSTOM-CONST": true
                        }
                }
        }    
}

注意：只能擴展 web 和 小程序 平臺，不能擴展 app 打包。愛掏網 - it200.com并且擴展小程序平臺時只能基于指定的 基準平臺 擴展 子平臺，不能擴展 基準平臺。愛掏網 - it200.com

UNI_PLATFORM 僅支持填寫 uni-app 默認支持的基準平臺，目前僅限如下枚舉值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq。愛掏網 - it200.com

browser 僅在 UNI_PLATFORM 為 h5 時有效，目前僅限如下枚舉值：chrome、firefox、ie、edge、safari、hbuilderx。愛掏網 - it200.com

package.json 文件中不允許出現注釋，否則擴展配置無效。愛掏網 - it200.com

vue-cli 需更新到最新版（能創建項目即可，不用糾結），HBuilderX 需升級到 2.1.6+ 版本。愛掏網 - it200.com

二、操作

按官方案例，如下是一個 自定義釘釘小程序（MP-DINGTALK）的 package.json 示例配置（拷貝代碼記得去掉注釋）：

"uni-app": {
   
        "scripts": {
   
                "mp-dingtalk": {
    
                        "title":"釘釘小程序", 
                        "env": {
    
                                "UNI_PLATFORM": "mp-alipay" 
                        },
                        "define": {
    
                                "MP-DINGTALK": true 
                        }
                }
        }
}

也可以將上面 自定義釘釘小程序（MP-DINGTALK）理解為：在 支付寶小程序 基礎上，增加了一個新 UI 模板，到時候只需要條件編譯運行或打包就能得到一個 支付寶小程序，并且還是 釘釘小程序 風格的小程序，或者其他風格的小程序，可以自行更具情況添加。愛掏網 - it200.com

在項目文件中使用

// #ifdef MP
console.log('小程序平臺通用代碼（含釘釘）')
// #endif
// #ifdef MP-ALIPAY
console.log('支付寶平臺通用代碼（含釘釘）')
// #endif
// #ifdef MP-DINGTALK
console.log('釘釘平臺特有代碼')
// #endif

(二選一即可)使用 命令行 運行或發布項目

# 運行項目
$ npm run dev:custom mp-dingtalk

# 發布項目
$ npm run build:custom mp-dingtalk

(二選一即可)也可以使用 HBuilderX 運行或發布項目

編譯完成后，會得到對應平臺的代碼包，使用對應平臺的開發工具運行即可，當前自定義編譯的 釘釘小程序 是以 支付寶小程序 為基準的，其實打包出來就是一個 支付寶小程序，所以用哪個開發工具就不用說了。愛掏網 - it200.com

自定義編譯到這就完了！其他的案例在 官方自定義條件編譯文檔 中還有，只要理解意思后都一樣。愛掏網 - it200.com

本文《UniApp 自定義條件編譯詳細使用流程》版權歸卡爾特斯所有，引用UniApp 自定義條件編譯詳細使用流程需遵循CC 4.0 BY-SA版權協議。愛掏網 - it200.com