UniApp 的跨端兼容

跨端兼容通过条件编译实现，针对不同平台编写差异化代码：

条件编译语法

<!-- 平台特有代码块 -->
#ifdef 平台标识
<!-- 仅在指定平台编译 -->
#endif

#ifndef 平台标识
<!-- 除指定平台外均编译 -->
#endif

常用平台标识

• H5：Web 端
• MP-WEIXIN：微信小程序
• MP-ALIPAY：支付宝小程序
• MP-BAIDU：百度小程序
• MP-TOUTIAO：字节跳动小程序
• APP-PLUS：App 端（iOS/Android）
• MP：所有小程序平台通用
• APP-PLUS-NVUE：App 端 nvue 页面

多端兼容进阶技巧

1. 样式隔离：使用 scoped 或平台特定样式文件（如 page.vue 对应 page.h5.vue）
2. API 适配：封装统一接口适配层，处理平台 API 差异

   // api-adapter.js
   export const request = (options) => {
     #ifdef H5
     // H5 端特殊处理
     #endif
     return uni.request(options)
   }

3. 组件适配：通过 components 目录按平台拆分组件，如 components/button/button.vue 与 components/button/button.mp-weixin.vue