小程序中的web-view與h5網頁之間的交互

 

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

web-view

• 基礎庫 1.6.4 開始支持，低版本需做兼容處理

web-view 組件是一個可以用來承載網頁的容器，會自動鋪滿整個小程序頁面。個人類型與海外類型的小程序暫不支持使用。

• 客戶端 6.7.2 版本開始，navigationStyle: custom 對 <web-view> 組件無效

 

屬性名	類型	默認值	說明
src	String		webview 指向網頁的鏈接。可打開關聯的公眾號的文章，其它網頁需登錄小程序管理后台配置業務域名。
bindmessage	EventHandler		網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。e.detail = { data }

 

 

示例代碼：

<!-- wxml -->
<!-- 指向微信公眾平台首頁的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

 

閱讀文檔發現，其實小程序的通過將h5的網址放在web-view標簽的src 屬性上即可打開，不過這h5的網址需要在微信后台設置為白名單。那么小程序與網頁之間如何交互呢：

1.小程序向網頁傳值

小程序內打開網頁的話，有時需要向網頁內傳遞參數。可將需要帶向網頁的值通過拼接參數方式實現，然后再在網頁內截取即可

<!-- 小程序page -->
<web-view src="http://a.html?id=123"></web-view>

<!-- 網頁 a.html-->
<script>
    let id = getUrlParam('id'); 
</script>

2，網頁向小程序傳值

 網頁像小程序傳值的 有兩種方式可以實現，一種是通過url和小程序的轉發方法，將需要傳給小程序的值當做參數放在當前url上，小程序中通過點擊轉發即可獲取。這種方法缺點是只能在點擊轉發時才可傳

onShareAppMessage: function (options) {
    let webViewUrl = options.webViewUrl;//web-view當前的網址
}

另外一種是通過使用微信sdk的postMessage方法，然后小程序web-viewd中的bindmessage方法會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。e.detail = { data } 

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

// javascript
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
 

 

 <!-- wxml -->
<web-view src="http://a.html?id=123" bindmessage="postMessage"></web-view>

// javascript
postMessage(e) {
    console.log(e)
},

 

參考鏈接：https://blog.csdn.net/laishaojiang/article/details/82181952