目前網上，包括官方文檔針對uniapp的webview的內容都是基于vue2的，此文章基于vue3的composition API方式

網頁對網頁???

由于uniapp中的webview只支持引入h5頁面，不支持互相通信，所以要條件編譯，用iframe導入頁面，并通信??

父頁面

<!-- #ifdef H5 --><iframesrc="http://192.168.0.105:5000/#/index"border="none"width="100%"height="100vh"frameborder="0"style="border: none; height: calc(100vh - 8px)"ref="iframe"@load="handlePageLoaded"></iframe><!-- #endif -->

const iframe = ref()  
const handlePageLoaded = () => {console.log('h5端網頁加載成功')iframe.value.contentWindow.postMessage({type: 'Function', // 調用方法from: 'uniapp',functionName: 'appCallback',params: {from: 'uniapp h5',},},'*',) // 需指定子頁面域名// 調用子頁面全局方法(同源才行)// iframe.value.contentWindow.appCallback({ name: 'tom' })
}// #ifdef H5
// 監聽子頁面的返回結果
window.addEventListener('message', function (event) {if (event.data?.from == 'h5') {console.log('uniapp收到iframe發來消息', event.data)}
})
// #endif

子頁面??

window.addEventListener('load', function () {console.log('子頁面（被iframe嵌入）所有資源加載完成！');// 這里可以執行加載完成后的操作（如初始化、發送消息給父頁面等）});window.addEventListener('message', function (event) {// 驗證消息來源if (event.data?.from == 'uniapp') {const message = event.data;event.source.postMessage({type: 'functionResult',from: 'h5'}, event.origin);if (message.functionName) {window[message.functionName](message.params || {})}console.log('iframe收到uniapp消息', message)}});

網頁對app或者小程序?

子頁面??

引入uniapp官方文檔提供的js文件??

  <script src="/lib/uni.webview.js"></script>

// 待觸發 `UniAppJSBridgeReady` 事件后，即可調用 uni 的 API。document.addEventListener('UniAppJSBridgeReady', function () {console.log('uniapp中webview加載完成')uni.getEnv(function (res) {console.log('當前環境：' + JSON.stringify(res));setTimeout(() => {if (res.h5) {// uniapp不支持h5之間用webview互相通信} else if (res.plus) {uni.postMessage({data: {action: 'message',other: {name: 'ike',age: 30}}});}}, 200)});// 發送消息// uni.postMessage({//   data: {//     action: 'message'//   }// });});

父應用??

import { onReady } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'const wv = ref()
onReady(() => {// #ifndef H5setTimeout(() => {wv.value = instance?.proxy.$scope.$getAppWebview().children()[0]}, 100)// #endif
})const handleWVMessage = (ev: any) => {console.log('收到web消息', ev.detail.data)wv.value.evalJS(`appCallback({action: 'message', data: {name: 'tom'}})`)
}

目前存在問題

1、app端無法使用load監聽網頁是否加載完成，小程序端可以??

2、頁面ready后，要延時一陣才能拿到真正的webview實例，所以網頁端監聽到加載完畢，也要延時一陣再給uniapp發消息??

3、app端通過

:webview-styles="{

? ? ? process: false,

? ? ? width: '50%',

? ? ? height: props.height,

? ? }"設置寬高都不起作用