从零到上线：微信小程序开发的核心代码与实战技巧

上个月帮一个朋友救火，他的小程序上线三天就崩了，原因居然是登录逻辑里少写了一个判断——用户拒绝授权后，代码仍然傻乎乎地调接口。这种情况在微信小程序开发里太常见了。我做了五年小程序开发，踩过的坑比代码行数还多。今天想跟你聊聊从零到上线的过程中，那些真正能用的代码和实战技巧。

先说注册和登录这块。很多新手一上来就写 `wx.login`，然后拿 code 去换 openid。但你想过没有，用户点“拒绝”按钮时怎么办？我见过最离谱的写法是直接把用户踢回首页，让他重新点登录。正确的做法是先调 `wx.getSetting`，看看用户之前有没有授权。如果没授权，弹个自定义的引导框，告诉用户“我们需要你的头像和昵称才能展示个人主页”，而不是直接使用微信官方的授权弹窗。代码很简单，但用户体验天差地别。我的项目里，用这套逻辑后，授权通过率从 62% 提升到 89%。

接下来是页面跳转和数据传递。微信小程序的页面栈最多十层，超过就会报错。很多人习惯用 `wx.navigateTo` 一层层堆，结果用户点了几下就卡死了。我的做法是：列表页到详情页用 `navigateTo`，详情页返回列表页用 `navigateBack`，首页和 Tab 页之间用 `switchTab`。数据传递更讲究，尽量不要用全局变量存数据，页面一关数据就丢了。可以用页面栈的 `options` 传参，或者用 `EventChannel` 通信，这样页面销毁后数据也会随之释放，不会造成内存泄漏。曾经排查一个白屏问题时，发现是全局变量里存了个大数组没清理，用户来回切换页面几次，内存直接飙到 200 MB。

再说网络请求这块。微信小程序的 `request` 有并发限制，同一域名最多 10 个。很多人觉得无所谓，但首页需要同时加载五六个接口时，你就会感受到排队等待。我习惯用 `Promise.all` 把不依赖的接口并行发起，然后用统一的 loading 状态管理。还有一种情况是接口报错，很多人的做法是直接弹 toast “网络错误”，用户一看懵了。更好的做法是区分错误类型：401 跳登录页，500 展示重试按钮，网络断开时提示检查网络。我写过一个请求拦截器，所有接口都走它，错误处理统一写在一个地方，代码量减少了一半。

列表渲染也是容易出坑的地方。微信小程序的 `setData` 是异步的，而且有性能瓶颈。如果一次性 `setData` 一个 1000 条数据的数组，页面会卡得不要不要的。我的做法是分页加载，每次加载 20 条，上拉触底时再追加。但这里有个坑：上拉触底事件会连续触发，如果不做好节流，用户快速滑动几下，接口会被调好几次。我用了一个锁变量，请求未结束前直接 `return`。另外，列表项的 `key` 必须绑定唯一标识，不能用 `index`，否则列表排序变化时会导致整页重绘。测试表明，用 `id` 做 `key` 的性能比用 `index` 提升约 40%。

表单处理同样是重灾区。微信小程序的 `input` 组件有个坑：如果在 `bindinput` 里实时更新数据，用户打字快时光标会乱跳。原因是每次 `setData` 都会触发重新渲染，导致光标位置丢失。解决办法是使用 `model:value` 双向绑定，或者用防抖函数，等用户停止输入 300 毫秒后再更新数据。表单校验也不要只在提交时校验一次。我习惯在用户输入时就进行校验，比如密码强度、手机号格式，并在输入框下方实时显示提示文字。这样用户提交时几乎不会出错，体验好很多。我的项目里，用这种方式后，表单提交失败率从 15% 降到 2%。

图片上传和预览也是技术活。微信小程序的 `chooseImage` 一次只能选 9 张，但很多业务需要用户上传更多。我会先选一张上传，成功后显示缩略图，再让用户继续选择，这样不会一次性占用太多带宽。上传时要注意图片压缩，官方提供的 `sizeType` 参数可以选 `compressed`，但压缩率不一定够。我通常自己写压缩函数，把图片宽度限制在 800 px 以内，质量压缩到 80%，这样图片大小能控制在 200 KB 左右，上传速度快，用户体验好。预览时使用 `wx.previewImage`，传入当前图片的 URL 和所有图片的 URL 列表，用户就能左右滑动查看。

小程序和 WebView 的交互也容易踩坑。很多小程序里嵌了 H5 页面，需要互相传数据。最常见的问题是 H5 页面怎么把数据传给小程序？有人用 URL 参数拼接，结果参数太长被截断。正确的做法是用 `postMessage`，H5 通过 `wx.Message` 发送数据，小程序在 `bindmessage` 事件里接收。但这个事件只在特定时机触发，比如页面返回、分享、组件销毁时。如果想让数据实时传递，得用 WebSocket 或定时轮询。我的项目里采用折中方案：关键操作时 H5 调用 `postMessage`，小程序收到后更新页面状态，其他非关键数据则每 5 秒通过定时器同步一次。

说说上线前的检查。很多人觉得代码写得差不多就直接上传审核，结果被拒了好几次。我列个清单：第一，检查所有图片和资源是否都用了 CDN 地址，避免本地图片导致包体积超标。第二，检查所有接口是否都加了异常处理，特别是登录态过期的情况。第三，检查页面是否能正常回退，避免死循环跳转。第四，检查是否有未授权的隐私接口调用，比如用户未同意就调了 `getLocation`。第五，检查 `console.log` 是否全部删除，虽然不影响功能，但会拖慢性能。上次上线前漏了一个 `console.log`，结果在低端手机上页面加载慢了约 300 毫秒。

从零到上线，看似只是在写代码，实际上更多是在处理各种边界情况和用户预期。微信小程序开发说难不难，但想做得细腻，每个细节都得打磨。那些踩过的坑、写过的烂代码，都是宝贵的经验。记住一句话：用户不会在意你用了多牛的技术，但他们一定会记住使用时有多顺手。