uni-app中使用条件编译（7）

跨端兼容：

uni-app 已将常用的组件、JS API 封装进框架中，开发者按照 uni-app 规范开发可以保证多平台兼容，大部分业务均可直接满足。但每一个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

在 C 语言中，通过 #ifdef、#ifndef的方式，为windows、mac 等不同的 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段。

条件编译：

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef  是if defined的缩写，表示仅在某平台存在
• #idndef 是if not defined的缩写，表示除了某平台均存在
• %PLATFORM%  表示平台的名称

%PLATFORM% 可取值如下：

条件编译支持的文件：

• .vue
• .js
• .css
• pages.json
• 各预编译语言文件，如：.scss、less、.stylus、.ts、.pug

注意：条件编译是利用注释实现的，在不同语法里注释写法不一样，js 使用  // 注释 、css 使用 /* 注释 */ 、vue/nvue 模板里使用 <!--  注释  --> 

API的条件编译

写法：

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

如下代码仅在App下出现，示例如下：

    created() {
      // #ifdef APP-PLUS
      console.log('在App中打印')
      // #endif
      
      // #ifdef MP-WEIXIN
      console.log('在微信小程序中打印')
      // #endif
    },

组件的条件编译

写法：

平台特有的组件

示例： 

    
    我是在App平台编译的代码
    
    
    
    我是在H5平台编译的代码
    

样式的条件编译

写法：

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

注意： 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 ​​/*注释*/​​ 的写法。

 示例：

page.json 的条件编译

下面的页面，只有运行至 App 时才会编译进去。

  // #ifdef APP-PLUS
  {
    "path": "pages/me/me",
    "style": {
      "navigationBarTitleText": "我的"
    }
  }
  // #endif

全部 page.json 文件如下：

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页"
    }
  },
  // #ifdef APP-PLUS
  {
    "path": "pages/me/me",
    "style": {
      "navigationBarTitleText": "我的"
    }
  }
  // #endif
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#007AFF",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {
      "color": "#8B8B8B", // 表示tabBar item项中文字默认的颜色
      "selectedColor": "#F63515", // 表示tabBar item项中文字选中的颜色
      "borderStyle": "black",// 表示tabBar 上边框的颜色，目前只支持 black/white
      "backgroundColor": "#ffffff",// 表示 tabBar 的背景颜色
      "list": [{
          "pagePath": "pages/index/index", // 表示第一tab项的页面路径
          "iconPath": "static/image/home_default.png", // 表示当前 tab 未选中时所显示的图标路径
          "selectedIconPath": "static/image/home_select.png", // 表示当前 tab 选中时所显示的图标文件路径
          "text": "首页" // 表示当前 tab 的文字
      }, {
          "pagePath": "pages/me/me",
          "iconPath": "static/image/me_default.png",
          "selectedIconPath": "static/image/me_select.png",
          "text": "我的"
      }]
  }
}

不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。

json的条件编译，如不同平台的key名称相同，cli项目下开发者自己安装的校验器会报错，需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器，无需在意此问题，HBuilderX的语法校验器为此优化过。

static 目录的条件编译

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 ​​%PLATFORM%​​ 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构，​​a.png​​​ 只有在微信小程序平台才会编译进去，​​b.png​​ 在所有平台都会被编译。

┌─static                
│  ├─mp-weixin
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json     

整体目录条件编译

如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建​​platforms​​​目录，然后在下面进一步创建​​app-plus​​​、​​mp-weixin​​等子目录，存放不同平台的文件。

注意

• ​​platforms​​​目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用​​static 目录的条件编译​​

注意：

• Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。支持​​ifios​​​、​​ifAndroid​​代码块，可方便编写判断。
• 有些跨端工具可以提供js的条件编译或多态，但这对于实际开发远远不够。uni-app不止是处理js，任何代码都可以多端条件编译，才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码，很不利于复用和维护。举例，微信小程序主题色是绿色，而百度支付宝小程序是蓝色，你的应用想分平台适配颜色，只有条件编译是代码量最低、最容易维护的。
• 有些公司的产品运营总是给不同平台提不同需求，但这不是拒绝uni-app的理由。关键在于项目里，复用的代码多还是个性的代码多，正常都是复用的代码多，所以仍然应该多端。而个性的代码放到不同平台的目录下，差异化维护。