uni-app 中的条件编译与跨端兼容

uni-app 为了实现一套代码编译到多个平台（包括小程序，App，H5 等），引入了条件编译机制。 通过条件编译，我们可以针对不同的平台编写特定的代码，从而实现跨端兼容。

一、条件编译的作用

• 平台差异化处理: 应对不同平台 API 差异，例如，小程序和 App 中获取用户地理位置的 API 就不同。
• 功能选择性启用: 某些功能可能只在特定平台支持或者有意义，例如， App 的推送功能在 H5 中就没有必要。
• 提高性能： 避免在不支持的平台上执行大量无效代码，提高运行效率。
• 兼容旧版本： 针对性地处理旧版本平台的 API 兼容问题。
• 调试方便： 在不同的平台进行针对性的调试。

二、条件编译的语法

uni-app 的条件编译主要有两种方式：

• // #ifdef 和 // #endif： 用于包裹块级代码。
• // #ifndef 和 // #endif： 用于包裹块级代码，表示如果未定义。

<template>
	<view>
		<!-- #ifdef H5 -->
        <!-- 只有在 H5 页面，才会编译这段代码-->
		<view>H5 希望在h5页面中看见</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
        <!-- 只有在 微信小程序 平台，才会编译这段代码-->
		<view>微信小程序 希望在微信小程序页面中看见</view>
		<!-- #endif -->
	</view>
</template>

这段代码就像一个“开关”，根据不同的平台，控制不同的内容是否显示。 它允许使用同一份代码，在不同的平台上呈现不同的用户界面和功能。 这在跨平台开发中非常有用，可以有效地减少代码的重复编写和维护工作。 

三、常见平台标识符

注意:

• 平台标识符区分大小写。
• MP 标识符只在 vue3 中有效。

四、使用示例

1.区分 App 和 小程序 调用不同 API

// #ifdef APP-PLUS
// App 平台
uni.getLocation({
  success: function (res) {
    console.log('经度：' + res.longitude + '，纬度：' + res.latitude);
  }
});
// #endif

// #ifdef MP-WEIXIN
// 微信小程序平台
wx.getLocation({
  type: 'wgs84',
  success (res) {
    console.log(res.latitude)
    console.log(res.longitude)
  }
})
// #endif

2.仅在 App 平台显示某个组件

<template>
  <view>
    <view>通用内容</view>
    // #ifdef APP-PLUS
    <my-app-component></my-app-component>
    // #endif
  </view>
</template>

<script>
export default {
  components: {
    'my-app-component': {
      template: `<view>这是一个组件</view>`
    }
  }
}
</script>

3.设置不同的导航栏标题

export default {
  onLoad() {
    // #ifdef APP-PLUS
    uni.setNavigationBarTitle({
      title: 'App 页面'
    });
    // #endif

    // #ifdef H5
    document.title = 'H5 页面';
    // #endif

    // #ifdef MP-WEIXIN
    wx.setNavigationBarTitle({
      title: '微信小程序页面'
    });
    // #endif
  }
}

4.使用 v-if 进行条件编译 (vue3)

在 vue3 中, 可以在 template 中使用简单的平台判断:

<template>
  <view>
    <view>通用内容</view>
    <view v-if="__PLATFORM__ === 'app'">App 平台的特有内容</view>
    <view v-if="__PLATFORM__ === 'h5'">H5 平台的特有内容</view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

五、总结

uni-app 的条件编译机制是一种强大的跨端兼容工具。 合理使用条件编译，可以编写一套代码，运行到多个平台，极大提高开发效率。 在使用条件编译时，要清晰的组织代码，做好测试，并避免滥用。通过结合各种最佳实践，可以有效地管理跨平台开发的复杂性，提升应用质量。