什么是条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
一、写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- %PLATFORM%：平台名称
具体取值不在一 一列举，大家可以前往官网查看：uni-app条件编译
二、支持的文件
- .vue
- .js
- .css
- pages.json
- 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
三、注意：
条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->；
条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
使用条件编译请保证编译前和编译后文件的正确性，比如json文件中不能有多余的逗号；
使用示例
1、pages.json中使用
为什么要先说在pages.json文件中使用呢？
相信大家或多或少都有踩坑，首先JSON文件是特殊的文件，上面官网中也提到，要确保编译前后的正确性，不能有多余的空格；
示例：
下面的代码是我在真实项目当中使用的，方便阅读缩减了pages中的内容，可以发现里面的tabBar、globalStyle都是有两套的，所以可以编译到小程序和app有不同的效果，重点是逗号放的位置，如果位置放错一定会导致app或者小程序有一方编译失败，或者两方都会出现pages.json编译失败
{ "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, "pages": [ // #ifndef MP-WEIXIN { "path": "pages/index/index", "style": { //去掉顶部导航栏 "app-plus": { "titleNView": false } } }, { "path": "pages/login/login", "style": { "app-plus": { "titleNView": false } } }, { "path": "pages/registered/registeredOne", "style": { "app-plus": { "titleNView": false } } }, { "path": "pages/registered/registeredTwo/registeredTwo", "style": { "app-plus": { "titleNView": false } } }, { "path": "pages/registered/registeredThree/registeredThree", "style": { "app-plus": { "titleNView": false } } }, { "path": "pages/registered/registeredFour/registeredFour", "style": { "navigationBarTitleText": "成爲會員", "enablePullDownRefresh": false, "app-plus": { "titleNView": {} } } }, // #endif { "path": "platforms/mp-weixin/discount/discount", "style": { "navigationBarTitleText": "F-REWARD", "enablePullDownRefresh": false } }, { "path": "platforms/mp-weixin/mine/mine", "style": { "navigationBarTextStyle": "white", "navigationBarTitleText": "", "enablePullDownRefresh": false // "disableScroll": true } }, { "path": "platforms/mp-weixin/printing/printing", "style": { "navigationBarTitleText": "F-REWARD", "enablePullDownRefresh": false } }, { "path": "platforms/mp-weixin/coupons/coupons", "style": { "navigationBarTitleText": "F-REWARD", "enablePullDownRefresh": false } }, { "path": "platforms/mp-weixin/favorite/favorite", "style": { "navigationBarTitleText": "F-REWARD", "enablePullDownRefresh": false } } ] //#ifndef MP-WEIXIN , "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "CRM", "navigationBarBackgroundColor": "#FFFFFF", "backgroundColor": "#F8F8F8", "app-plus": { "background": "#efeff4" } } // #endif // #ifndef MP-WEIXIN , "tabBar": { "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#F8F8F8", "list": [{ "pagePath": "pages/tabBar/home/home", "iconPath": "./static/tabbar/zhuye.png", "selectedIconPath": "./static/tabbar/zhuye.png", "text": "最新簡介" }, { "pagePath": "pages/tabBar/activity/activity", "iconPath": "./static/tabbar/liwu.png", "selectedIconPath": "./static/tabbar/liwu.png", "text": "優惠購買" }, { "pagePath": "pages/tabBar/code/code", "iconPath": "./static/tabbar/erweima.png", "selectedIconPath": "./static/tabbar/erweima.png" }, { "pagePath": "pages/tabBar/search/search", "iconPath": "./static/tabbar/sousuo.png", "selectedIconPath": "./static/tabbar/sousuo.png", "text": "搜索店鋪" }, { "pagePath": "pages/tabBar/mine/mine", "iconPath": "./static/tabbar/wode.png", "selectedIconPath": "./static/tabbar/wode.png", "text": "我的账户" } ] } // #endif // #ifdef MP-WEIXIN , "globalStyle": { "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "white", "navigationBarTitleText": "" } // #endif // 小程序tabbar // #ifdef MP-WEIXIN , "tabBar": { "color": "#000000", "selectedColor": "#f00", "backgroundColor": "#fff", "list": [{ "pagePath": "platforms/mp-weixin/coupons/coupons", "iconPath": "./static/mp-weixin/tabbar/coupons.png", "selectedIconPath": "./static/mp-weixin/tabbar/selectedCoupons.png", "text": "電子優惠券" }, { "pagePath": "platforms/mp-weixin/printing/printing", "iconPath": "./static/mp-weixin/tabbar/printing.png", "selectedIconPath": "./static/mp-weixin/tabbar/selectedPrinting.png", "text": "電子印花" }, { "pagePath": "platforms/mp-weixin/mine/mine", "iconPath": "./static/mp-weixin/tabbar/mine.png", "selectedIconPath": "./static/mp-weixin/tabbar/selectedMine.png", "text": "我的賬戶" }, { "pagePath": "platforms/mp-weixin/discount/discount", "iconPath": "./static/mp-weixin/tabbar/discount.png", "selectedIconPath": "./static/mp-weixin/tabbar/selectedDiscount.png", "text": "優惠獎賞" }, { "pagePath": "platforms/mp-weixin/favorite/favorite", "iconPath": "./static/mp-weixin/tabbar/love.png", "selectedIconPath": "./static/mp-weixin/tabbar/selectedLove.png", "text": "我的最愛" } ] } // #endif }
2、API的条件编译
// #ifdef %PLATFORM% 平台特有的API实现 // #endif
示例，如下代码仅在 App 下出现:
示例，如下代码不会在 H5 平台上出现：
除了支持单个平台的条件编译外，还支持多平台同时编译，使用 || 来分隔平台名称。
示例，如下代码会在 App 和 H5 平台上出现：
3、组件的条件编译
<!-- #ifdef %PLATFORM% --> 平台特有的组件 <!-- #endif -->
示例，如下公众号关注组件仅会在微信小程序中出现：
<view> <view>微信公众号关注组件</view> <view> <!-- uni-app未封装，但可直接使用微信原生的official-account组件--> <!-- #ifdef MP-WEIXIN --> <official-account></official-account> <!-- #endif --> </view> </view>
4、样式的条件编译
/* #ifdef %PLATFORM% */ 平台特有样式 /* #endif */
注意： 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 /*注释*/ 的写法。
正确写法
错误写法
5、static目录的条件编译
在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。
如以下目录结构，a.png 只有在微信小程序平台才会编译进去，b.png 在所有平台都会被编译。
┌─static │ ├─mp-weixin │ │ └─a.png │ └─b.png ├─main.js ├─App.vue ├─manifest.json └─pages.json
6、整体目录的条件编译
如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建platforms目录，然后在下面进一步创建app-plus、mp-weixin等子目录，存放不同平台的文件。
注意
platforms目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用static 目录的条件编译
