uniapp web-view组件数据传递及使用注意点示例详解
作者：web前端-rx
1.vue页面
本篇文章除特别指出，H5均指原生html文档，非uniapp编译的h5
vue页面向html页面传参数：①直接在src后面拼接参数（除App端之外，其他端除该方法外无其它办法）②使用evalJs执行h5里某个函数（仅App支持）
<web-view :src="src"></web-view>
let src = ref('')
src.value = `/hybrid/html/xx.html?a1=${a1}&a2=${a2}`H5接收：
//通用（建议原生Html使用）：
function getQueryVariable(variable) {
var query = decodeURIComponent(window.location.search.substring(1));
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return '';
}
const a1 = getQueryVariable('a1');
//如果是uniapp编译的h5可以推荐onLoad：
onLoad(e=>{
console.log(e)
})/*********************************************************************************************************/
H5向vue传递数据，实测注意H5中调用uni.navigateTo跳转uniapp页面时，不支持events参数！
// h5向打开该h5的页面传递参数：
let obj = {};
let envObj = {};
uni.getEnv(function (res) {
envObj = res
});
if (envObj.h5) {
window.parent.postMessage(obj, "*");
} else {
uni.postMessage({
data: obj
});
}
uni.navigateBack()
// h5跳转其他页面传递参数：还是通过url传递
uni.navigateTo({
url: `/pages/p1/p1?param=${param}`
})
uni.redirectTo({
url: `/pages/p1/p1?param=${param}`
})
//其他uni跳转等等.....vue接收h5传的参数
//在打开h5的页面接收参数
let data = {};
// #ifdef H5
function receiveMessage(event) {
console.log(event) //按打印的实际数据，有些data是在event.data.data.arg里...
if (event.data.type !== 'WEB_INVOKE_APPSERVICE') {
data = event.data
}
}
window.addEventListener("message", receiveMessage, false);
// #endif
// #ifndef H5
const getMessage = (event) => {
console.log(event)
if (Array.isArray(event.detail.data)) {
data = event.detail.data[0];
} else {
data = event.detail.data;
}
}
// #endif
//h5跳转的其他页面接收参数
import {onLoad} from '@dcloudio/uni-app'
onLoad(e=>{
console.log(e)
}
vue向上一级vue页面传递数据：
//上一级vue页面：
let url = 'xxxxxxx';
uni.navigateTo({
url: url,
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
xxData: function(data) {
console.log(data);
console.log(data.xxDataObj)
//.........
}
}
});
//打开h5的vue页面：
import {
getCurrentInstance,
} from 'vue';
import {
onUnload
} from '@dcloudio/uni-app'
let data = '测试';
const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel()
onUnload(() => {
eventChannel.emit('xxData', {
xxDataObj: data
})
})2.nvue页面
//nvue页面需要设置style="flex: 1;"才能铺满全屏 <web-view ref="myWebview" @onPostMessage="handlePostMessage" :src="src" style="flex: 1;"></web-view>
nvue向h5页面传数据仍可通过参数传递，也可以通过evalJs执行js语句：
const myWebview = ref(''); //注意不要初始声明为null，会报错
//并且可以操作h5里的全局变量
//evalJs应延迟执行或在handlePostMessage里执行
myWebview.value.evalJs("console.log('执行了')");
//或者
myWebview.value.evalJs("uniMsg(JSON.stringfiy(obj))");h5向nvue传递数据非常简单，与vue一致，但不用返回或跳转，可实时传递：
uni.postMessage({
data: {
"xxx":"xxx"
}
})
//nvue页面接收：
const handlePostMessage = e => {
console.log(e)
console.log(e.detail.data[0])
}特别注意：
1.App-安卓，如果项目配置了“自定义404等错误页面”，断网访问web-view组件vue页面，无法使用系统返回键返回，原生导航栏上返回也不行，只能杀死app重新进，控制台仅报红色“error”字母；官方也没有回复解决办法~，如果苹果也有类似问题欢迎讨论~（最新版HbuiderX4.57似乎已基本解决该问题，即多次按返回可以返回）
2.“UniAppJSBridgeReady”事件有时候会监听失败，原因未知，这个事件监听放在引入uni_webview.js的后面实测OK：
<script type="text/javascript" src="js/uni_webview.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', xxFn)
</script>3.nvue页面中的h5页面实测无法支持暗黑模式即
@media (prefers-color-scheme: dark) {
}即使nvue页面配置了plus.nativeUI.setUIStyle('auto');
4.nvue无法通过ref获取webview实例，不能动态设置webview或获取webview的一些参数；
通过plus创建的webview虽然可以获得实例，但需要自己设置宽高，无法做到向flex:1一样铺满屏幕；通过计算得到的高度可能会有适配问题。
通过AI了解到nvue比vue页面加载webview并不会有性能优化。
所以个人推荐除非有无法解决的实时通信需求可以用nvue（比如App加载的webview里有下载按钮，希望下载时停留在h5页面而不是回退或跳转），其他情况都用vue页面
5.$getAppWebview() 不是官方公开 API，它是 HBuilderX 内部方法，仅在 App 平台有效。
其他平台（如 H5、小程序）不支持该方法，调用会报错。
总结
到此这篇关于uniapp web-view组件数据传递及使用注意点的文章就介绍到这了,更多相关uniapp web-view组件数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！