背景

最近有個uniapp小程序產品，產品需要根據不同地區有不同的定制化需求，這邊用到的是uniapp的自定義條件編譯，實現一套前端代碼，可以經過編譯生成不同的定制化產品，并且不會因為是兼容了多個產品，而在線上產生冗余代碼。

uniapp從2019年8月就已經支持自定義條件編譯，如果不自定義，uni-app默認支持如下枚舉值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq，我們可以通過在package.json文件中增加uni-app擴展節點（開發中需要去掉注釋），可實現自定義條件編譯平臺（如釘釘小程序、微信服務號等平臺）

package.json配置擴展節點

// package.json文件中不允許出現注釋，否則擴展配置無效 {/**package.json其它原有配置*/"uni-app": {// 擴展配置"scripts": {"shequ-platform": {//自定義編譯平臺配置，可通過cli方式調用"title":"智慧社區",// 在HBuilderX中會顯示在 運行/發行 菜單中"BROWSER":"", //運行到的目標瀏覽器，BROWSER 僅在UNI_PLATFORM為h5時有效,目前僅限如下枚舉值：Chrome、Firefox、IE、Edge、Safari、HBuilderX"env": {//環境變量"UNI_PLATFORM": "mp-weixin"//基準平臺，UNI_PLATFORM僅支持如下值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq},"define": {//自定義條件編譯"SHEQU-PLATFORM": true//自定義條件編譯常量，建議為大寫}},"nxdw-platform": {"title":"寧夏黨委大院","BROWSER":"","env": {"UNI_PLATFORM": "mp-weixin"},"define": {"NXDW-PLATFORM": true}},"nxsz-platform": {"title":"寧夏數字大院","BROWSER":"","env": {"UNI_PLATFORM": "mp-weixin"},"define": {"NXSZ-PLATFORM": true}}} } }

配置完成后編輯器運行，發行出現如下內容

代碼應用

基本語法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

html

<!-- #ifdef SHEQU-PLATFORM --><text class="test" @click="testHandle">社區</text><image src="../../static/shequ-platform/weixin.png"></image> <!-- #endif --> <!-- #ifdef NXDW-PLATFORM --><text class="test" @click="testHandle">寧夏黨委大院</text><image src="../../static/nxdw-platform/weixin.png"></image> <!-- #endif --> <!-- #ifdef NXSZ-PLATFORM --><text class="test" @click="testHandle">寧夏數字大院</text> <!-- #endif -->

css

.test {/* #ifdef SHEQU-PLATFORM */color: #000000;/* #endif *//* #ifdef NXDW-PLATFORM */color: #0062CC;/* #endif *//* #ifdef NXSZ-PLATFORM */color: #00B26A;/* #endif */ }

js

// 測試 testHandle() {// #ifdef SHEQU-PLATFORMconsole.log("社區")// #endif// #ifdef NXDW-PLATFORMconsole.log("寧夏黨委")// #endif// #ifdef NXSZ-PLATFORMconsole.log("寧夏數字")// #endif// #ifndef NXDW-PLATFORM || NXSZ-PLATFORM || SHEQU-PLATFORMconsole.log("其他")// #endif },

其他條件編譯

pages.json 的條件編譯：

// #ifdef SHEQU-PLATFORM {"path": "pages/main/main","style": {"navigationBarTitleText": "智慧社區","enablePullDownRefresh": true} }, // #endif

上面的頁面，只有運行至SHEQU-PLATFORM 時才會編譯進去

{... } // #ifdef SHEQU-PLATFORM , {"root": "shequPackages","pages": [{"path": "pages/test","style": {"navigationBarTitleText": "test","enablePullDownRefresh": false,"navigationBarBackgroundColor": "#ffffff"}}] } // #endif // #ifdef NXDW-PLATFORM , {"root": "nxdwPackages","pages": [{"path": "pages/test","style": {"navigationBarTitleText": "test","enablePullDownRefresh": false,"navigationBarBackgroundColor": "#ffffff"}}] } // #endif

注意上面的逗號，不然會出現pages.json編譯失敗問題

注：不同平臺下的特有功能，以及小程序平臺的分包，都可以通過 pages.json 的條件編譯來更好地實現。這樣，就不會在其它平臺產生多余的資源，進而減小包體積。

static 目錄的條件編譯

注：在不同平臺，引用的靜態資源可能也存在差異，通過 static 的的條件編譯可以解決此問題，static 目錄下新建不同平臺的專有目錄（目錄名稱同 %PLATFORM% 值域,但字母均為小寫），專有目錄下的靜態資源只有在特定平臺才會編譯進去

整體目錄條件編譯

注：如果想把各平臺的頁面文件更徹底的分開，也可以在uni-app項目根目錄創建platforms目錄，然后在下面進一步創建SHEQU-PLATFORM、NXDW-PLATFORM等子目錄，存放不同平臺的文件。

總結

以上是生活随笔為你收集整理的uniapp自定义条件编译-定制化产品的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。