效果展示：
*这波绝对是走在最前面。uniapp上使用webview与浏览器交互，支持三端（android、iOS、harmonyos next）。还有部分人用的vue2的语法，目前是最新的vue3写法。废话不多说，直接上代码：
uniapp代码（app端）
javascript
复制代码
<template>
<web-view
id="webviewId"
ref="webviewRef"
:src="'https://static-mp-ff40e3ac-9cb8-4dc9-add1-486c5e802f30.next.bspapp.com/ywx/webview.html'"
@message="messageHanle"></web-view>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
const webviewRef = ref(null);
// #ifdef APP-HARMONY
const context = getCurrentInstance(); // 允许访问对高级使用或库创建者有用的内部组件实例
const webwiewCtx = uni.createWebviewContext("webviewId", context.proxy);
// #endif
// 发送数据到网页
const sendDataToWeb = (data) => {
// #ifndef APP-HARMONY
// 获取所有页面路由
const pages = getCurrentPages();
// 找到最后一个索引
const index = pages.length - 1;
// 获取到当前页面的webView实例
const currentWebview = pages[index].$getAppWebview();
// 取到真正的webview
const webView = currentWebview.children()[0];
console.log(webView);
webView.evalJS(`RequireMapMobile('${JSON.stringify(data)}')`);
// #endif
// #ifdef APP-HARMONY
setTimeout(()=>{
webwiewCtx.evalJS(`RequireMapMobile('${JSON.stringify(data)}')`);
}, 200)
// #endif
};
// 接收浏览器发送的消息
const messageHanle = (e) => {
console.log("浏览器发送的消息", e.detail.data[0]);
};
html代码（浏览器端）
javascript
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.send{
width: 100%;
height: 100vh;
background-color: #ebebeb;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.send .content{
display: block;
line-height: 100px;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="send">
<span class="content">大家好，我是浏览器！</span>
</div>
</body>
<script type="text/javascript" src="./uni.webview.js"></script>
<script>
window.RequireMapMobile = function(val){
console.log('来自App发送的数据', JSON.stringify(val));
// 修改class为send的背景颜色
document.querySelector('.content').style.color = 'gold';
}
setTimeout(() => {
uni.postMessage({
data: {
message: '我是浏览器发送的数据！'
}
});
// 修改class为send的背景颜色
document.querySelector('.send').style.backgroundColor = 'pink';
}, 500);
</script>
</html>
有任何问题直接评论区留言。欢迎大家共同讨论uniapp、纯血鸿蒙相关话题。