微信小程序适配技巧

微信小程序适配技巧

微信小程序开发中，适配不同设备屏幕是常见需求。uni-app作为跨端框架，提供了多种适配方案，开发者需要根据项目特点选择合适方式。

视口单位适配

使用rpx单位是微信小程序推荐的适配方案。rpx根据屏幕宽度进行自适应，规定屏幕宽度为750rpx。

// 示例：使用rpx定义元素尺寸
<view style="width: 750rpx; height: 200rpx; background-color: #f0f0f0;"></view>

实际开发中需要注意：

1. 设计稿通常以750px宽度为标准
2. 1px设计稿尺寸 = 1rpx
3. 字体大小建议同时使用px和rpx作为后备方案

/* 字体大小适配示例 */
.text {
  font-size: 28rpx;
  font-size: 14px; /* 兼容方案 */
}

Flex布局适配

Flex布局能有效解决不同尺寸屏幕下的元素排列问题。

<!-- 示例：Flex横向排列适配 -->
<view class="container">
  <view class="item">Item 1</view>
  <view class="item">Item 2</view>
  <view class="item">Item 3</view>
</view>

/* 对应样式 */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.item {
  flex: 1;
  text-align: center;
}

条件编译处理平台差异

uni-app支持条件编译，可针对微信小程序做特殊处理。

// 示例：平台条件编译
// #ifdef MP-WEIXIN
console.log('这段代码只在微信小程序中执行');
wx.showToast({
  title: '微信专属提示'
});
// #endif

安全区域适配

全面屏手机需要考虑底部安全区域，使用env(safe-area-inset-bottom)。

/* 安全区域适配示例 */
.page {
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

图片适配技巧

图片适配可采用以下方案：

1. 使用mode属性控制图片显示方式
2. 网络图片使用CDN并配合尺寸参数
3. 本地图片使用多倍图方案

<!-- 图片适配示例 -->
<image 
  src="/static/logo.png" 
  mode="widthFix"
  style="width: 100%;"
></image>

字体大小动态调整

对于需要动态调整字体大小的场景：

// 计算适合当前屏幕的字体大小
function getFontSize(baseSize) {
  const systemInfo = uni.getSystemInfoSync();
  const scale = systemInfo.windowWidth / 375; // 以375px设计稿为基准
  return Math.round(baseSize * scale);
}

组件尺寸动态计算

复杂布局可能需要动态计算组件尺寸：

// 示例：动态计算九宫格尺寸
export default {
  data() {
    return {
      gridSize: 0
    }
  },
  mounted() {
    this.calculateGridSize();
  },
  methods: {
    calculateGridSize() {
      const systemInfo = uni.getSystemInfoSync();
      const screenWidth = systemInfo.windowWidth;
      this.gridSize = (screenWidth - 40) / 3; // 减去边距后三等分
    }
  }
}

横竖屏适配

处理设备方向变化时需要监听事件：

// 横竖屏适配示例
onLoad() {
  uni.onWindowResize((res) => {
    console.log('窗口尺寸变化', res.size);
    this.handleLayoutChange();
  });
},
methods: {
  handleLayoutChange() {
    const systemInfo = uni.getSystemInfoSync();
    if (systemInfo.windowWidth > systemInfo.windowHeight) {
      // 横屏布局
    } else {
      // 竖屏布局
    }
  }
}

高分辨率设备适配

针对Retina等高分辨率设备：

/* 2倍图适配 */
.icon {
  width: 50rpx;
  height: 50rpx;
  background-image: url('/static/icon@2x.png');
  background-size: 100% 100%;
}

/* 通过媒体查询适配更高分辨率 */
@media (-webkit-min-device-pixel-ratio: 3) {
  .icon {
    background-image: url('/static/icon@3x.png');
  }
}

导航栏自定义适配

自定义导航栏需要考虑状态栏高度：

// 获取导航栏所需高度
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
const navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;

多语言布局适配

不同语言文本长度差异可能导致布局问题：

/* 多语言文本容器 */
.text-container {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

主题切换适配

支持主题切换时需要动态样式：

// 动态主题示例
data() {
  return {
    themeStyle: {
      '--primary-color': '#007aff',
      '--bg-color': '#ffffff'
    }
  }
},
methods: {
  changeTheme(dark) {
    if (dark) {
      this.themeStyle = {
        '--primary-color': '#0a84ff',
        '--bg-color': '#1c1c1e'
      };
    } else {
      this.themeStyle = {
        '--primary-color': '#007aff',
        '--bg-color': '#ffffff'
      };
    }
  }
}

/* 使用CSS变量 */
.page {
  background-color: var(--bg-color);
  color: var(--primary-color);
}

性能优化适配

适配时需注意性能影响：

1. 避免频繁使用calc()
2. 减少不必要的重绘回流
3. 对复杂计算结果进行缓存

// 缓存计算结果示例
let cachedSize = null;

function getAdaptiveSize() {
  if (!cachedSize) {
    const systemInfo = uni.getSystemInfoSync();
    cachedSize = systemInfo.windowWidth / 750 * 100;
  }
  return cachedSize;
}

设备API差异处理

不同设备API能力存在差异：

// 安全调用设备API
function safeGetSystemInfo() {
  return new Promise((resolve) => {
    if (typeof uni.getSystemInfo === 'function') {
      uni.getSystemInfo({
        success: resolve,
        fail: () => resolve(null)
      });
    } else {
      resolve(null);
    }
  });
}

复杂交互适配

对于复杂交互场景，可使用CSS变量动态控制：

// 动态控制交互元素
data() {
  return {
    interactiveStyle: {
      '--scale-factor': 1,
      '--translate-y': '0'
    }
  }
},
methods: {
  handleTouchStart(e) {
    this.interactiveStyle['--scale-factor'] = 0.95;
  },
  handleTouchEnd(e) {
    this.interactiveStyle['--scale-factor'] = 1;
  }
}

.interactive-element {
  transform: scale(var(--scale-factor)) translateY(var(--translate-y));
  transition: all 0.2s ease;
}