小程序开发这 4 个坑,每一个我都替你踩过了

前言

最近做了一个小程序上线了,叫青萍语音,发现有些坑不是技术多难,而是压根没想到。

功能写完了、测试通过了、提审也过了,上线之后才慢慢踩出来一些小细节。

今天就聊聊我总结的 4 个坑,希望能帮你提前避开。

新页面忘了配分享

小程序的分享不是全局默认开启的,每个页面需要单独写 onShareAppMessage 才能用右上角转发。

如果你只在首页加了分享,用户进入某个详情页想转发给朋友,会发现转发按钮是灰的。

很多人在这里卡住,不是因为不会写,而是新建页面时压根忘了加。

建议养成习惯:每次新建页面,先把 onShareAppMessageonShareTimeline 补上。

1
2
3
4
5
6
onShareAppMessage() {
return {
title: '页面标题',
path: '/pages/detail/detail?id=' + this.data.id
}
}

分享路径别忘了带参数,不然别人点开链接只能看到空白页。

分包页面的路径还要加上分包 root 前缀,比如 packageOrder/pages/order/detail,少了前缀分享出去打不开。

没做版本更新检查,用户还在用旧版

你发布了新版本,但用户打开的可能还是旧的。

微信的更新机制是这样的:冷启动时异步检查更新,发现新版本会在后台下载。

但本次启动仍然使用旧版本,要等下一次冷启动才会生效。

也就是说你修了个 bug 发了新版,用户当天打开还是旧的。

微信官方文档也说了,全量发布后需要 24 小时才能覆盖 99% 以上的用户。

解决办法是在 app.jsonLaunch 里加上版本更新检查,发现有新版本就弹窗提示用户重启。

1
2
3
4
5
6
7
8
9
10
11
12
13
const updateManager = wx.getUpdateManager()

updateManager.onUpdateReady(() => {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启?',
success(res) {
if (res.confirm) {
updateManager.applyUpdate()
}
}
})
})

这几行代码能让用户第一时间用上新版本,上线后紧急修 bug 特别管用。

图片视频塞包里,超过 200K 直接报错

小程序对本地资源有严格限制:代码包内单个文件不能超过 200K。

这个限制很多人不知道,直到上传时被开发者工具拦下来才意识到。

一张压缩过的图片轻松超过 200K,更别说音频和视频了。

如果把它们放在代码包里,要么上传失败,要么白白占用主包空间拖慢加载。

正确做法是把所有图片、音频、视频上传到 OSS 对象存储,再通过 CDN 加速访问,代码里用完整的 https 链接引用。

OSS 负责存储文件,CDN 负责把文件缓存到离用户最近的节点,两者配合才能既存得下又跑得快。

改资源也不用重新提审,直接换 OSS 上的文件,CDN 刷新后用户就能拿到最新的。

大模块不分包,主包超 2MB 上传不了

小程序主包体积上限是 2MB,所有分包加起来不超过 30MB。

功能越做越多,代码全堆在主包里,迟早会撞上 2MB 这堵墙,提审时直接被拒。

分包就是把较大的功能模块拆出去,用户进入这些页面时才下载对应的代码。

比如电商小程序,可以把订单管理、会员中心拆成独立分包,主包只保留首页和核心页面。

青萍语音也是一样的思路,配音学院和合作入驻内容多、逻辑独立,同样适合拆成独立分包。

主包只保留首页和核心的语音合成页面,用户进入配音学院或合作入驻时才下载对应代码。

app.json 里配置分包:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"subpackages": [
{
"root": "packageAcademy",
"pages": [
"pages/academy/list",
"pages/academy/detail"
]
},
{
"root": "packagePartner",
"pages": [
"pages/partner/apply",
"pages/partner/info"
]
}
]
}

主包瘦身之后,首屏打开速度明显更快,用户也只下载实际用到的部分。

分包还有个隐性好处:团队协作时各管各的模块,合并冲突少很多。

你做小程序时还踩过哪些坑?

有没有遇到过上线之后才发现的问题?

评论区聊聊你的经历,说不定能帮到正在踩坑的人。