uniapp + vue3 + h5 开发实战经验分享

在 UniApp + Vue 3 + H5 开发中，以下实战经验可提升开发效率和体验：

1. 环境与配置

• Vue 3 组合式 API：利用 setup() 或 <script setup> 简化逻辑复用，减少代码量。
• UniApp 配置：在 manifest.json 中启用 H5 路由（如 hash 模式），并配置 publicPath 适配部署路径。

2. 跨端兼容性

• 条件编译：使用 #ifdef H5 处理 H5 特有逻辑，避免端差异问题。
• API 封装：对 uni API（如路由、存储）做统一封装，便于 H5 替换或扩展。

3. 性能优化

• 懒加载与分包：H5 端通过 vue-router 实现路由懒加载，减少首屏资源。
• 图片优化：使用 WebP 格式，并通过 uni.compressImage 压缩图片。
• 避免阻塞渲染：将复杂计算移至 Web Worker 或使用 nextTick 分批处理。

4. 路由与导航

• Vue Router 集成：在 H5 端可结合 vue-router 实现更灵活的路由管理（需条件编译）。

  // 条件编译示例
  #ifdef H5
  import { createRouter } from 'vue-router';
  const router = createRouter({ /* 配置 */ });
  #endif
  

5. 状态管理

• Pinia 推荐：轻量且兼容 Vue 3，替代 Vuex。

  // store 示例
  import { defineStore } from 'pinia';
  export const useMainStore = defineStore('main', {
    state: () => ({ count: 0 }),
    actions: {
      increment() { this.count++; }
    }
  });
  

6. UI 与适配

• 响应式单位：使用 upx 或 rpx 自动转换，或通过 postcss 插件适配 H5 视口。
• 组件库选择：优先支持 Vue 3 的库（如 uni-ui），注意 H5 样式兼容。

7. 常见问题

• 白屏问题：检查路由配置或公共路径，使用 vue-devtools 调试。
• API 限制：H5 端部分能力（如推送）需通过浏览器 API 实现。

8. 调试与部署

• H5 真机调试：用 nginx 本地服务测试，注意跨域和处理 https。
• 自动化部署：通过 CI/CD 工具打包并上传至服务器。

总结：聚焦 Vue 3 响应式优势，结合 UniApp 跨端能力，通过条件编译和性能优化平衡多端体验。