uni-app 多端适配

一、uni-app 多端适配概述

uni-app 是一个使用 Vue.js 开发跨平台应用的框架，能够将一套代码编译发布到多个平台，如微信小程序、支付宝小程序、百度小程序、H5、App（安卓、iOS）等。多端适配是 uni-app 的核心优势之一，但同时也带来了一些挑战和需要注意的要点。

1. 平台差异
   不同的平台在功能、UI 规范、性能特点、API 支持等方面存在差异。例如，微信小程序对某些组件的样式和行为有特定的限制，而 App 端可能有更强大的性能和更多的原生能力可调用。

2. 页面布局
   需要考虑不同屏幕尺寸和分辨率的适配，以确保页面在各种设备上都能呈现出良好的布局效果。可以使用 flex 布局、百分比布局等方式来实现自适应布局。

3. 样式适配
   不同平台的默认样式和字体大小可能不同，需要对样式进行针对性的调整。uni-app 提供了条件编译来处理不同平台的样式差异。

4. API 适配
   某些 API 在不同平台上的实现方式或可用性可能不同。uni-app 提供了统一的 API 封装，但在某些特殊情况下，可能需要针对特定平台进行单独处理。

5. 性能优化
   由于不同平台的性能表现不同，需要根据具体平台的特点进行性能优化，如减少不必要的计算、合理使用缓存等。

二、案例展示

假设我们要开发一个简单的商品列表页面，展示商品的图片、名称和价格，并支持在不同平台上的良好显示。

1. 页面结构

<template>
  <view class="container">
    <view class="goods-item" v-for="(goods, index) in goodsList" :key="index">
      <image :src="goods.image" class="goods-image" />
      <text class="goods-name">{{ goods.name }}</text>
      <text class="goods-price">{{ goods.price }}</text>
    </view>
  </view>
</template>

1. 样式

/* 通用样式 */
.container {
  padding: 20rpx;
}

.goods-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.goods-image {
  width: 200rpx;
  height: 200rpx;
}

.goods-name {
  font-size: 30rpx;
  margin-top: 10rpx;
}

.goods-price {
  font-size: 26rpx;
  color: #f00;
  margin-top: 10rpx;
}

/* 微信小程序样式调整 */
#ifdef MP-WEIXIN
.goods-name {
  font-size: 28rpx;
}

.goods-price {
  font-size: 24rpx;
}
#endif

/* App 端样式调整 */
#ifdef APP-PLUS
.goods-image {
  width: 300rpx;
  height: 300rpx;
}

.goods-name {
  font-size: 36rpx;
}

.goods-price {
  font-size: 30rpx;
}
#endif

1. 数据

export default {
  data() {
    return {
      goodsList: [
        {
          image: 'https://example.com/goods1.jpg',
          name: '商品 1',
          price: '100 元'
        },
        {
          image: 'https://example.com/goods2.jpg',
          name: '商品 2',
          price: '200 元'
        },
        // 更多商品数据
      ]
    };
  }
};

在上述案例中，我们通过条件编译来针对微信小程序和 App 端进行了样式的微调，以适应不同平台的显示效果。

以上只是一个简单的示例，实际的多端适配工作可能会更加复杂，需要根据具体的项目需求和平台特点进行更细致的处理。