UNIAPP之App与webview之间的通信

tips：本文主要用来记录实战中用到的一些操作

webview

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

APP端代码

<web-view 
	ref=webview 
	:webview-styles="webviewStyles" 
	:src="app_ui_address"
	@onPostMessage="handlePostMessage"
></web-view>

webviewStyles: {
          
   
	progress: {
          
   
		color: #FF3333
	}
}

handlePostMessage: function(data) {
          
   
	var comman = data.detail.data;
	// 过滤出有实际操作需求的动作
	const target = common.filter(item => item.action)
	target.forEach(item => {
          
   
		switch (item.action) {
          
   
			case TEST:
				console.log(action name is: item.action)
				breack;
			default:
				console.log(do some default action)
				break;
		}
	})
}

webview端(vue 端)代码

在vue端中调用testSendToApp方法，APP端就能通过onPostMessage监听获取到信息

export function testSendToApp() {
          
   
  UNI.postMessage({
          
   
    data: {
          
   
      action: "TEST",
    },
  });
}