前言

在開(kāi)發(fā)中，使用web-view組件內(nèi)嵌H5頁(yè)面是非常常見(jiàn)的，但很多人不知道webview內(nèi)嵌H5如何與原生小程序 交互。下面介紹下實(shí)現(xiàn)微信小程序與webview H5交互的方法。

web-view功能描述

承載網(wǎng)頁(yè)的容器。會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面，個(gè)人類型的小程序暫不支持使用。

客戶端 6.7.2 版本開(kāi)始，navigationStyle: custom 對(duì) web-view 組件無(wú)效

web-view 內(nèi)嵌 H5 給原生小程序傳參

方式一、使用postMessage

在web-view組件上有一個(gè)屬性“bindmessage”，官方是這么介紹的：

網(wǎng)頁(yè)向小程序 postMessage 時(shí)，會(huì)在特定時(shí)機(jī)（小程序后退、組件銷毀、分享）觸發(fā)并收到消息。e.detail = { data }，data是多次 postMessage 的參數(shù)組成的數(shù)組

在 web-view 組件上綁定 “message”事件

在 H5 中 觸發(fā) message 事件即可在小程序中接收 H5傳遞的數(shù)據(jù)

例子：

小程序 /pages/test/test.wxml :

<web-view src="" bindmessage="receiveMessage"></web-view>

小程序 /pages/test/test.js :

receiveMessage(e){
	console.log(e.detail)//接收H5傳過(guò)來(lái)的數(shù)據(jù)
}

H5：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
</script>

利用postMessage可以實(shí)現(xiàn)小程序與H5之間通訊，但只在小程序后退、組件銷毀、分享時(shí)觸發(fā)，所以在一些情況可能不滿足開(kāi)發(fā)需求

方式二、利用頁(yè)面跳轉(zhuǎn)帶參

例如現(xiàn)在有一個(gè)場(chǎng)景： H5為一個(gè)列表頁(yè)面，點(diǎn)擊列表子項(xiàng)時(shí)跳轉(zhuǎn)到原生小程序的詳情頁(yè)

H5：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
function handleClick(e){
	let id = e.target.dataset.id
	let url = `/pages/detail/detail?id=${id}`;
	wx.miniProgram.navigateTo({
      url,
    });
}
</script>

小程序 /pages/detail/detail.js:

onLoad: function (options) {
	console.log(options.id)//接收H5傳過(guò)來(lái)的數(shù)據(jù)
}

原生小程序 給 web-view內(nèi)嵌H5 傳參

原生小程序 給 web-view內(nèi)嵌H5 傳參就很簡(jiǎn)單了，原生小程序直接通過(guò)修改 web-view 的src屬性就行了

'xxx.com?arg=123'

h5頁(yè)面獲取url上的參數(shù)，這種方式會(huì)使頁(yè)面重新加載，如果不想引起頁(yè)面加載可以通過(guò)修改hash

'xxx.com#123'

H5頁(yè)面監(jiān)聽(tīng)hash值變化：

window.onhashchange=function(){
    alert('hash值改變')
    console.log(window.location.hash)//獲取當(dāng)前hash值
}

總結(jié)

到此這篇關(guān)于微信小程序與webview H5交互的文章就介紹到這了,更多相關(guān)微信小程序與webview H5交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論