微信小程序踩坑记录 ------- 解决 web-view 刷新Html页面问题

最近搞了个520活动，总得来说流程不是很复杂但还是踩到了坑，特此记录一下，帮助自己记忆也方便给有同样问题的小伙伴一个参考。

这次做的活动是将H5页面嵌套在小程序的web-view组件中，H5活动页面中涉及到一个领取优惠券的操作，但是有一个必须是手机号登录用户才可以领取的限制条件，所以流程是这样的：
1、小程序给H5传参，H5根据接口判断用户是否登录
2、如果用户没有登录H5页面通过微信 JSSDK 1.3.2 的 wx.miniProgram.navigateTo 方法跳转到小程序的手机号注册页面
3、用户完成注册后再从注册页返回到嵌套H5活动的 web-view 页面
4、用户正常领取优惠券

然而，一切都并没有想像中那么简单。

首先出现的BUB就是未注册用户前往注册，注册成功返回活动页，一切正常，但是当用户点击领取优惠券时，还会跳转到注册页，经过排查发现是因为 web-view 内的H5没有刷新从而导致判断用户登录态的接口没有重新获取数据，所以用户就会一直在领券和注册之间徘徊。。。

BUG既然已经出现，就只能各种查找资料寻觅解决方法，像什么使用wx.miniProgram.redirectTo 进行销毁页面跳转之类的就不在考虑范围了，最后发现被很多人转帖的一篇文章的原创 微信小程序–Web-View刷新Html页面（改），这个相对来说比较符合我的胃口，于是跟着文章开始尝试解决这个问题，本以为一切都会顺利解决可以收工睡觉了，没想到啊，又是一个不眠之夜。。。

这篇文章的解决思路和搜到的其他方法是差不多的，重置web-view的H5链接，从而实现页面的刷新。由于我和上述文章中的情景不一样，相对复杂一些，导致无法完全照抄，只能按照这个思路去实践了一下，没想到出现了新的状况，刷新之后的H5页面竟然凌乱了。。。

如果有其他小伙伴遇到这个问题，可以尝试下上述文章的方案看是否可行，不过我觉得相比较而言，可能我的方法更简单一些（偷笑）

最终自己琢磨出来一套解决方案，那就是通过获取当前页面栈，从而判断我需要退回去的活动页面，让其执行onLoad()方法然后再返回去

完美解决，代码如下：

注册页js代码

var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
if(prevPage.route == "pages/active/index"){
  // web-view 页面参数
  var options = {
    accessUrl: prevPage.options.accessUrl,
    paramDic: prevPage.options.paramDic
  }
  prevPage.onLoad(options);
}
wx.navigateBack({});

小程序 web-view 活动页js代码

onLoad: function (o) {
  var that = this;
  var accessUrl = o.accessUrl;
  var paramDic = o.paramDic;
  var md5Str = wx.getStorageSync('md5Str');
  // 根据所传参数，解析H5地址以及传递参数
  if(paramDic){
    var paramArr = [];
    var paramStr = '';
    paramArr = Object.entries(JSON.parse(paramDic));
    paramArr.forEach((o,index) =>{
      if(index > 0){
        paramStr = paramStr + '&' + o[0] + '=' + o[1];
      }else{
        paramStr = '?' + paramStr + o[0] + '=' + o[1];
      }
    })
    accessUrl = accessUrl + paramStr + '&md5Str=' + md5Str;
  } else {
    accessUrl = accessUrl + '?md5Str=' + md5Str;
  }
  that.setData({
    webUrl: accessUrl
  })
},

由于这一套小程序代码接口是封装了的，而手机号注册页面都是通过接口的错误码来判断跳转的，所以我这里需要判断要执行此方法的页面路径来进行相应 onLoad() 方法的执行，其中accessUrl和paramDic是我在H5页面中需要传的参数，一个是H5的链接，一个是H5链接上的参数字典，如果不传 options 参数的话，会报错哦~

如果其他小伙伴有更好的方法欢迎评论交流