uni-app多端应用开发：常见跨端兼容问题及处理策略

一、跨端兼容

每个端有各自的特点，有些差异可以被抹平，有些则无法完全统一。跨端开发并不是简单地将Web开发习惯迁移到所有平台，而是遵循uni-app的规范进行开发，从而实现全平台兼容。按照uni-app规范开发可以保证多平台兼容，但每个平台仍保留一些自身特性。uni-app在跨平台过程中，不牺牲平台特色，也不限制平台原生能力的使用。

在应用开发中，大约90%的常规开发，如界面组件、网络请求等API，uni-app已封装为可跨多端的统一API。而对于各个端的特色功能，uni-app引入了条件编译机制，允许开发者在一个项目中优雅地调用不同平台的专属能力。

二、条件编译

条件编译是通过特殊的注释作为标记，在编译时根据这些注释将代码编译到不同的目标平台。

支持的文件

支持条件编译的文件类型包括：.vue/.nvue/.uvue文件、.js/.uts文件、.css文件、pages.json文件，以及各种预编译语言文件，如.scss、.less、.stylus、.ts、.pug等。

注意

条件编译是利用注释实现的，在不同编程语法中注释的写法有所不同。使用时需要确保编译前和编译后文件的语法正确性，即无论条件编译是否生效，代码都能通过语法校验。

三、兼容处理

1、API兼容

1.1、选择图片的方法

实现从本地相册选择图片或使用相机拍照的功能。需要注意的是，微信小程序从基础库2.21.0开始，已停止维护wx.chooseImage，建议使用uni.chooseMedia代替。

uni.chooseMedia方法用于拍摄或从手机相册中选择图片或视频，但该方法目前在App和H5端尚未支持，因此需要进行兼容处理。在小程序端可以直接使用该方法，而在H5和APP端则需要通过其他方法进行判断和替代实现。

1.2、微信登录

1.3、微信支付

（微信登录与支付功能通常需要针对小程序端进行特定处理，确保只在相应平台生效。）

2、样式兼容

2.1、小程序端不支持*选择器

小程序端不支持CSS的通用选择器（），因此不能直接使用选择器。在编写样式时，应使用类选择器或其他具体的选择器作为替代写法。

2.2、页面视口差异（tabBar页与普通页）

小程序和APP底部的tabBar不包含在页面高度计算内，而H5端的tabBar是包含在页面高度内的。这种差异需要在样式布局时特别注意。

2.2.1、定位时的兼容

在实现定位布局时，不能简单使用固定值。针对不同平台，应使用条件编译或动态计算来适配tabBar的存在与否，确保元素定位准确。

2.2.2、上拉加载更多的高度兼容

实现上拉加载更多功能时，需要根据平台差异调整滚动区域的高度计算。在小程序和APP中，需排除tabBar高度；在H5中，则需包含tabBar高度。

2.3、H5端默认开启scoped

H5端作为单页面应用，默认启用了样式scoped以隔离页面间样式。而非H5端（如小程序和APP）默认并未启用scoped，若需要隔离组件样式，需在style标签中手动添加scoped属性。

由于H5端默认启用scoped，可能导致某些组件样式失效。解决方案是将组件样式抽离，分别在组件和页面中引入，以确保样式正确应用。

3、组件兼容

3.1、button按钮的联系客服功能

button组件的联系客服功能通常只在小程序端有效，在其他平台可能需要隐藏或替换为其他交互方式，需通过条件编译进行处理。

3.2、button按钮的获取手机号功能

button组件的获取手机号功能同样主要支持小程序端，在其他平台不具备此能力。开发时应使用条件编译确保该功能仅在小程序端生效。

四、判断平台

平台判断主要分为两种场景：编译期判断和运行期判断。

• 编译期判断：即条件编译，不同平台在编译打包后生成不同的代码。例如，特定代码块只会被编译到H5的发行包中，其他平台的包不会包含该代码。
• 运行期判断：指代码已经打入包中，在运行时动态判断当前平台。如有需要，可以在条件编译中定义平台变量并赋予不同值，以便在后续运行代码中进行动态环境判断。