小程序开发踩坑记：那些文档里没写的事

# 小程序开发踩坑记：那些文档里没写的事 ## 前言 最近做了一个微信小程序项目，踩了一堆坑。很多问题文档里根本没提到，全靠自己摸索。把这些坑记录下来，帮大家少走弯路。 ## 生命周期的坑 ### 坑1：onShow不等于页面可见 ```javascript Page({ onShow() { // 注意：从分享卡片进来也会触发onShow // 但此时页面数据可能还没初始化！ this.loadData() // 可能报错 }, onLoad(options) { // 初始化逻辑放这里 this.initPage(options) } }) ``` ### 坑2：组件的attached vs ready ```javascript Component({ lifetimes: { attached() { // DOM还没渲染，不能获取节点信息 }, ready() { // DOM已渲染，可以安全操作 this.createSelectorQuery() .select('.container') .boundingClientRect(rect => { console.log('容器高度：', rect.height) }) .exec() } } }) ``` ## setData性能优化 > 小程序最大的性能坑就是setData。数据从逻辑层传到视图层要经过序列化和反序列化，数据越大越慢。 ```javascript // 反面教材：每次更新整个列表 this.setData({ list: this.data.list // 1000条数据全部传输 }) // 正确做法：局部更新 this.setData({ 'list[999].liked': true // 只更新第999条的liked字段 }) ``` ## 组件通信 ```javascript // 父 -> 子：properties // 子 -> 父：triggerEvent // 兄弟组件：通过页面中转或用EventBus const EventBus = { events: {}, on(name, fn) { (this.events[name] || (this.events[name] = [])).push(fn) }, emit(name, data) { (this.events[name] || []).forEach(fn => fn(data)) } } ``` ## 其他坑 - `wx.navigateTo` 最多10层页面栈 - 小程序包体积限制2MB，分包加载最大20MB - `textarea` 是原生组件，层级最高，会穿透弹窗 ## 总结 小程序开发最大的坑就是文档不全，建议多看社区和GitHub issues。