背景

最近有個uniapp小程序產(chǎn)品，產(chǎn)品需要根據(jù)不同地區(qū)有不同的定制化需求，這邊用到的是uniapp的自定義條件編譯，實(shí)現(xiàn)一套前端代碼，可以經(jīng)過編譯生成不同的定制化產(chǎn)品，并且不會因?yàn)槭羌嫒萘硕鄠€產(chǎn)品，而在線上產(chǎn)生冗余代碼。

uniapp從2019年8月就已經(jīng)支持自定義條件編譯，如果不自定義，uni-app默認(rèn)支持如下枚舉值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq，我們可以通過在package.json文件中增加uni-app擴(kuò)展節(jié)點(diǎn)（開發(fā)中需要去掉注釋），可實(shí)現(xiàn)自定義條件編譯平臺（如釘釘小程序、微信服務(wù)號等平臺）

package.json配置擴(kuò)展節(jié)點(diǎn)

// package.json文件中不允許出現(xiàn)注釋，否則擴(kuò)展配置無效 {/**package.json其它原有配置*/"uni-app": {// 擴(kuò)展配置"scripts": {"shequ-platform": {//自定義編譯平臺配置，可通過cli方式調(diào)用"title":"智慧社區(qū)",// 在HBuilderX中會顯示在 運(yùn)行/發(fā)行 菜單中"BROWSER":"", //運(yùn)行到的目標(biāo)瀏覽器，BROWSER 僅在UNI_PLATFORM為h5時有效,目前僅限如下枚舉值：Chrome、Firefox、IE、Edge、Safari、HBuilderX"env": {//環(huán)境變量"UNI_PLATFORM": "mp-weixin"//基準(zhǔn)平臺，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":"寧夏數(shù)字大院","BROWSER":"","env": {"UNI_PLATFORM": "mp-weixin"},"define": {"NXSZ-PLATFORM": true}}} } }

配置完成后編輯器運(yùn)行，發(fā)行出現(xiàn)如下內(nèi)容

代碼應(yīng)用

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

html

<!-- #ifdef SHEQU-PLATFORM --><text class="test" @click="testHandle">社區(qū)</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">寧夏數(shù)字大院</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("社區(qū)")// #endif// #ifdef NXDW-PLATFORMconsole.log("寧夏黨委")// #endif// #ifdef NXSZ-PLATFORMconsole.log("寧夏數(shù)字")// #endif// #ifndef NXDW-PLATFORM || NXSZ-PLATFORM || SHEQU-PLATFORMconsole.log("其他")// #endif },

其他條件編譯

pages.json 的條件編譯：

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

上面的頁面，只有運(yùn)行至SHEQU-PLATFORM 時才會編譯進(jìn)去

{... } // #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

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

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

static 目錄的條件編譯

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

整體目錄條件編譯

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。