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"
							}
						}
					]
				}
			}
		},