uni-app 报Bug

在使用 uni-app 开发时，可能会遇到各种各样的 Bug。为了更好地帮助你解决问题，请提供以下信息：

1. Bug 的具体描述：你遇到了什么问题？比如页面无法渲染、API 调用失败、样式异常等。
2. 代码片段：提供相关的代码片段，特别是出现问题的部分。
3. 运行环境：
   • uni-app 版本（uni-app -v）。
   • 运行平台（H5、小程序、App 等）。
   • 开发工具版本（HBuilderX 或其他工具）。
   • 相关依赖库版本（如 Vue、Vant 等）。
4. 错误信息：如果有错误日志或控制台报错信息，请提供完整内容。
5. 复现步骤：描述如何复现这个 Bug。

以下是一些常见的 uni-app Bug 及其解决方法：

1. H5 端样式异常

• 问题：在 H5 端样式表现不一致，比如布局错乱或样式失效。
• 解决方法：
  • 检查是否使用了平台特有的样式（如 nvue 样式）。
  • 使用 scoped 避免样式污染。
  • 使用 !important 强制覆盖样式。

2. 小程序端 API 调用失败

• 问题：在小程序端调用某些 API 时返回失败或未定义。
• 解决方法：
  • 确认 API 是否在小程序平台支持（如 uni.getSystemInfo）。
  • 检查小程序开发工具的权限设置。
  • 使用条件编译处理平台差异：

    #ifdef MP-WEIXIN
    // 小程序端代码
    #endif
    

3. 页面无法渲染

• 问题：页面空白或内容未显示。
• 解决方法：
  • 检查 pages.json 中的路由配置是否正确。
  • 确保页面组件已正确引入和注册。
  • 检查是否有语法错误或未处理的异常。

4. App 端白屏

• 问题：在 App 端运行时页面白屏。
• 解决方法：
  • 检查是否使用了不支持 App 的 API 或组件。
  • 确认是否开启了 nvue 模式，并检查 nvue 页面的兼容性。
  • 使用真机调试，查看控制台日志。

5. 跨域问题（H5 端）

• 问题：在 H5 端请求接口时出现跨域错误。
• 解决方法：
  • 配置后端服务器支持跨域（CORS）。
  • 使用代理解决跨域问题（在 manifest.json 中配置）：

    "h5": {
      "devServer": {
        "proxy": {
          "/api": {
            "target": "https://example.com",
            "changeOrigin": true
          }
        }
      }
    }