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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39998026/article/details/86491608

为了实现某些效果，在小程序用了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);