最近搞了个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没有刷新从而导致判断用户登录态的接口没有重新获取数据,所以用户就会一直在领券和注册之间徘徊。。。
![](https://i-blog.csdnimg.cn/blog_migrate/ed9a20aa3c3b74ed47d6c67188830b79.gif#pic_center)
BUG既然已经出现,就只能各种查找资料寻觅解决方法,像什么使用wx.miniProgram.redirectTo
进行销毁页面跳转之类的就不在考虑范围了,最后发现被很多人转帖的一篇文章的原创 微信小程序–Web-View刷新Html页面(改),这个相对来说比较符合我的胃口,于是跟着文章开始尝试解决这个问题,本以为一切都会顺利解决可以收工睡觉了,没想到啊,又是一个不眠之夜。。。
这篇文章的解决思路和搜到的其他方法是差不多的,重置web-view
的H5链接,从而实现页面的刷新。由于我和上述文章中的情景不一样,相对复杂一些,导致无法完全照抄,只能按照这个思路去实践了一下,没想到出现了新的状况,刷新之后的H5页面竟然凌乱了。。。
如果有其他小伙伴遇到这个问题,可以尝试下上述文章的方案看是否可行,不过我觉得相比较而言,可能我的方法更简单一些(偷笑)
![](https://i-blog.csdnimg.cn/blog_migrate/30cd1061462ec51b31d745c463d710e6.gif#pic_center)
最终自己琢磨出来一套解决方案,那就是通过获取当前页面栈,从而判断我需要退回去的活动页面,让其执行onLoad()方法然后再返回去
![](https://i-blog.csdnimg.cn/blog_migrate/2017d6dc646453f6d4228d2265929ab1.gif#pic_center)
完美解决,代码如下:
注册页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
参数的话,会报错哦~