UniApp 如何处理多端适配？

在 UniApp 中，多端适配是确保应用在不同平台（如 H5、小程序、App）上表现一致的重要任务。UniApp 提供了多种方式来实现多端适配，包括 条件编译、平台判断 和 样式适配。以下是 UniApp 处理多端适配的常用方法：

一、条件编译

条件编译是 UniApp 提供的多端适配机制，允许开发者根据不同的平台编写特定的代码。

1. 条件编译语法

• 使用 #ifdef 和 #endif 来区分不同平台的代码。
• 示例：

  // #ifdef H5
  console.log('这是 H5 平台');
  // #endif
  
  // #ifdef MP-WEIXIN
  console.log('这是微信小程序平台');
  // #endif
  

2. 支持的平台标识

• H5：H5 平台
• MP-WEIXIN：微信小程序
• MP-ALIPAY：支付宝小程序
• APP-PLUS：App 平台
• MP：所有小程序平台

3. 条件编译示例

• 示例：

  // #ifdef H5
  const platform = 'H5';
  // #endif
  
  // #ifdef MP-WEIXIN
  const platform = '微信小程序';
  // #endif
  
  // #ifdef APP-PLUS
  const platform = 'App';
  // #endif
  
  console.log('当前平台：', platform);
  

二、平台判断

通过 uni.getSystemInfoSync 或 uni.getSystemInfo 获取平台信息，动态调整代码逻辑。

1. 获取平台信息

• 示例：

  const systemInfo = uni.getSystemInfoSync();
  console.log('平台信息：', systemInfo.platform);
  

2. 动态调整代码

• 示例：

  const systemInfo = uni.getSystemInfoSync();
  if (systemInfo.platform === 'ios') {
    console.log('当前平台是 iOS');
  } else if (systemInfo.platform === 'android') {
    console.log('当前平台是 Android');
  } else {
    console.log('当前平台是其他');
  }
  

三、样式适配

不同平台的样式可能需要调整，可以通过以下方式实现样式适配。

1. 使用条件编译

• 在样式文件中使用条件编译。
• 示例：

  /* #ifdef H5 */
  .container {
    padding: 20px;
  }
  /* #endif */
  
  /* #ifdef MP-WEIXIN */
  .container {
    padding: 10px;
  }
  /* #endif */
  

2. 使用平台判断

• 在样式中使用平台判断。
• 示例：

  <template>
    <view :class="containerClass">内容</view>
  </template>
  
  <script>
  export default {
    computed: {
      containerClass() {
        const systemInfo = uni.getSystemInfoSync();
        return systemInfo.platform === 'ios' ? 'ios-container' : 'android-container';
      }
    }
  };
  </script>
  
  <style>
  .ios-container {
    padding: 20px;
  }
  .android-container {
    padding: 10px;
  }
  </style>
  

四、多端 API 适配

不同平台的 API 可能有所不同，可以通过条件编译或平台判断进行适配。

1. 条件编译适配 API

• 示例：

  // #ifdef H5
  window.location.href = 'https://example.com';
  // #endif
  
  // #ifdef MP-WEIXIN
  wx.navigateTo({ url: '/pages/index/index' });
  // #endif
  
  // #ifdef APP-PLUS
  plus.runtime.openURL('https://example.com');
  // #endif
  

2. 平台判断适配 API

• 示例：

  const systemInfo = uni.getSystemInfoSync();
  if (systemInfo.platform === 'h5') {
    window.location.href = 'https://example.com';
  } else if (systemInfo.platform === 'mp-weixin') {
    wx.navigateTo({ url: '/pages/index/index' });
  } else if (systemInfo.platform === 'app-plus') {
    plus.runtime.openURL('https://example.com');
  }
  

五、总结

UniApp 处理多端适配的步骤如下：

1. 使用条件编译：通过 #ifdef 和 #endif 区分不同平台的代码。
2. 使用平台判断：通过 uni.getSystemInfoSync 获取平台信息，动态调整代码逻辑。
3. 样式适配：通过条件编译或平台判断实现样式适配。
4. 多端 API 适配：通过条件编译或平台判断适配不同平台的 API。

以下是一个完整的条件编译示例：

// #ifdef H5
console.log('这是 H5 平台');
// #endif

// #ifdef MP-WEIXIN
console.log('这是微信小程序平台');
// #endif

// #ifdef APP-PLUS
console.log('这是 App 平台');
// #endif

通过合理使用这些方法，可以轻松实现 UniApp 中的多端适配功能，确保应用在不同平台上表现一致。