在微信小程序里，webviewH5向miniProgram通訊只能通過(guò)postMessage函數(shù)

然而這個(gè)函數(shù)卻很雞肋，小程序官方文檔是這樣描述的：向小程序發(fā)送消息，會(huì)在特定時(shí)機(jī)（小程序后退、組件銷(xiāo)毀、分享）觸發(fā)組件的message事件

而且小程序官方文檔里沒(méi)有提到miniProgram如何向webviewH5通訊

在這個(gè)demo中, 展示了我是如何讓webviewH5和miniProgram互相通訊

其實(shí)原理很簡(jiǎn)單:

• webviewH5 --> miniProgram

  • 通過(guò)js調(diào)用微信JSSDK的wx.miniProgram.navigateTo方法跳轉(zhuǎn)到小程序的指定頁(yè)面并且把參數(shù)當(dāng)做query帶給小程序原生頁(yè)面

• miniProgram --> webviewH5

  • webview組件存在一個(gè)src屬性, 用于展示指定的h5頁(yè)面,
  • webview組件上的src屬性如果只是改變了hash值, 當(dāng)前組件上的頁(yè)面是不會(huì)刷新的. 所以我們可以利用這個(gè)特性在miniProgram頁(yè)面把想要傳遞給webviewH5的信息帶到當(dāng)前webview組件的src上. 當(dāng)然, 是操作當(dāng)前src的hash值

運(yùn)行使用

    小程序開(kāi)發(fā)者工具導(dǎo)入微信小程序demo源碼, 在/pages/index/index.js中修改webview組件訪問(wèn)地址指向webview.html的http地址

效果預(yù)覽

success

webview_success.gif

failure

webview_failure.gif

cancel

webview_cancel.gif

文件目錄

.
├── README.md
├── webview                     // 微信小程序demo源碼
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── miniprogram_npm
│   │   └── qs
│   │       ├── index.js
│   │       └── index.js.map
│   ├── package-lock.json
│   ├── package.json
│   ├── pages
│   │   ├── index               // 存在webviewH5組件的頁(yè)面
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── pay                 // miniProgram原生頁(yè)面
│   │       ├── pay.js
│   │       ├── pay.json
│   │       ├── pay.wxml
│   │       └── pay.wxss
│   ├── project.config.json
│   ├── sitemap.json
│   └── utils                   // 工具類(lèi), miniProgram --> webviewH5的主要代碼邏輯存放在這里
│       └── util.js
└── webview.html                // 微信小程序webviewH5組件所使用的的h5頁(yè)面源碼

相關(guān)代碼：

https://github.com/abu3389/wx_app_webview

附加: Uniapp與webview通信用法
在web-view加載的本地及遠(yuǎn)程HTML中調(diào)用uni的API及網(wǎng)頁(yè)和vue頁(yè)面通訊
https://ask.dcloud.net.cn/article/id-35083__page-9