微信小程序與webview?H5交互的方法(內(nèi)嵌H5跳轉(zhuǎn)原生頁面)
前言
在開發(fā)中，使用web-view組件內(nèi)嵌H5頁面是非常常見的，但很多人不知道webview內(nèi)嵌H5如何與原生小程序 交互。下面介紹下實(shí)現(xiàn)微信小程序與webview H5交互的方法。
web-view功能描述
承載網(wǎng)頁的容器。會(huì)自動(dòng)鋪滿整個(gè)小程序頁面，個(gè)人類型的小程序暫不支持使用。
客戶端 6.7.2 版本開始，navigationStyle: custom 對(duì) web-view 組件無效
web-view 內(nèi)嵌 H5 給原生小程序傳參
方式一、使用postMessage
在web-view組件上有一個(gè)屬性“bindmessage”，官方是這么介紹的：
網(wǎng)頁向小程序 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傳過來的數(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ā)，所以在一些情況可能不滿足開發(fā)需求
方式二、利用頁面跳轉(zhuǎn)帶參
| 接口名 | 說明 | 最低版本 |
|---|---|---|
| wx.miniProgram.navigateTo | 參數(shù)與小程序接口一致 | 1.6.4 |
| wx.miniProgram.navigateBack | 參數(shù)與小程序接口一致 | 1.6.4 |
| wx.miniProgram.switchTab | 參數(shù)與小程序接口一致 | 1.6.5 |
| wx.miniProgram.reLaunch | 參數(shù)與小程序接口一致 | 1.6.5 |
| wx.miniProgram.redirectTo | 參數(shù)與小程序接口一致 | 1.6.5 |
| wx.miniProgram.postMessage | 向小程序發(fā)送消息，會(huì)在特定時(shí)機(jī)（小程序后退、組件銷毀、分享）觸發(fā)組件的 message 事件 | 1.7.1 |
| wx.miniProgram.getEnv | 獲取當(dāng)前環(huán)境 | 1.7.1 |
例如現(xiàn)在有一個(gè)場景： H5為一個(gè)列表頁面，點(diǎn)擊列表子項(xiàng)時(shí)跳轉(zhuǎn)到原生小程序的詳情頁
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傳過來的數(shù)據(jù)
}
原生小程序 給 web-view內(nèi)嵌H5 傳參
原生小程序 給 web-view內(nèi)嵌H5 傳參就很簡單了，原生小程序直接通過修改 web-view 的src屬性就行了
'xxx.com?arg=123'
h5頁面獲取url上的參數(shù)，這種方式會(huì)使頁面重新加載，如果不想引起頁面加載可以通過修改hash
'xxx.com#123'
H5頁面監(jiān)聽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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
為了提高頁面的打開和加載速度，我們經(jīng)常把JS文件放在頁面的尾部，但是有些JS必須放在頁面前面，這樣就會(huì)增加頁面的加載時(shí)間；于是出現(xiàn)了按需動(dòng)態(tài)加載的概念，這個(gè)概念就是當(dāng)頁面需要用到這個(gè)JS文件或者CSS渲染文件的時(shí)候，在去請(qǐng)求這些文件，這樣就節(jié)省了頁面的加載時(shí)間2015-05-05
Nuxt.js實(shí)現(xiàn)校驗(yàn)訪問瀏覽器類型的中間件
Nuxt.js 就是一個(gè)Vue的服務(wù)端渲染框架,和React的服務(wù)端渲染框架類似。這篇文章主要介紹了Nuxt.js實(shí)現(xiàn)校驗(yàn)訪問瀏覽器類型的中間件,需要的朋友可以參考下2018-08-08
下面小編就為大家?guī)硪黄猨avascript閉包概念簡單解析(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
在 JavaScript 中,new 關(guān)鍵字不僅是面向?qū)ο缶幊痰年P(guān)鍵要素,還是創(chuàng)建實(shí)例的重要手段,本文將深入探討 new 關(guān)鍵字的使用,理解它在對(duì)象創(chuàng)建和構(gòu)造函數(shù)調(diào)用中的作用,需要的朋友可以參考下2023-11-11
JavaScript 是弱類型, 變量可存儲(chǔ)任意類型, 并且運(yùn)行期間類型可變2011-05-05
這篇文章主要給大家介紹了關(guān)于typescript中正則表達(dá)式的常用使用方法,TypeScript是一種靜態(tài)類型的JavaScript超集,它提供了對(duì)正則表達(dá)式的全面支持,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
JavaScript比較兩個(gè)對(duì)象是否相等的方法
這篇文章主要介紹了JavaScript比較兩個(gè)對(duì)象是否相等的方法,通過對(duì)js對(duì)象進(jìn)行各方面的比較來判斷兩個(gè)對(duì)象是否相等,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)字符串轉(zhuǎn)日期并比較大小實(shí)例分析
這篇文章主要介紹了JS實(shí)現(xiàn)字符串轉(zhuǎn)日期并比較大小的方法,以實(shí)例形式較為詳細(xì)分析了JavaScript字符串與日期操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
JS+CSS實(shí)現(xiàn)消息的點(diǎn)擊展示和隱藏(H5端)
在 H5 端,我們經(jīng)常需要實(shí)現(xiàn)類似于點(diǎn)擊按鈕來展示或隱藏消息的功能,以下是一個(gè)使用 CSS 和 JavaScript（配合 Vue.js）來實(shí)現(xiàn)這個(gè)效果的簡單示例,需要的朋友可以參考下2023-10-10
BootStrap實(shí)現(xiàn)郵件列表的分頁和模態(tài)框添加郵件的功能
這篇文章主要介紹了bootstrap分頁，模態(tài)框，實(shí)現(xiàn)郵件列表的分頁，和模態(tài)框添加郵件的功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10