第12集：uni-app 条件编译

章节概述

条件编译是 uni-app 中非常重要的一个特性，它允许开发者根据不同的平台编写不同的代码，从而实现平台差异化功能和多端适配。uni-app 提供了丰富的条件编译语法，支持在模板、脚本、样式和配置文件中使用条件编译。本章节将详细介绍 uni-app 中的条件编译功能，包括条件编译语法、平台差异处理、多端适配策略等核心知识点，并通过实用案例帮助开发者掌握为不同平台定制功能的方法。

核心知识点

1. 条件编译语法

uni-app 支持多种条件编译语法，包括：

  • 模板条件编译：使用 <!-- #ifdef --> 和 <!-- #endif --> 注释语法
  • 脚本条件编译：使用 #ifdef 和 #endif 预处理指令
  • 样式条件编译：使用 /* #ifdef */ 和 /* #endif */ 注释语法
  • 配置文件条件编译：使用 condition 字段

2. 平台标识

uni-app 支持的平台标识包括：

  • APP-PLUS：App 平台
  • APP-PLUS-NVUE：App 平台的 nvue 页面
  • MP-WEIXIN：微信小程序
  • MP-ALIPAY：支付宝小程序
  • MP-BAIDU：百度小程序
  • MP-TOUTIAO：抖音小程序
  • MP-LARK：飞书小程序
  • MP-QQ：QQ 小程序
  • MP-KUAISHOU：快手小程序
  • MP-JD：京东小程序
  • MP-REDDIT：小红书小程序
  • WEB：Web 平台
  • WEB-APP：WebApp 平台
  • H5：H5 平台

3. 平台差异处理

uni-app 中的平台差异处理主要包括：

  • API 差异：不同平台的 API 可能不同，需要使用条件编译调用不同的 API
  • 组件差异：不同平台的组件可能不同，需要使用条件编译使用不同的组件
  • 样式差异：不同平台的样式可能不同，需要使用条件编译编写不同的样式
  • 配置差异：不同平台的配置可能不同，需要使用条件编译配置不同的参数

4. 多端适配策略

uni-app 中的多端适配策略主要包括：

  • 统一代码优先：尽量使用统一的代码，减少平台差异
  • 平台特性增强：对于平台特有的功能，使用条件编译进行增强
  • 渐进式适配：从一个平台开始，逐步适配其他平台
  • 抽象公共逻辑：将公共逻辑抽象出来，平台特定逻辑使用条件编译

实用案例

为不同平台定制功能

案例描述

开发一个多端应用，实现以下功能：

  1. 为 App 端添加推送功能
  2. 为微信小程序添加模板消息功能
  3. 为不同平台添加不同的分享功能
  4. 为不同平台编写不同的样式

代码示例

  1. 模板条件编译
<template>
  <view class="container">
    <text class="title">条件编译示例</text>
    
    <!-- #ifdef APP-PLUS -->
    <button class="btn" @click="openPushSetting">打开推送设置</button>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <button class="btn" @click="sendTemplateMessage">发送模板消息</button>
    <!-- #endif -->
    
    <!-- #ifdef MP-ALIPAY -->
    <button class="btn" @click="sendAlipayMessage">发送支付宝消息</button>
    <!-- #endif -->
    
    <!-- #ifdef H5 -->
    <button class="btn" @click="shareToWeb">网页分享</button>
    <!-- #endif -->
  </view>
</template>
  1. 脚本条件编译
<script>
export default {
  methods: {
    // 打开推送设置（App 端）
    openPushSetting() {
      // #ifdef APP-PLUS
      uni.openSetting({
        success(res) {
          console.log('打开设置成功:', res);
        }
      });
      // #endif
    },
    
    // 发送模板消息（微信小程序）
    sendTemplateMessage() {
      // #ifdef MP-WEIXIN
      wx.request({
        url: 'https://api.weixin.qq.com/cgi-bin/message/template/send',
        method: 'POST',
        data: {
          touser: 'openid',
          template_id: 'templateId',
          page: 'pages/index/index',
          data: {
            keyword1: {
              value: '测试消息'
            }
          }
        },
        success(res) {
          console.log('发送模板消息成功:', res);
        }
      });
      // #endif
    },
    
    // 发送支付宝消息（支付宝小程序）
    sendAlipayMessage() {
      // #ifdef MP-ALIPAY
      my.request({
        url: 'https://api.alipay.com/message/send',
        method: 'POST',
        data: {
          touser_id: 'userId',
          template_code: 'templateCode',
          context: {
            title: '测试消息'
          }
        },
        success(res) {
          console.log('发送支付宝消息成功:', res);
        }
      });
      // #endif
    },
    
    // 网页分享（H5）
    shareToWeb() {
      // #ifdef H5
      if (navigator.share) {
        navigator.share({
          title: '分享标题',
          text: '分享描述',
          url: window.location.href
        }).then(() => {
          console.log('分享成功');
        }).catch(err => {
          console.log('分享失败:', err);
        });
      } else {
        // 降级方案
        console.log('当前浏览器不支持分享 API');
      }
      // #endif
    }
  }
};
</script>
  1. 样式条件编译
<style>
.container {
  padding: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.btn {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 4px;
}

/* #ifdef APP-PLUS */
.btn {
  background-color: #007AFF;
  color: #FFFFFF;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.btn {
  background-color: #07C160;
  color: #FFFFFF;
}
/* #endif */

/* #ifdef MP-ALIPAY */
.btn {
  background-color: #1677FF;
  color: #FFFFFF;
}
/* #endif */

/* #ifdef H5 */
.btn {
  background-color: #409EFF;
  color: #FFFFFF;
  border: none;
}
/* #endif */
</style>
  1. 配置文件条件编译
{
  "name": "uni-app-conditional-demo",
  "appid": "__UNI__XXXXXX",
  "description": "uni-app 条件编译示例",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": true,
  "app-plus": {
    "push": {
      "jpush": {
        "appkey": "your_jpush_appkey",
        "channel": "your_jpush_channel"
      }
    }
  },
  "mp-weixin": {
    "appid": "your_wechat_appid",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true,
    "requiredBackgroundModes": ["notification"]
  },
  "mp-alipay": {
    "appid": "your_alipay_appid",
    "usingComponents": true
  },
  "h5": {
    "router": {
      "mode": "history"
    }
  }
}
  1. 复杂条件编译
// 复杂条件编译示例
function initPlatform() {
  // #ifdef APP-PLUS || MP-WEIXIN
  console.log('当前平台是 App 或微信小程序');
  // #endif
  
  // #ifdef APP-PLUS && !APP-PLUS-NVUE
  console.log('当前平台是 App 非 nvue 页面');
  // #endif
  
  // #ifndef H5
  console.log('当前平台不是 H5');
  // #endif
  
  // #ifndef MP-WEIXIN && !MP-ALIPAY
  console.log('当前平台不是微信小程序和支付宝小程序');
  // #endif
}

常见问题与解决方案

1. 条件编译语法错误

问题：条件编译语法使用错误，导致代码无法正确编译。

解决方案：

  • 检查条件编译语法是否正确，确保注释格式和指令格式正确
  • 确保条件编译指令成对出现，#ifdef 对应 #endif，#ifndef 对应 #endif
  • 检查平台标识是否正确，确保使用了 uni-app 支持的平台标识
  • 对于复杂条件，确保逻辑运算符使用正确

2. 平台差异处理不当

问题：使用条件编译处理平台差异时，出现功能异常。

解决方案：

  • 尽量使用 uni-app 提供的跨平台 API，减少平台差异
  • 对于平台特有的 API，使用条件编译进行隔离
  • 测试不同平台的功能，确保平台差异处理正确
  • 对于复杂的平台差异，考虑使用抽象层进行封装

3. 代码冗余

问题：过度使用条件编译，导致代码冗余。

解决方案：

  • 尽量使用统一的代码，减少条件编译的使用
  • 将公共逻辑抽象出来，平台特定逻辑使用条件编译
  • 使用配置文件或常量管理平台特定的参数
  • 对于相似的平台，可以使用逻辑运算符合并条件编译

4. 编译失败

问题：使用条件编译后，应用无法正常编译。

解决方案：

  • 检查条件编译语法是否正确
  • 确保条件编译指令在正确的位置
  • 对于脚本条件编译，确保指令在正确的作用域内
  • 对于样式条件编译，确保注释格式正确
  • 检查平台标识是否正确，确保使用了 uni-app 支持的平台标识

学习总结

本章节详细介绍了 uni-app 中的条件编译功能，包括条件编译语法、平台差异处理、多端适配策略等核心知识点，并通过实用案例帮助开发者掌握为不同平台定制功能的方法。通过本章节的学习，开发者应该能够：

  1. 了解 uni-app 条件编译的基本概念和原理
  2. 掌握条件编译语法的使用方法
  3. 学会处理不同平台的差异
  4. 制定合理的多端适配策略
  5. 避免条件编译使用中的常见问题

条件编译是 uni-app 中实现多端适配的重要工具，它允许开发者根据不同的平台编写不同的代码，从而实现平台差异化功能。开发者应该合理使用条件编译，在保证代码可维护性的同时，实现最佳的多端适配效果。

练习与思考

  1. 实现一个多端应用，为不同平台添加不同的功能。
  2. 使用条件编译处理平台差异，确保应用在不同平台上都能正常运行。
  3. 设计一个多端适配策略，平衡代码统一性和平台特性。
  4. 分析一个复杂的平台差异问题，使用条件编译进行解决。
  5. 思考如何减少条件编译的使用，提高代码的可维护性。
« 上一篇 uni-app 分享功能 下一篇 » uni-app 原生能力集成
↑