小程序内嵌H5页面跳转至小程序页面，再返回到H5页面不刷新问题

问题描述：从小程序首页跳转至H5页面（通过webview嵌套），在H5页面点击返回小程序首页，点击小程序首页的返回按钮返回H5页面，发现页面不更新(以下解决方案按照这个最简场景进行，实际业务请根据实现方案自行调整)

解决方案一

通过更改webview嵌入的url，配合v:if实现H5页面的重载

//web.js
onShow() {
      this.url = `${要跳转的地址}`;
 }
onHide() {
      this.url = '';
 }

//web.wxml

  

缺点：会刷新整个webview

改进方案

根据进入webview页面不同的场景，更改url中的参数，让该url对应的H5页面通过监听参数值的变化来做出相应的响应

小程序相关页面代码

//小程序首页地址（自定义）
/pages/index/index

//web.wxml

  

// web.js
Page({
  data: {
     url:'',  //H5页面地址
     //判断页面是否触发了onload，如果有的话说明是跳转进来的，
    //如果没有的话说明是通过页面自带返回按钮进来的
     onload:false,
  },
  onLoad(options) {
    console.log('调用了webview页面的onLoad')
    this.setData({
      onload:true
    })
  },
  onHide(){
    console.log('调用了webview页面的hide')
    this.setData({
      onload:false
    })
  },
  onShow(){
    console.log('调用了webview页面的show')
    let onload=this.data.onload
    if(onload){
      //正常进入页面的情况，在url中拼接flag=1
      this.setData({
        url:`${要跳转的地址}/?flag=1`//我这里假设原本链接中无参数
      })
    }else{
     //通过页面自带返回，进入页面的情况，在url中拼接flag=2
      this.setData({
        url:`${要跳转的地址}/?flag=2`
      })
    }
  },
})

H5页面代码

//index.vue

h5页面和小程序页面跳转的实现方案

见：https://www.jianshu.com/p/08dbb6fbde09