uni-app中的条件编译

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app中的条件编译

uni-app 将已经将可以跨平台兼容处理的组件及 API 等进行了封装，但是部分平台的特性无法跨平台。

由此，uni-app 提供了条件编译的方案，来处理不同平台的特定或差异。

语法

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 环境下生效/存在。

// #ifdef APP-PLUS  
const uuid = plus.device.uuid;  
// #endif

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

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

<!-- #ifdef MP-WEIXIN || MP-BAIDU -->  
<button @getuserinfo="getUserInfo">获取用户信息</button>  
<!-- #endif -->

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

组件

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

<!-- #ifdef MP-WEIXIN -->  
<ad unit-id="123456789"></ad>  
<!-- #endif -->

CSS

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

/* #ifdef MP-ALIPAY*/  
input {  
    padding: 0;  
}  
/* #endif */

还有一种场景就是不同平台下，页面的样式的确会有设计上的差异。

这种情况，可以使用 CSS 的条件编译来处理，也可以配合组件的条件编译来处理。

.app-text {  
    color: #007AFF;  
}  
.weixin-text {  
    color: #FF3333;  
}

<!-- #ifdef APP-PLUS -->  
<text class="app-text">text</text>  
<!-- #endif -->  
<!-- #ifdef MP-WEIXIN -->  
<text class="weixin-text">text</text>  
<!-- #endif -->

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

JavaScript

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

// #ifdef APP-PLUS  
plus.speech.startRecognize(options, function (result) {  
    console.log('语音识别成功');  
}, function (error) {  
    console.log('语音识别失败');  
});  
// #endif

pages.json

除了在页面内容的代码中支持条件编译外，uni-app 还支持在 pages.json 中通过条件编译来组织多平台的页面。

这样做可以大幅减少生成的代码体积，尤其是在小程序平台。

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

{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333"  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
        // #ifdef APP-PLUS  
        , {  
            "path": "pages/speech/speech"  
        }  
        // #endif  
    ]  
}

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

  • 如果页面是 pages 的最终一项，那么分隔符逗号需要在花括号前。上面例子，就是这种场景。
  • globalStyle 的条件编译，推荐使用平台节点来处理。
{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333",  
        "mp-weixin": {  
            "backgroundColor": "#FFFFFF"  
        },  
        "mp-alipay": {  
            "titleBarColor": "#FFFFFF"  
        }  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
    ]  
}

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

static

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

支持的目录名

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

具体的使用，可以参考下 hello-uniapp 中在 static/app-plus 下存放 location@3x.png。

hello-uniapp 中这样处理，解决了两个问题：

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

Harmonyos Next教程
1 回复

在uni-app中，条件编译是一种非常有用的功能，它允许开发者根据不同的平台或者环境编译出不同的代码。这在跨平台开发中尤为重要，因为不同平台可能有不同的特性和需求。下面我将展示如何在uni-app中使用条件编译。

条件编译的基本语法

uni-app的条件编译语法非常简单，主要使用#ifdef、#ifndef、#if、#else、#elif和#endif这几个预处理指令。

示例代码

假设我们有一个简单的uni-app项目，需要在H5和微信小程序中展示不同的内容。

  1. 在pages/index/index.vue文件中使用条件编译
<template>
  <view>
    <text>
      #ifdef H5
        这是H5平台的内容
      #elif MP-WEIXIN
        这是微信小程序平台的内容
      #else
        这是其他平台的内容
      #endif
    </text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据定义
    };
  },
  methods: {
    // 方法定义
  }
};
</script>

<style>
/* 样式定义 */
</style>

在这个例子中，根据不同的平台，<text>标签中的内容会有所不同。

  1. 在manifest.json中配置条件编译平台标识

通常，你不需要手动在manifest.json中添加条件编译的平台标识，因为uni-app会自动识别。但如果你需要自定义条件编译的标识，可以在manifest.json的mp-weixin或其他平台配置中添加自定义字段。

{
  "mp-weixin": {
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false
    },
    // 自定义条件编译标识（如果需要）
    "customField": "someValue"
  }
}

注意：这里的自定义字段示例仅用于说明，实际上在大多数情况下，你不需要在manifest.json中手动添加条件编译标识。

总结

条件编译是uni-app中一个非常强大的功能，它使得开发者能够轻松地针对不同的平台编写特定的代码。通过简单的预处理指令，我们可以确保每个平台都能获得最优化的用户体验。上面的示例展示了如何在模板中使用条件编译来展示不同的内容，你可以根据需要将其扩展到脚本和样式中。希望这个示例对你有所帮助！

回到顶部