微信小程序> mpvue开发笔记,关于webview改变src路径刷新页面,回退时要点两次或者两次以上才能返回到上一个小程序页面

mpvue开发笔记,关于webview改变src路径刷新页面,回退时要点两次或者两次以上才能返回到上一个小程序页面

浏览量:458 时间: 来源:卿本无忧

为了实现某些效果,在小程序用了web-view组件来显示HTML页面

web-view :src="src"/web-view

HTML页面点击按钮跳回小程序页面

$(".msg-edit").click(function(){ if(window.__wxjs_environment === 'miniprogram'){    wx.miniProgram.navigateTo({url: url});    //跳回小程序需要显示的页面路径 }else{   alert("请在微信浏览器里打开"); }});

在小程序页面执行完某些操作后用使用navigateBack回到web-view所在的页面,但由于浏览器的缓存原因,返回到web-view页面之后并不会刷新页面,就不能到达我要的效果

wx.navigateBack({    delta:1})

为了达到我要的效果,我在web-view所在的页面的onShow方法里改变了HTML的路径,达到了刷新页面的效果,但这也导致出现了另一个问题,如果点击小程序左上角的回退按钮,需要点两次或者两次以上才能回到上一个小程序页面

onShow(){      this.src='http://127.0.0.1:63342/familyTree/familyTree.html?&date='+new Date().getTime();}

为了解决这个问题,我到处百度,但可能由于我用的mpvue,所以并没有找到什么有用的方法,所以只能自己瞎琢磨。然后突然想到或许一开始的回退按钮是浏览器的回退按钮,因为改变了路径,所以第一次点击回退的时候它就回到了上一次的路径页面,路径改变了多少次,就要点击多少次返回按钮才能回到上一个小程序页面,所以我就在HTML页面监听浏览器的回退事件,在他点击回退按钮时,强制让他跳回上一个小程序页面。

// 监听浏览器回退事件的方法window.addEventListener("popstate", function(e) {   console.log('我监听到了浏览器的返回按钮事件啦');   //在点击回退按钮时,直接跳转到上一个小程序页面    wx.miniProgram.navigateBack({       delta:1    });}, false);

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎