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

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

这次做的活动是将H5页面嵌套在小程序的web-view组件中,H5活动页面中涉及到一个领取优惠券的操作,但是有一个必须是手机号登录用户才可以领取的限制条件,所以流程是这样的:
1、小程序给H5传参,H5根据接口判断用户是否登录
2、如果用户没有登录H5页面通过微信 JSSDK 1.3.2wx.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() 方法的执行,其中accessUrlparamDic是我在H5页面中需要传的参数,一个是H5的链接,一个是H5链接上的参数字典,如果不传 options 参数的话,会报错哦~
如果其他小伙伴有更好的方法欢迎评论交流
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值