微信小程序+webview+vue混合开发 传值踩坑

1  在vue h5页面中调用小程序原生页面 再从原生小程序页面带参数给 h5页面 

 问题 1：原生小程序如果要传递参数给 h5  只能通过webveiw 的url 传参，然而 url 改变 会生成一条新的访问记录（这里把webveiew 当做一个浏览器）

 问题 2：问题1 产生的这条新的访问记录 只能监听到 url 的改变   vue 的   生命周期方法 都不会执行 （这里只能在vue守卫中 将url上的参数放到localStorage中，再在对应的h5页面上 监听  根据约定好的key 监听value的变化，注意  这里需要监听 自定义事件 ，自定义事件可以监听的同一个页面的localStorage 的value变化  监听 h5原生得到 storage事件 只能监听不同页面的 localStorage 变化  这里 我已经将这两个监听进行了封装 可以兼容这两种情况）

 问题 3： 因为多产生了一条h5路由记录 所以这个要回退多次（次数由你在h5页面与原生页面来回改变多少次url 决定）

解决方案： 注意： vue h5页面 除了第一个外  必须使用  this.$router.push()   跳转页面 （否则，页面有可能跳转会混乱）

1  原生webview中 onShow方法中监听参数变化拼接到URL上 

<template>
  <web-view src="{
   {h5Url}}" @message="receivePostMessage" @load="monitorLoad" @error="monitorError"></web-view>
</template>


 methods = {
    // webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
    /*   网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。
     e.detail = { data } */
    receivePostMessage: (res) => {
      console.log('-receivePostMessage-', res)
      let tokenInfo = wepy.globalData.getPostMessageByKey(res.detail.data, 'TOKEN_INFO')
      if (tokenInfo) { // h5中 postMessage token信息不为空 则覆盖小程序myUserInfo信息
        wepy.globalData.myUserInfo = tokenInfo
      }
    },
    // 网页加载成功时候触发此事件。e.detail = { src }
    monitorLoad: e => {
      console.log('-monitorLoad-', e)
      wx.hideLoading()
    },
    // 网页加载失败的时候触发此事件。e.detail = { src }
    monitorError: e => {
      console.log('-monitorError-', e)
      wx.hideLoading()
    }
  };

  onLoad(option) {
    wx.showLoading()  //开启加载webview loading 
    console.log('--option--' + JSON.stringify(option))
    this.option = option
    console.log('onLoad')
    // 超过5秒 没有加载完成h5 自动去除加载动画loading
    setTimeout(function() {
      console.log('setTimeout h5  hideLoading')
      wx.hideLoading()
    }, 5 * 1000)
  }

  onShow() {
    if (this.option) {
      this.resloveH5Url() // 监听url  及参数变化
    }
  }


// 解析 组装h5url
  resloveH5Url() {
    console.info('resloveH5Url token', wepy.globalData.myUserInfo)
    let option = this.option
    let url = decodeURIComponent(option.url)
    console.log('----url---' + url)
    if (url.indexOf(wepy.globalData.serviceConfig.webUrl) >= 0) {
      // 自家游自家小程序H5跳转 加token openId