赞
踩
在uni-app vue页面使用web-view发送消息给H5(注意观察下面postMessage函数)
<template>
<web-view
:src="url"
ref="webview"
@onPostMessage="handleWebviewMessage"
@message="handleWebviewMessage"
></web-view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onBackPress } from "@dcloudio/uni-app";
import { systemInfo } from "../../utils/system";
const { uniPlatform, platform } = systemInfo();
const url = ref("https://www.baidu.com/");
// 先接受到h5页面发来的data,再给H5发送数据的逻辑
const pages = getCurrentPages();
const vw = ref(null);
const postMessage = () => {
vw.value = pages[pages.length - 1].$getAppWebview().children()[0];
const userData = { TOKEN: "AAAAAA" };
// uniapp 向 webview 发消息
vw.value.evalJS(`receiveData(${JSON.stringify(userData)})`);
};
let postNumber = 0;
const handleWebviewMessage = (data) => {
console.log("接收到消息:" + JSON.stringify(data));
if (postNumber === 0) {
postMessage();
postNumber++;
}
};
// 下面的代码选择性使用
// 作为组件传参使用
// onLoad((options) => {
// console.log("web-view::", options);
// url.value = decodeURIComponent(options.url);
// });
// 解决返回按钮功能不兼容问题
// onBackPress(() => {
// if (uniPlatform === "app" && platform === "android") return false;
// uni.redirectTo({
// url: "/pages/home/index",
// });
// return true;
// });
</script>
const systemInfo = function () {
let systemInfomations = uni.getSystemInfoSync(); // 设备系统信息
let scaleFactor = 750 / systemInfomations.windowWidth; // 机型适配比例系数
let windowHeight = systemInfomations.windowHeight * scaleFactor; // 当前机型-屏幕高度
let windowWidth = systemInfomations.windowWidth * scaleFactor; // 当前机型-屏幕宽度
let statusBarHeight = systemInfomations.statusBarHeight * scaleFactor; // 状态栏高度
let platform = systemInfomations.platform; // 运行平台
const uniPlatform = systemInfomations.uniPlatform; // 运行环境
return {
scaleFactor,
windowHeight,
windowWidth,
statusBarHeight,
platform,
uniPlatform
};
};
export { systemInfo };
nvue获取webview窗口的方式是与普通vue获取webview的方式不一样,下面自己选择性写哦
先去下载这个uni.webview.js文件放入你H5项目里面:
最新版地址:https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2 onclick="jumpTo()">我是\(^o^)/~模拟的登录页,现在没有登陆成功哦</h2>
<h2>如果我收到信息,下面会出现粉色的字哦~</h2>
<h2 id="receiveData" style="color: pink;"></h2>
</body>
<script type="text/javascript" src="./uni.webview.1.5.4.js"></script>
<script type="text/javascript">
function receiveData(msg) {
document.getElementById('receiveData').innerText='下面是我收到的信息内容:'+JSON.stringify(msg)
// localStorage.setItem() // 在这里可以拿到传递过来的数据,写入localStorage,然后其他逻辑
}
document.addEventListener("UniAppJSBridgeReady", function () {
// webview 给 uniapp发消息
uni.postMessage({
data: {
action: "autoLogin",
},
});
uni.getEnv(function (res) { console.log("当前环境:" + JSON.stringify(res)); });})
</script>
</html>
// webview页面代码
import { onBackPress } from '@dcloudio/uni-app';
import { systemInfo } from '@/utils/system'; // 下面放这个代码
const { uniPlatform, platform } = systemInfo();
onBackPress(() => {
if (uniPlatform === 'app' && platform === 'android') return false; // 如果你没有遇到返回的兼容问题,就可以去掉这一行代码
uni.redirectTo({
url: '/pages/home/index'
});
return true;
});
uniapp嵌套webview页面,接收数据onPostMessage写了不管用怎么办?或者@message写了不管用怎么办?(uniapp web-view @message不触发怎么办?)原因:nvue获取webview窗口的方式是与普通vue获取webview的方式不一样,你可以这两个选择性写
uniapp通过webview的evalJS传递数据给H5,有的时候传递不成功的情况如何解决?
可以先让H5加载完毕后,告诉uniapp,然后我们再调用函数传递给H5,可以参考我上面的代码,也可以直接下载本文最上面的我仓库的代码进行测试,如果路过的小伙伴有其他更好的办法,欢迎留言哦~~
待补充其他问题,欢迎小伙伴提出其他问题,我会不断更新本文档哦
欢迎大家指出文章需要改正之处~
学无止境,合作共赢
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。