记一次从公众号文章跳转小程序页面异常的问题

Posted 2023-04-16

参考技术A 自小程序的第一个版本上线快一个月了，从微信搜索使用一直没什么问题，所以以为挺稳定了，没想到昨晚我们的运营在推文中加上了小程序的链接，想从推文直接跳转至小程序首页的时候，却发现跳过去了之后页面加载异常了，表现为一片空白，死活都加载不出来数据。

由于推文中配的小程序链接只能跳转线上的小程序，并不能配置体验版本的小程序，所以只能靠推理解决这个bug。
接下来我开始了修复之旅...

首先我看了一下相关的函数，写得很简单

从入口函数来看，分了三种情况：
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。所以形式就很明朗了，只要把进入的条件写得严谨一些如：

尽量从源头制止，并把initData函数改造如下，保证有一条通路可走：

到这里，我觉得应该是没问题的了。然后提交审核啦，审核很快就通过了，然后把小程序发布上去，然后开始验证，再次从当初那篇推文进入小程序...发现Ok啦，出来数据啦

哈哈 谨记录一下这个坑！

微信公共号H5页面跳转小程序。

1、H5跳转小程序。

function myfun(){
var openid = "<?=$_SESSION[‘openid‘]?>";
wx.miniProgram.navigateTo({url:"/pages/identity/identity?openid="+openid});
}
window.onload = myfun;

2、小程序跳转H5。

<web-view src="http://www.baidu.com"></web-view>