uniapp上使用webview与浏览器交互，支持三端（android、iOS、harmonyos next）

效果展示：

*这波绝对是走在最前面。uniapp上使用webview与浏览器交互，支持三端（android、iOS、harmonyos next）。还有部分人用的vue2的语法，目前是最新的vue3写法。废话不多说，直接上代码：

uniapp代码（app端）

	


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代码（浏览器端）

    
    
    Document
    
        .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;
        }
    


    

        大家好，我是浏览器！
    



    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);

有任何问题直接评论区留言。欢迎大家共同讨论uniapp、纯血鸿蒙相关话题。