刷刷题36（uniapp高级实际项目问题-1）

一、编译类 BUG

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

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

‌解决方案‌：

在微信开发者工具设置中取消勾选 Enable JavaScript source maps 选项‌。
在项目根目录创建 app.json 并添加配置：

ruby 复制代码

{ "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 事件手动控制输入内容：

typescript 复制代码

<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 表现不一致‌。

‌解决方案‌：

使用条件编译动态加载组件：

javascript 复制代码

// #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：

javascript 复制代码

<script module="renderjs">
  export default { methods: { heavyRender() { /* ... */ } } }
</script> ‌:ml-citation{ref="7" data="citationList"}

2. ‌内存泄漏‌

‌现象 ‌：页面切换后未释放全局事件监听‌。

‌解决方案‌：

在 onUnload 生命周期中清理事件：

ruby 复制代码

onUnload() {
  uni.$off('customEvent'); // 移除全局事件‌:ml-citation{ref="4" data="citationList"}
}
``