微信小程序onload用法详解，页面加载必知技巧

说实话，我刚接触微信小程序那会儿，被onLoad坑得够呛。明明照着文档写了，页面就是白屏，数据死活不出来。后来才搞明白，onLoad这玩意儿看着简单，用起来门道多得很。今天就把我踩过的坑和总结的经验一次说清楚，保证让你少走弯路。

先得弄明白onLoad到底是干啥的。它是小程序页面的生命周期函数，页面加载时触发，而且只触发一次。注意这个"一次"，很多人就是没搞懂这个关键字，把该写在onShow里的逻辑硬塞到onLoad里，结果页面从后台切回来数据不刷新，用户骂娘你都不知道为啥。onLoad最适合干的事就三件：读取页面参数、初始化页面数据、调用首次渲染需要的接口。其他事，比如每次进入页面都要刷新的逻辑，放到onShow里去。

说到页面参数，这是onLoad最实用的功能。onLoad接收一个options参数，页面跳转时带的参数全在这。比如从商品列表页跳到详情页，URL上挂了个?id=123，你在onLoad里用options.id就能拿到。但这里有个坑——如果参数里有中文或者特殊字符，记得用decodeURIComponent转一下，不然你会看到一堆%$#@的乱码。另外，参数类型都是字符串，你要是传了个数字，得自己parseInt转成数字类型，不然做比较运算的时候会出错。

接下来是初始化数据。很多新手喜欢在data里写死一堆初始值，然后在onLoad里改。这没问题，但要注意一个细节：onLoad执行时，页面还没渲染完，这时候修改data不会触发视图更新。如果你需要根据初始数据渲染页面，最好在data里先把结构定好，onLoad里只改值。比如data里先定义userInfo: null，onLoad里再赋值，这样页面渲染时不会报错，等数据来了自动更新。

接口调用这块，我建议把请求封装成Promise，然后在onLoad里用async/await调用。但有个性能问题得注意：如果页面同时需要多个接口的数据，别写成一串await，那样是串行请求，慢得很。应该用Promise.all并行请求，等所有数据都回来再一次性setData。我见过一个页面要调三个接口，新手写成了三个await，结果加载时间翻了三倍，用户早划走了。

再来说说onLoad和onShow的关系，这俩是新手最容易搞混的。onLoad只在页面首次加载时执行一次，onShow是每次页面显示都会执行。啥意思呢？你从A页面跳到B页面，再返回A页面，A的onLoad不会重新执行，但onShow会。所以，如果页面上有依赖用户操作后更新的数据，比如购物车数量，得放onShow里刷新。但要注意，别把初始化逻辑也放onShow，不然每次显示都重新初始化，用户刚改的本地状态就被覆盖了。

还有一个隐藏技巧，很多人不知道onLoad可以配合组件使用。如果你在页面上用了自定义组件，组件的attached生命周期会先于页面的onLoad执行。这就导致一个问题：你在onLoad里拿到的数据，组件可能已经渲染完了，传过去的数据不生效。解决办法是在数据还没准备好时，先用v-if控制组件不渲染，等onLoad数据到位后再让组件渲染。这个坑我踩过好几次，每次都是组件显示空白，查半天才发现是时序问题。

说个实用的小技巧：用onLoad做页面埋点。因为onLoad只触发一次，正好可以做PV统计。但要注意，onLoad触发时页面还没完全渲染，所以埋点数据里别带DOM相关的信息。我一般会在onLoad里记录页面路径、来源参数和时间戳，然后上报。这样既不会重复统计，又能拿到完整的访问链路。

说到底，onLoad就是页面生命周期的起点，用好了能让你的小程序又快又稳。记住几个要点：只初始化一次的逻辑放这里，需要每次进入都刷新的放onShow，参数记得解码和类型转换，接口请求尽量并行。把这些搞明白，页面加载这块你就出师了。我第一次写小程序时要是有人跟我说这些，能省下好几个通宵的调试时间。