刷刷题36(uniapp高级实际项目问题-1)

365 阅读2分钟

一、编译类 BUG

1. ‌微信开发者工具 Source Map 警告

现象‌:运行到微信开发者工具时控制台显示 devtools未能成功加载source map 警告‌。
解决方案‌:

  • 在微信开发者工具设置中取消勾选 Enable JavaScript source maps 选项‌。
  • 在项目根目录创建 app.json 并添加配置:
{ "lazyCodeLoading": "requiredComponents" } ‌:ml-citation{ref="2" data="citationList"}

2. ‌分包资源路径异常

现象‌:分包页面跳转时出现白屏或资源加载失败‌13。
解决方案‌:

  • 使用 getCurrentPages() 调试当前页面栈,检查跳转路径格式‌。
  • 配置 pages.json 时确保 subPackages 路径层级正确,避免与主包冲突‌。

二、运行时 BUG

1. ‌真机时间格式错误

现象‌:开发工具中 new Date().toLocaleDateString() 显示正常,真机返回异常时区格式‌。
解决方案‌:

  • 使用 uni.getSystemInfoSync().timezone 获取时区偏移量手动校准‌。
  • 改用 dayjs 或 moment 库统一处理时间格式化‌。

2. ‌输入框光标异常

现象‌:iOS 端输入框在中文输入时吞字或光标跳至末尾‌8。
解决方案‌:

  • 添加 @input 事件手动控制输入内容:
<input v-model="text" @input="handleInput" />
<script>
  handleInput(e) {
    this.text = e.detail.value; // 强制同步数据‌:ml-citation{ref="8" data="citationList"}
  }
</script>

三、多端兼容 BUG

1. ‌第三方组件库兼容性

现象‌:vant-weapp 在 H5 和小程序端 API 表现不一致‌。
解决方案‌:

  • 使用条件编译动态加载组件:
// #ifdef H5
import Picker from 'vant';
// #endif
// #ifdef MP-WEIXIN
import Picker from '@/components/wx-picker'; ‌:ml-citation{ref="5" data="citationList"}
// #endif

2. ‌页面跳转参数丢失

现象‌:uni.navigateTo 传递长参数时部分数据被截断‌。
解决方案‌:

  • 使用 Vuex 或 uni.setStorageSync 存储大数据,跳转时仅传递标识符‌1。
  • URL 参数超过 2KB 时启用 encodeURIComponent 转义‌。

四、性能相关 BUG

1. ‌Canvas 渲染卡顿

现象‌:复杂 Canvas 绘图导致页面帧率骤降‌。
解决方案‌:

  • 使用 renderjs 分离渲染逻辑到 WebWorker:
<script module="renderjs">
  export default { methods: { heavyRender() { /* ... */ } } }
</script> ‌:ml-citation{ref="7" data="citationList"}

2. ‌内存泄漏

现象‌:页面切换后未释放全局事件监听‌。
解决方案‌:

  • 在 onUnload 生命周期中清理事件:
onUnload() {
  uni.$off('customEvent'); // 移除全局事件‌:ml-citation{ref="4" data="citationList"}
}
``