自小程序的第一个版本上线快一个月了，从微信搜索使用一直没什么问题，所以以为挺稳定了，没想到昨晚我们的运营在推文中加上了小程序的链接，想从推文直接跳转至小程序首页的时候，却发现跳过去了之后页面加载异常了，表现为一片空白，死活都加载不出来数据。
image.png
由于推文中配的小程序链接只能跳转线上的小程序，并不能配置体验版本的小程序，所以只能靠推理解决这个bug。
接下来我开始了修复之旅...
首先我看了一下相关的函数，写得很简单
onLoad(options) {
//记为第一种情况
if (!Utils.checkEmpty(options)) { //从选择城市页面跳回来带参数
this.initData(options)
return false
}
//记为第二种情况
if (!Utils.checkEmpty(wx.getStorageSync('project_data'))) { // 如果有缓存
this.initData(wx.getStorageSync('project_data'))
return false
}
//记为第三种情况
this.getData() // 正常获取数据
},
methods: {
initData(data) {
this.city = data.city
this.city_id = data.city_id
if (data.flag == 0) {
this.getData()
}
if (data.flag == 1) { // 定位失败
this.failData.status = 1
this.showFail = true
}
if (data.flag == 2) { // 未开启定位
this.failData.status = 2
this.showFail = true
}
},
async getData() {
try {
Utils.showLoading()
let params = {
cityId: this.city_id
}
let list = await Project.getProjectList(params)
this.projects = [...list.projects]
wx.setStorage({
key: 'project_data',
data: {
flag: '0',
city: this.city,
city_id: this.city_id,
}
})
Utils.hideLoading()
} catch (e) {
Utils.hideLoading()
Utils.showToast(e.message)
}
}
}
从入口函数来看，分了三种情况：
1：从城市列表跳转过来的时候会携带一些参数，例如城市id等。这种情况会先进入initData() 函数进行一些初始化。
2：如果页面有缓存数据，也会先进入initData() 函数。
3：如果是从微信直接进入小程序，并且没有过缓存，我把这种情况当作最初始的一种情况，这时候就正常地走获取数据流程，即直接调用getData() 函数获取数据。
解决思路：
1、首先根据页面加载的时候没有出现loading，那么程序并没有执行 getData() 函数。所以肯定不是一开始就执行 this.getData()。
2、清除缓存，移除小程序，再次进入小程序，仍然出现一片空白，那么知道并不是因为缓存问题，所以也排除第二种情况。
3、至于第一种情况，我是比较认同的。因为当初我只是想到从微信直接打开小程序的场景，却忽略了从公众号推文（甚至别的渠道）进入的场景。据我之前开发公众号的经验推测，从推文进入的时候微信极大可能会在url上携带一些乱七八糟的参数，这些参数正符合第一种情况的条件，进而进入了this.initData(options)。
4、来看data.flag 的值，如果等于0，那么调用this.getData()，已知this.getData()并没有被执行，所以data.flag 不等于0；如果 this.showFail = true 的话，那么会显示一个失败页，但页面是空白的，并没出现失败页，由此可知data.flag 并不等于1 或者 2。接下来没有路可走了，所以会出现空白页，这就说得过去了。
5、之所以会进入initData()函数，上面提过是别的微信自动加入的参数导致的，这些参数并不是我需要的（比如很关键的一个参数flag），但是却阴差阳错地成为了进入initData()函数的充分条件，此时flag 应该是undefined。所以形式就很明朗了，只要把进入的条件写得严谨一些如：
if (!Utils.checkEmpty(options) && options.flag){...}
尽量从源头制止，并把initData函数改造如下，保证有一条通路可走：
initData(data) {
this.city = data.city
this.city_id = data.city_id
if (data.flag == 0) {
this.getData()
} else if (data.flag == 1) { // 定位失败
this.failData.status = 1
this.showFail = true
} else if (data.flag == 2) { // 未开启定位
this.failData.status = 2
this.showFail = true
} else {
this.getData() // 保证有路可走
}
}
到这里，我觉得应该是没问题的了。然后提交审核啦，审核很快就通过了，然后把小程序发布上去，然后开始验证，再次从当初那篇推文进入小程序...发现Ok啦，出来数据啦
image.png
哈哈 谨记录一下这个坑！
网友评论