可以改动的option组件_uni-app WebView 组件通信
記錄下 uni-app WebView 組件通信的相關問題？
項目中有需要嵌入其他 H5 的頁面的業務需求。
官網的 web-view 文檔中介紹還是挺簡單的，但其中還有一些不必要的坑。
在社區有這樣一篇帖子 在 web-view 加載的本地及遠程 HTML 中調用 uni 的 API 及網頁和 vue 頁面通訊，瀏覽量已經 5w 左右，看來還是有很多人有這樣的需求。
雖是一篇過時的帖子，其中 sdk 的版本也過低，已經無法使用，但是仍有參考的價值，能借鑒之前的坑。
開始的需求是在 APP 中嵌入第三方的 H5 頁面。
APP 端使用
在 uni-app 中使用方法很簡單。
<web-viewv-if="srcUrl":src="srcUrl"@message="reciveMessage"@onPostMessage="recivePostMessage" > </web-view>直接使用 web-view 組件，將鏈接設置為 src。
那么引入了之后如何進行通訊？這個時候就得看文檔了。
在 <web-view> 加載的 HTML 中，添加以下代碼：
// 引入 uni-app 的 sdk <scripttype="text/javascript"src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js" ></script>新建一個簡單 webview.html 文件，引入上面的 sdk.js 作為例子。
<!-- webview.html --> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>webview</title></head><body><div><p id="messageText"></p><div class="btn-list"><button class="btn btn-red" type="button" id="clickMe">點擊我給 APP 傳遞參數</button></div></div><scripttype="text/javascript"src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script><script type="text/javascript">window.jsfunction = function (data) {let canshutype = typeof data;let mes = typeof data == "object" ? JSON.stringify(data) : data;alert("收到參數" + canshutype);document.getElementById("messageText").innerHTML ="恭喜你，接收到你的參數n，參數是" + canshutype + "參數如下:n" + mes;console.log("data", data);};document.addEventListener("UniAppJSBridgeReady", function () {document.getElementById("clickMe").addEventListener("click", function () {let data = {user_id: "ys123456",user_token: "67374b30-cac6-4efb-adc9-88231b9ac44c",user_info: {name: "Iuhuy",avatar:"http://thirdwx.qlogo.cn/mmopen/vi_32/EURpungADj4vP3UczBVvD1DcEUt9q7WFqc6mZlSZoXoS9PyaPicnX8pjmic0rLbmwYCSa247gibINd1dWr0ic1QTvw/132",},};console.log("給 uni-app 發送數據", data);uni.postMessage({data: data,});});});</script></body> </html>可以使用 npm 包 http-server 起一個本地服務。
本地起一個 server：
在 web-view 組件直接引入：
<web-viewsrc="http://192.168.1.56:8081/webview.html"@message="reciveMessage"@onPostMessage="recivePostMessage" ></web-view>手機運行點擊按鈕，在 HBuilderX 控制臺中就能看到接收到的數據。
手機端收到的數據如下，這樣是能收到數據的：
H5 端使用
上面是 APP 端的，H5 并不能收到參數。uni-app 打包成 H5 怎么接收參數呢？
開始也很納悶，然后看了下官方的文檔，web-view 組件的瀏覽器內核說明。
提到 H5 端的 web-view 其實是被轉為 iframe 運行，使用的是當前的瀏覽器，那么就通過 iframe 來通訊不就好了嘛。APP 端和 H5 進行條件編譯一下，分別使用不通方式：APP-webview；H5-iframe。
經驗證，結果也是可行的。在需要加載鏈接的地方進行條件編譯，分別把鏈接帶到指定頁面。
/*** 跳轉到加載頁面*/ gotoGamePage(item) {// #ifdef APP-PLUSuni.navigateTo({url: "../mind/showGame?uri=" + item.uri,});// #endif// #ifdef H5uni.navigateTo({url: "../mind/showGameIframe?uri=" + item.uri,});// #endif }, // showGameIframe.vue <view><iframeid="iframe"class="viewiframe"src="http://192.168.1.56:8081/webview.html"ref="iframe"@onload="onLoad"></iframe> </view> mounted() {// 接受子頁面發來的信息window.addEventListener("message", this.ReceiveMessage);//console.log("------>",this.url)}, methods: {onLoad(option) {console.log("---------------->onLoad", option);},ReceiveMessage(event) {// console.log("ReceiveMessage$$$", event);if (event.data && event.data.data && event.data.data.arg) {console.log("iframe 參數 event.data:", event.data.data.arg);}},SendMessage() {let str = toolTimer.formatTime(new Date(), "yyyy-MM-dd");let data = {action: 66,time: str,};document.getElementById("iframe").contentWindow.postMessage(data, "*");}, },也是能收到參數的：
小程序和其他端沒有試過，有小程序和其他端開發需求的小伙伴可以自己再試試。
總結
以上是生活随笔為你收集整理的可以改动的option组件_uni-app WebView 组件通信的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《植物大战僵尸杂交版》挑战模式第28关通
- 下一篇： 离别后重逢的小说(常年在墨宝的非宝小说)