uni-app 中的条件编译 / 不同平台
uni-app 2019-04-10 13:19:37

语法

ifdef：if defined 正向条件，也就是说在 XX 平台下生效。

ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效。

endif：条件结束

%PLATFORM%：平台名称

        %PLATFORM% 可取值

       APP-PLUS

       APP-PLUS-NVUE

       H5

       MP-WEIXIN

       MP-ALIPAY

       MP-BAIDU

       MP

 

示例

以下这段代码，只会在 5+App 环境下生效/存在。

JavaScript Code复制内容到剪贴板
  1. // #ifdef APP-PLUS    
  2. const uuid = plus.device.uuid;    
  3. // #endif    

除了支持单个平台的条件编译外，还支持使用 || 来满足多平台条件编译。

这个组件会在微信小程序及百度小程序环境下生效：

XML/HTML Code复制内容到剪贴板
  1. <!-- #ifdef MP-WEIXIN || MP-BAIDU -->    
  2. <button @getuserinfo="getUserInfo">获取用户信息</button>    
  3. <!-- #endif -->    

不同文件或语言中，注释的方式有所不同。在实际使用中一定要注意，不要随意复制导致语法错误。

 

组件

组件的注释，就是 HTML 标签的注释语法。

XML/HTML Code复制内容到剪贴板
  1. <!-- #ifdef MP-WEIXIN -->    
  2. <ad unit-id="123456789"></ad>    
  3. <!-- #endif -->    

 

CSS

在 CSS 中使用条件编译，往往是因为某些平台的内置组件的样式，会影响到一些界面的渲染。

CSS Code复制内容到剪贴板
  1. /* #ifdef MP-ALIPAY*/    
  2. input {    
  3.     padding: 0;    
  4. }    
  5. /* #endif */    

还有一种场景就是不同平台下，页面的样式的确会有设计上的差异。
这种情况，可以使用 CSS 的条件编译来处理，也可以配合组件的条件编译来处理。

CSS Code复制内容到剪贴板
  1. .app-text {    
  2.     color: #007AFF;    
  3. }    
  4. .weixin-text {    
  5.     color: #FF3333;    
  6. }    

 

XML/HTML Code复制内容到剪贴板
  1. <!-- #ifdef APP-PLUS -->    
  2. <text class="app-text">text</text>    
  3. <!-- #endif -->    
  4. <!-- #ifdef MP-WEIXIN -->    
  5. <text class="weixin-text">text</text>    
  6. <!-- #endif -->    

 

这样的话，在 5+App 上这个文字的颜色是蓝色，在微信小程序上就是红色。

这个方案还可以进一步调整，就是在计算属性中使用条件编译，动态绑定组件的 class。

JavaScript

平台特有的 API 或功能，需要使用条件编译来处理。

JavaScript Code复制内容到剪贴板
  1. // #ifdef APP-PLUS    
  2. plus.speech.startRecognize(options, function (result) {    
  3.     console.log('语音识别成功');    
  4. }, function (error) {    
  5.     console.log('语音识别失败');    
  6. });    
  7. // #endif    

 

pages.json

除了在页面内容的代码中支持条件编译外，uni-app 还支持在 pages.json 中通过条件编译来组织多平台的页面。
这样做可以大幅减少生成的代码体积，尤其是在小程序平台。

当然，普通的 json 文件中是不支持注释的。pages.json 中条件编译的校验以及代码提示等，是由 HBuilderX 来支持完成的。

JavaScript Code复制内容到剪贴板
  1. {    
  2.     "globalStyle": {    
  3.         "navigationBarBackgroundColor": "#FF3333"    
  4.     },    
  5.     "pages": [{    
  6.             "path": "pages/index/index"    
  7.         }    
  8.         // #ifdef APP-PLUS    
  9.         , {    
  10.             "path": "pages/speech/speech"    
  11.         }    
  12.         // #endif    
  13.     ]    
  14. }    

 

在 pages.json 中使用条件编译，需要注意以下几个点：

  • 如果页面是 pages 的最终一项，那么分隔符逗号需要在花括号前。上面例子，就是这种场景。
  • globalStyle 的条件编译，推荐使用平台节点来处理。
JavaScript Code复制内容到剪贴板
  1. {    
  2.     "globalStyle": {    
  3.         "navigationBarBackgroundColor": "#FF3333",    
  4.         "mp-weixin": {    
  5.             "backgroundColor": "#FFFFFF"    
  6.         },    
  7.         "mp-alipay": {    
  8.             "titleBarColor": "#FFFFFF"    
  9.         }    
  10.     },    
  11.     "pages": [{    
  12.             "path": "pages/index/index"    
  13.         }    
  14.     ]    
  15. }    

 

平台节点下面的配置，建议参考特定平台的配置说明，直接使用平台的特有属性。

static

为了进一步减少应用的包体积，用于存放静态资源的 static 目录同样支持了条件编译。

支持的目录名

  • app-plus
  • h5
  • mp-weixin
  • mp-alipay
  • mp-baidu

具体的使用，可以参考下 hello-uniapp 中在 static/app-plus 下存放 location@3x.png。
hello-uniapp 中这样处理，解决了两个问题：

  • iOS 平台地图的覆盖物，使用高清图时，文件名称需要以 @2x/@3x 结尾。
  • 支付宝小程序，项目中不能出现 @ 等特殊符号命名的文件。

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/426.html

上一篇 微信小程序JavaScript SDK使用
下一篇 调用微信小程SDK报错 此key未开启webservice功能
相关的文章
Powered by yoyo苏ICP备15045725号