需求：微信小程序使用 web-view 組件嵌入H5鏈接，從H5頁面中獲取某些數(shù)據(jù)在微信小程序頁面中進(jìn)行處理。

微信文檔中有 web—view 組件的使用方法，以及配置H5網(wǎng)頁域名的設(shè)置（https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html）；（不配置域名信任，網(wǎng)頁在真機(jī)上無法運(yùn)行）

這里直接簡單的說下微信小程序端 和 H5端 的代碼處理，以及文檔上沒有的細(xì)節(jié)說明：

微信小程序端代碼：

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

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

使用 bindmessage 接收從H5傳遞過來的數(shù)據(jù)，這個(gè)數(shù)據(jù)是以數(shù)組的形式傳遞過來的。

H5 端代碼:

H5端想要與微信小程序進(jìn)行交互，需要引入一個(gè)微信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傳遞數(shù)據(jù) （navigateBack）
wx.miniProgram.navigateBack({delta: 1});
wx.miniProgram.postMessage({
  data: {
          code: codeStr
        }
  });

傳遞的數(shù)據(jù)為 code: code，這里面的 key（code） 和 content （codeStr）都可以自定義替換成自己想要的；但是 data 層不可以去掉；
注意 navigateBack 方法 和 postMessage 方法的順序，寫反了會(huì)導(dǎo)致小程序端（bindmessage）不回調(diào)；
因?yàn)?網(wǎng)頁向小程序 postMessage 時(shí)，會(huì)在特定時(shí)機(jī)（小程序后退、組件銷毀、分享）觸發(fā)并收到消息。e.detail = { data }，data是多次 postMessage 的參數(shù)組成的數(shù)組（微信文檔）。
這種方式傳遞消息時(shí)，微信小程序會(huì)自動(dòng)返回上一個(gè)頁面，因?yàn)?H5執(zhí)行了 wx.miniProgram.navigateBack({delta: 1}); （delta: 1 返回一層）可設(shè)置返回多層；

// H5傳遞數(shù)據(jù) （navigateTo）
wx.miniProgram.navigateTo({
   url: '/pages/webLoading/webLoading?code=' + codeStr
 })

以跳轉(zhuǎn)小程序指定頁面方式傳參，讓小程序端提供頁面路徑并拼接參數(shù)跳轉(zhuǎn)過去，小程序端可在提供的頁面（ onLoad(options) {} ）中接收拼接的參數(shù)；

還有剩余的三種方式（switchTab、 reLaunch、 redirectTo）與 navigateTo 傳遞參數(shù)方式類似，大家可以自己試試效果，這里就不做說明了

部分微信版本在真機(jī)調(diào)試中，獲取不到H5端傳遞過來的數(shù)據(jù)，可以試試 預(yù)覽 模式，或者 上傳體驗(yàn)版，掃描體驗(yàn)碼看效果。