uniapp如何用两套代码适配pc和移动端

在uniapp中如何同时维护两套代码分别适配PC端和移动端？目前项目需要兼容两种设备，但直接通过响应式布局难以满足复杂交互需求。想了解具体实现方案，例如：

  1. 是否需要创建两个独立工程？
  2. 如何通过条件编译区分不同平台的代码？
  3. 路由和组件应该如何组织才能高效复用公共逻辑？
  4. 是否有成熟的目录结构方案可以参考？
2 回复

使用条件编译实现。在pages.json中配置不同平台的页面路径，代码中通过#ifdef H5和#ifdef APP-PLUS等条件编译指令区分平台，编写适配代码。


在 UniApp 中，可以通过条件编译和动态适配来实现一套代码同时支持 PC 和移动端。以下是具体方法：

1. 条件编译

使用 #ifdef 和 #ifndef 区分平台，编写不同代码：

// 在 JS 中
// #ifdef H5
console.log('在 H5 平台执行');
// 可添加 PC 端特定逻辑
// #endif

// #ifdef APP-PLUS || MP-WEIXIN
console.log('在移动端执行');
// #endif

在样式中也可使用条件编译：

/* 在 CSS 中 */
/* #ifdef H5 */
.container {
  width: 1200px; /* PC 宽屏样式 */
}
/* #endif */

/* #ifndef H5 */
.container {
  width: 100%; /* 移动端样式 */
}
/* #endif */

2. 动态适配布局

  • 使用 Flex/Grid 布局：结合媒体查询实现响应式。
.container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* PC 横向布局 */
  }
}
  • JS 检测屏幕尺寸：
export default {
  data() {
    return {
      isPC: false
    }
  },
  onLoad() {
    this.checkScreen();
    window.addEventListener('resize', this.checkScreen);
  },
  methods: {
    checkScreen() {
      this.isPC = window.innerWidth >= 768; // 根据宽度判断
    }
  }
}

3. 页面结构适配

在模板中使用 v-if 或条件 class：

<template>
  <view :class="['layout', isPC ? 'pc-style' : 'mobile-style']">
    <view v-if="isPC">PC 专属内容</view>
    <view v-else>移动端内容</view>
  </view>
</template>

4. 构建配置

在 manifest.json 中针对 H5 配置：

"h5": {
  "template": "pc.html", // 可自定义 PC 模板
  "optimization": {
    "treeShaking": {
      "enable": true
    }
  }
}

注意事项：

  • 优先移动端设计：UniApp 本质是移动端框架，PC 适配需额外处理。
  • 测试多端：确保 H5、小程序、App 表现一致。
  • 性能优化：避免过多条件编译增加包体积。

通过以上方法，可高效实现 PC 与移动端适配，减少重复开发工作量。

回到顶部