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

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

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

哈哈谨记录一下这个坑！