uniapp中vue与html与nvue通信方式
1.vue与html
vue页面
<!-- 标签 -->
<!-- <web-view src="/hybrid/html/index.html" @message="handleMessage"></web-view> -->
onLoad() {
let that = this;
// #ifdef APP-PLUS
var currentWebview = that.$scope.$getAppWebview();
let num = 0;
let wv_time = setInterval(function() {
num++;
that.wv = currentWebview.children()[0];
if (that.wv) {
// 获取到当前页面的webview子页面然后下发消息
that.sendData({
type: 'init',
msg: 'addd'
})
clearInterval(wv_time)
}
}, 100);
// #endif
},
methods: {
// 发送消息给webview
sendData (data) {
let that = this
that.wv.evalJS("webReceiveData('" + JSON.stringify(data) + "')");
},
// 接收来自webview的消息
handleMessage(evt) {
let data = JSON.stringify(evt.detail.data)
console.log('接收到的消息:' + data);
}
}
html页面
// 引入官方库
// 在web项目中引入官方库uni.webview.js,可以从uniapp官方示例库中下载,
// 下载后放入web项目目录下即可,本文放在js文件夹中,然后在web项目页面中引入
// <script type="text/javascript" src="js/uni.webview.1.5.2.js"></script>
// 发送消息给vue
function webSendData() {
uni.postMessage({
data: {
action: '',
data: {}
}
});
};
// 接受来自vue的消息
function webReceiveData (data) {
var parseData = JSON.parse(data)
document.getElementById('msg').innerText = `接收到的消息:${parseData.msg}`
}
2.vue与nvue
vue页面
// 通过 id 获取 nvue 子窗体
onShow() {
// #ifdef APP-PLUS
// 通过 id 获取 nvue 子窗体
this.subNVue = uni.getSubNVueById('concat')
// #endif
},
// 打开 nvue 子窗体
subNVue.show('zoom-fade-out', 300, function(){
// 打开后进行一些操作...
// 发送信息给nvue
uni.$emit('map-popup', {
data:{}
})
});
// 接收来自nvue的消息
uni.$on('sendData', res => {
})
// 关闭 nvue 子窗体
subNVue.hide('fade-out', 300)
nvue页面
// 接收来自vue的消息
uni.$on('map-popup', (res) => {})
// 发送消息给vue
uni.$emit('sendData', {
msg: 'gettruck',
isShow: false
})
3.nvue注册方式
在对应页面的style下app-plus下的subNVues中进行注册。
{
"path": "pages/map/map",
"style": {
"navigationBarTitleText": "台州1号AloT 安全管控",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue607",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "18px",
"color": "#fff",
"float": "right"
}]
},
"bounce": "none",
"subNVues": [{
"id": "concat",
"path": "pages/map/shareSubNVue/popup",
"type": "popup",
"style": {
"background": "transparent"
}
},
{
"id": "SIS",
"path": "pages/map/shareSubNVue/SISpopup",
"type": "popup",
"style": {
"background": "transparent"
}
},
{
"id": "Template",
"path": "pages/map/shareSubNVue/Temperaturepopip",
"type": "popup",
"style": {
"background": "transparent"
}
},
{
"id": "Weather",
"path": "pages/map/shareSubNVue/weather",
"type": "popup",
"style": {
"background": "transparent"
}
}
]
}
}
},
本文是原创文章,完整转载请注明来自 程序员水星