微信小程序开发调试：那些让我抓狂的坑与填坑指南

微信小程序开发调试时常见卡点

大家好，我是33blog的小编。最近连续做了三个微信小程序项目，在调试环节真是踩坑踩到怀疑人生。今天就把这些血泪教训整理出来，希望能帮到正在和小程序”斗智斗勇”的你。

1. 真机调试的玄学问题

不知道你们有没有遇到过这种情况：开发工具里跑得好好的，一到真机就各种报错。上周我就被一个wx.request接口整疯了：

// 开发工具正常运行的代码
wx.request({
  url: 'https://api.example.com/data',
  success(res) {
    console.log(res.data)
  }
})

结果真机上死活报request:fail url not in domain list。原来微信要求所有请求域名必须在小程序后台配置，而且不支持通配符！解决方案：

开发阶段勾选”不校验合法域名”（但上线前一定要去掉）
正式环境务必在「开发设置」中添加所有请求域名

2. 样式兼容性噩梦

小程序号称”一次编写多端运行”，但不同机型的表现差异能让你怀疑人生。比如这个简单的flex布局：

.container {
  display: flex;
  justify-content: space-between;
}

在iOS上美如画，某些安卓机上却变成了space-around效果。我的经验是：

多用padding/margin代替space-between
真机测试要覆盖主流机型（至少iOS+3款不同品牌安卓）
遇到诡异问题先加transform: translateZ(0)试试

3. 缓存导致的灵异事件

最可怕的bug就是时有时无的bug。有次我的wx.setStorage明明执行成功了，但wx.getStorage却返回空：

wx.setStorage({
  key: 'token',
  data: 'abc123'
})

// 有时候这里取不到值！
wx.getStorage({
  key: 'token',
  success(res) {
    console.log(res.data) // 可能输出undefined
  }
})

后来发现是异步问题！解决方案：

用Promise封装存储操作
关键数据要加读写锁（可以用全局变量实现）
在onLaunch里初始化缓存

4. 自定义组件通信难题

父子组件传值用properties还好说，但兄弟组件通信就头疼了。之前用eventBus方案：

// eventBus.js
const events = {}
export default {
  on(event, callback) {
    if(!events[event]) events[event] = []
    events[event].push(callback)
  },
  emit(event, data) {
    events[event]?.forEach(cb => cb(data))
  }
}

结果发现小程序页面跳转后事件监听会泄漏！现在我的解决方案是：