背景

最近有个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自定义条件编译-定制化产品相关推荐

UniApp 自定义条件编译详细使用流程
一.简介官方自定义条件编译文档. 举例:开发一个 wx 小程序,但是这小程序需要支持打包多种 UI 风格,如果用 if 或者现有的条件编译肯定是不能满足的,这时候就需要以 wx 小程序为基准平台 ...
芯片研发：从市场需求-＞芯片设计-＞SDK开发-＞Turnkey方案-＞定制化产品 --- Turnkey方案（四）
关于TK方案开发,设计到Sensor + Soc的方案,大同小异.具体各个模块设计可以参考: 方案设计:IPC产品系统设计: https://blog.csdn.net/YXFLINUX/articl ...
芯片研发：从市场需求-芯片设计-SDK开发-Turnkey方案-定制化产品 --- SDK开发（三）
1. 目前SDK可以分为两类:Linux和RTOS. 主流IPC SDK是Linux: 差异化,面向Iot市场IPC趋向于RTOS. 个人预言消费类Camera后续会全部转为Rtos的Camera:专 ...
芯片研发：从市场需求-芯片设计-SDK开发-Turnkey方案-定制化产品 --- 市场需求（一）
问:做什么市场? 答: 做芯片量大的市场.容易养活公司:发展高端算法,把握未来趋势.(简直就是废话,当我没说就好) IPC芯片(SDV.360VR采集相机.行车记录器也类似): 消费类:卡片机.摇头机 ...
芯片研发：从市场需求-芯片设计-SDK开发-Turnkey方案-定制化产品 --- 芯片设计（二）
IPC IC举例: 1. IPC IP关键点:ISP IP.Codec IP.智能算法IP A. ISP IP:一般用PC + VC++.Matlib.Opencv等做算法设计,选择一个对手.朝着这个 ...
中柏平板触摸驱动_一文总览2019年最新最全的工业平板电脑定制化服务
伴随国内制造业的转型, 以往制造企业生产大批量单一品类的"省事儿"方式, 已经满足不了用户场景多样化的使用需求, 小批量多品种以及个性化定制服务则越来越受到用户的青睐. 与此同时, ...
【科技百咖】五舟科技CEO谢高辉：国产自主软硬一体，通过定制化杀出一条血路...
自"云计算"的概念被提出后,全球云计算产业发展已经十年有余.云计算从概念到落地,期间经历了种种起伏,但是产业和技术已进入高速增长阶段. 一方面,与云计算市场高速增长形成鲜明对比的是 ...
算丰征途：为军用、民用、工业领域提供可定制化的巡检机器人解决方案
自主研发的「Sophon盘古无人驾驶系统」是算丰征途的核心竞争力. 它搭载了AI视觉系统,可以根据用户需求,进行诸多类型的检测.基于此,除了标准化的「大鹅巡逻机器人」之外,更重要的是,我们可以为军用. ...
高度可定制化的方案_如何开发高度可定制的产品
高度可定制化的方案您是否听说过:"我们非常喜欢您的产品--除了一些小细节."? 然后,CIO推出了一系列其他"必备"要求的清单,其中有数百个要添加到您的惊人产 ...

uniapp自定义条件编译-定制化产品

背景