h5如何使用navigateBack回退到微信小程序页面并携带参数

前言

在h5中使用navigateBack回退到微信小程序页面很常见，但是有一种交互需要在回退之后的页面可以得到通知，拿到标识之后，进行某些操作，这样的话，由于微信官方并没有直接提供这样的api，就需要我们开动脑筋曲线救国一下：navigateBack + postMessage

前置资源引入jssdk

微信端

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

备注：支持使用 AMD/CMD 标准模块加载方法加载。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

支付宝端

支付宝小程序可以使用 webview 承载一个 H5 页面，但是不能在 webview 中直接调起支付，需要引入支付宝的  https://appx/web-view.min.js （此链接仅支持在支付宝客户端内访问）文件。

  <script>
    if (navigator.userAgent.indexOf('AlipayClient') > -1) {
      document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
    }
  </script>

核心代码

H5页面

// 方法封装
export function navigateBackJumpParams(paramObj) {
  if (typeof window.my !== 'undefined') {
    // 支付宝小程序
    window.my.postMessage({
      data: JSON.stringify(paramObj)
    })
    window.my.navigateBack({ delta: 1 })
  } else {
    // 小程序
    window.wx.miniProgram.postMessage({
      data: JSON.stringify(paramObj)
    })
    window.wx.miniProgram.navigateBack({ delta: 1 })
  }
}

// 场景触发
 const paramObj = {
     couponSelectFlag: false,
     pageFromKey: "confirmOrderCouponListKey"
 }
 navigateBackJumpParams(paramObj)

1、支付宝小程序使用window.my对象；微信小程序使用window.wx.miniProgram对象

2、发送消息的方式是调用postMessage方法，该方法接受一个对象作为参数，参数必须使用固定字段【data】；paramObj 必须是一个 JavaScript 对象，否则无法使用 JSON.stringify 函数将其转换为 JSON 字符串。

3、回退到当前小程序页面是调用navigateBack函数，该方法接受一个对象作为参数，delta表示返回的页面数，如果 delta 大于现有页面数，则返回到首页。

微信项目中

承载网页的容器 - web-view

// template
<web-view
   wx:if="{{ url }}"
   src="{{ url }}"
   bindmessage="getMessageFromHTML"
   binderror="handleWebViewError"
></web-view>

// methods
async getMessageFromHTML(e) {
        if(e.detail?.data) {
          const postMessageInfo = Array.isArray(e.detail.data)
              ? e.detail.data[0] || ''
              : e.detail.data || ''
          let postMessageInfoParse = {}
          try {
            postMessageInfoParse = postMessageInfo ? 
            JSON.parse(postMessageInfo) : {}
          } catch (error) {
            postMessageInfoParse = postMessageInfo
          }
          // 获取与h5页面商定的事件名称逻辑
          if(postMessageInfoParse.pageFromKey === 'confirmOrderLslCouponList' && postMessageInfoParse.couponSelectFlag) {
            EventBus.emit('confirmOrderLslQueryEstimate', {
              couponSelectLslFlag: true
            })
            return
          }
}

在微信小程序环境，getMessageFromHTML(e){}中对象e的数据结构如下：

注意e.detail.data是数组类型

{
    "type":"message",
    "target":{
        "dataset":{

        },
        "id":"",
        "offsetTop":0,
        "offsetLeft":0
    },
    "currentTarget":{
        "dataset":{

        },
        "id":"",
        "offsetTop":0,
        "offsetLeft":0
    },
    "timeStamp":7425,
    "detail":{
        "data":[
            "{\"couponSelectFlag\":false,\"pageFromKey\":\"confirmOrderCouponListKey\"}"
        ]
    }
}

在支付宝小程序环境，getMessageFromHTML(e){}中对象e的数据结构如下：

注意e.detail.data是对象类型

{
    "type":"message",
    "timeStamp":1700737905792,
    "target":{
        "id":"appx-native-component-1",
        "tagName":"web-view",
        "dataset":{

        },
        "targetDataset":{

        }
    },
    "currentTarget":{
        "id":"appx-native-component-1",
        "tagName":"web-view",
        "dataset":{

        }
    },
    "detail":{
        "data":"{\"couponSelectFlag\":false,\"pageFromKey\":\"confirmOrderCouponListKey\"}"
    }
}

使用页面的监听

// confirmOrderLslQueryEstimate是web-view发出的事件名称
async attached() {
      EventBus.on('confirmOrderLslQueryEstimate', (data) => {
        // doing 监听到该事件时，页面具体做的操作
      })
}

// 组件的页面生命周期-监听页面卸载
detached() {
      EventBus.un('confirmOrderLslQueryEstimate')
},