一、内嵌网页向uni-app通信
1、内嵌网页向uni-app发消息
在we-view访问的网页内引入uni.webview.1.5.4.js，通过uni.postMessage(OBJECT)向应用发送消息，在wb-view的message事件回调event.detail.data中接受消息。
注意:
1、传递的消息，必须写在data对象中。
2、event.detail.data中的数据，以数组的形式接收每次post的消息（注：支付宝小程序除外，支付宝小程序中以对象形式接收）。
以下为内嵌网页代码
// index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js">
</script>
</head>
<body>
<script>
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
// 向应用发送消息
uni.postMessage({
data: {
action: 'message'
}
});
});
</script>
</body>
</html>
2、uni-app接收消息
在组建web-view中监听message方法，如下：
<template>
<web-view @message="message" src="xxxxxxxxx"></web-view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
message(arg) {
console.log(arg);
},
}
};
</script>
通过判断上述arg传递过来的值，我们可以跳转或者事件的触发。
二、uni-app应用向内嵌网页通信
1、应用给内嵌网页发消息
//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
const currentWebview = this.$scope.$getAppWebview().children()[0];
currentWebview.evalJS(`msgFromUniapp({
userInfo:{
name:'张三'
}
})`);
const
_funName = 'msgFromUniapp',
_data = uni.getStorageSync('userInfo');
const currentWebview = this.$scope.$getAppWebview().children()[0];
currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);
2、内嵌网页接受消息
window.msgFromUniapp= function(arg) {
console.log(arg);
console.log(JSON.stringify(arg));
}
三、真实案例
内嵌网页想获取应用的头像、昵称、ID。
1、内嵌网页代码
// index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js">
</script>
</head>
<body>
<script>
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
// 向应用发送消息
uni.postMessage({
data: {
action: 'getUserInfo'
}
});
});
window.msgFromUniapp= function(arg) {
console.log(arg);
console.log(JSON.stringify(arg));
}
</script>
</body>
</html>
2、uni-app代码
<template>
<web-view @message="message" src="xxxxxxxxx"></web-view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
message(arg) {
if (arg.detail.data[0].action === 'getUserInfo') {
this.getUserInfo();
}
},
getUserInfo() {
const currentWebview = this.$scope.$getAppWebview().children()[0];
currentWebview.evalJS(`msgFromUniapp({
userInfo:{
name:'张三'
}
})`);
}
}
};
</script>
