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