微信小程序嵌入H5，从H5获取数据返回小程序页面（wx.miniProgram.postMessage）

https://www.jianshu.com/p/469d89273a3f

 

需求：微信小程序使用 web-view 组件嵌入H5链接，从H5页面中获取某些数据在微信小程序页面中进行处理。

微信文档中有 web—view 组件的使用方法，以及配置H5网页域名的设置（https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html）；（不配置域名信任，网页在真机上无法运行）

这里直接简单的说下微信小程序端 和 H5端 的代码处理，以及文档上没有的细节说明：

微信小程序端代码：

// html
<web-view src="https://*********" bindmessage="bindmessage"></web-view>

// js
 bindmessage: function (e) {
    let dataArr = e.detail.data
    console.log(dataArr);
  },

使用 bindmessage 接收从H5传递过来的数据，这个数据是以数组的形式传递过来的。

H5 端代码:

H5端想要与微信小程序进行交互，需要引入一个微信js插件库，引入方式有两种：
第一种（在需要交互的页面）：
 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

第二种：
$ npm i weixin-js-sdk

注意：第二种方式引入的库，需要在需要交互的页面声明引入

import wx from 'weixin-js-sdk';


// H5传递数据 （navigateBack）
wx.miniProgram.navigateBack({delta: 1});
wx.miniProgram.postMessage({
  data: {
          code: codeStr
        }
  });

传递的数据为 code: code，这里面的 key（code） 和 content （codeStr）都可以自定义替换成自己想要的；但是 data 层不可以去掉；
注意 navigateBack 方法 和 postMessage 方法的顺序，写反了会导致小程序端（bindmessage）不回调；
因为 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组（微信文档）。
这种方式传递消息时，微信小程序会自动返回上一个页面，因为 H5执行了 wx.miniProgram.navigateBack({delta: 1}); （delta: 1 返回一层）可设置返回多层；

// H5传递数据 （navigateTo）
wx.miniProgram.navigateTo({
   url: '/pages/webLoading/webLoading?code=' + codeStr
 })

以跳转小程序指定页面方式传参，让小程序端提供页面路径并拼接参数跳转过去，小程序端可在提供的页面（ onLoad(options) {} ）中接收拼接的参数；

还有剩余的三种方式（switchTab、 reLaunch、 redirectTo）与 navigateTo 传递参数方式类似，大家可以自己试试效果，这里就不做说明了

部分微信版本在真机调试中，获取不到H5端传递过来的数据，可以试试 预览 模式，或者 上传体验版，扫描体验码看效果。