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、纯血鸿蒙相关话题。

相关推荐
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
爱笑的眼睛113 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说5 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js