一、各端适配机制
uni-app的适配机制是一个多层次、多维度的系统，其核心目标是一套代码多端发布。为了实现这个目标，它采用了以下几种关键的适配机制：
1、框架层编译时适配（最核心）
这是uni-app最根本的适配机制，你编写的Vue组件和JS API在编译时会转成不同平台的支持格式。
组件转换
view组件
- 编译到H5端时，会被转成div
- 编译到微信小程序端时，会被转成view（小程序原生组件）
- 编译到APP端时，会被转成div 这个过程对开发者是透明的，无需关心，只需要使用uni-app提供的统一标准和API即可
2、样式响应式 rpx（响应式像素）
rpx是uni-app为解决不同屏幕尺寸适配而提出的核心单位
- 原理：以750px宽的设计稿为基准，规定屏幕总宽度为750rpx。例如：在设计稿上一个100px宽的元素转换成样式就是 width:100rpx
- 计算方式：在一个宽度为375px的物理屏幕上 1rpx = （375物理像素/750）= 0.5px。所以100rpx在这个屏幕上就是50px。在一个宽度为750px的物理屏幕上：1rpx = 1px 100rpx = 100px
- 优点：元素的宽度会随着屏幕的宽度等比缩放，极大简化了移动端的适配工作。
- 主要：在APP和小程序端 rpx的实现非常完美，在H5端其转换依赖于html元素的font-size，可能会受到浏览器的默认样式和第三方CSS库的影响，需要主要检查。
条件编译（解决非共性的问题）
当某个功能只能在特定的平台实现或者在不同平台需要不同实现时，就用到了条件编译
- 语法： 使用
#ifdef（if defined） 或#ifndef（if not defined） +平台名称作为注释符号。 - 应用范围： 可以用于 JS、CSS、模板、pages.json 甚至
manifest.json。
二、跨端兼容性处理方案
尽管有上述强大的适配机制，但在实际的开发过程中，仍然会遇到兼容性问题，处理这些问题有一套成熟的方法论
1、API兼容性判断
- 运行时判断平台：使用
uni.getSystemInfoSync().platform动态获取当前运行平台，然后执行不同逻辑。 javascript
js
const platform = uni.getSystemInfoSync().platform;
if (platform === 'android') {
// 安卓特殊逻辑
} else if (platform === 'ios') {
// iOS特殊逻辑
}- API存在性判断：在使用一个可能不存在的API先判断它是否存在 javascript
js
if (typeof uni.requireNativePlugin !== 'undefined') {
// 只有App端才存在这个方法，安全地使用它
const module = uni.requireNativePlugin('SomeNativeModule');
}2、组件兼容性处理
- 使用官方通用组件：优先使用uni-app提供的跨端通用组件（如：uni-list、uni-icons）
- 条件编译创建不同组件：对于差异巨大的组件使用条件编译为不同平台编写不同的模板结构
3、样式兼容性处理
- 使用rpx进行布局：这是首先的布局单位
- 使用Flex布局：Flex布局在各端支持度最好，表现最一致
- 主要默认样式：不同平台（尤其是H5端浏览器）的默认样式，推荐在App.vue中引入重置样式
4、遵循优雅降级原则
在设计功能时，优先考虑所以平台都能实现的基础方案，然后再为高级平台（如APP端）通过条件编译增强体验。