uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)

效果展示:

*这波绝对是走在最前面。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、纯血鸿蒙相关话题。

相关推荐
哲科软件6 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
雪芽蓝域zzs7 小时前
uniapp 国密sm2加密
uni-app
Frank学习路上8 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
鱼樱前端9 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig10 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶10 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
炒毛豆11 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端世界12 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
阳火锅12 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试