【uni-app】处理uni-app编译APP-PLUS window.addEventListener(‘message‘）不能使用问题

处理 uni-app 编译 APP-PLUS 引入浙里办扫码登录（例子）

• • 效果图展示
  • h5 引入通讯方式
  • app 引入通讯方式 使用 plus.webview 操作
  • 尝试过的其他方法（renderjs 未成功)

效果图展示

最近工作安排用 uniapp 开发 App 项目，涉及到多种登录方法。由于 uni-app 除 H5 外 均不支持 document、window 等浏览器的 js API，所以扫码成功之后，监听消息通知返回事件 window.addEventListener(‘message’, function(event) {}）无法在 App 中直接使用。

h5 引入通讯方式

vue 页面代码

// 使用的是 iframe 标签

// 使用的是 web-view 标签

onLoad(option) {
 	// #ifdef H5
	 this.ewmListener()
	 // #endif
},
methods: {ewmListener() { // 扫码返回的数据
		window.addEventListener('message', function(event) {
			// 这里的 event.data 就是登录成功的信息
			console.log(event, 'data')
		})
	}
}

app 引入通讯方式 使用 plus.webview 操作

由于 uni-app 除 H5 外 均不支持 document、window 等浏览器的 js API，App 无法监听消息通知返回事件 window.addEventListener(‘message’, function(event) {}）
尝试过很多方法 目前找到的方式就是 写个 html 页面通过 webview 把页面嵌套进去，html 页面写入监听事件，通过 uni.postMessage 把消息参数传到 vue 页面中，vue 页面写入 plus.globalEvent.addEventListener(‘plusMessage’) 就可以接收到 html 页面传递过来的参数。
阅读官方文档 uniapp 关于 webView 标签介绍

data() {
	return {wv:null,}
}
methods: {
	// 渲染 webview 页面
	init(){
		let _this=this
		// App 打开本地 verify 页面（uni-app 本地 html 存放在根目录 /hybrid/html 中）if (_this.wv) {return _this.wv.show()  
		}
		// #ifdef APP-PLUS
		// 设置 webview 样式
		//App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css 等文件）必须放在 uni-app 项目根目录 ->hybrid->html 文件夹下或者 static 目录下
		_this.wv = plus.webview.create('/hybrid/html/zzdScanCodes.html', '', { top:'100px',bottom：'200px',height:330,with:'400px',background:'transparent',mask:'none'})
		var currentWebview = _this.$scope.$getAppWebview();   // 此对象相当于 html5plus 里的 plus.webview.currentWebview()。在 uni-app 里 vue 页面直接使用 plus.webview.currentWebview()无效
		currentWebview.append(_this.wv);// 一定要 append 到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
		// 重点: 监听子页面 uni.postMessage 返回的值  
		plus.globalEvent.addEventListener('plusMessage', function(msg){
			const result = msg.data.args.data
			if(result.name == 'postMessage'){console.log('app 接收到消息为:'+JSON.stringify(result .arg));  
			}    
		});
	// #endif
	},
}

本地页面存放的位置是固定的 必须 放在 uni-app 项目根目录 ->hybrid->html 文件夹下或者 static 目录下，其他的文件路径地址是读取不到页面的！！

body style="overflow: hidden;">
		iframe
			id="myframe"
			style="border: none;"
			src="浙里办二维码地址"
			height="330"
		>iframe>
		
    	
		script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js">script>
		script>
		 
			document.addEventListener('UniAppJSBridgeReady', function() {  
				var wv = plus.webview.currentWebview()  
				
				window.addEventListener('message', function(event) {
					
					if (event.data && event.data.code) {
						uni.postMessage({
							data:event.data  
						})
					}
				})
			})  
		script>  
	body>

尝试过的其他方法（renderjs 未成功)

监听消息方法中是不能用的 this.$ownerInstance 会报 undefined！！！！！

网上说 this.$ownerInstance.callMethod 方法必须通过点击事件执行

script module="test" lang="renderjs">
	export default {
		data(){
			return {
				info:null
			}
		},
		mounted() {
			window.addEventListener('message',(event)=>{
				console.log(event)
				var loc = event.data;
				if(loc && loc.mounted == 'locationPicker'){
					this.$ownerInstance.callMethod('receiveRenderData', this.loc)
				}
			})
		}
	}
/script>
script>
	export default {
		data(){
			return {
				info:null
			}
		},
		methods() {
			receiveRenderData(val){
				console.log(val)
			}
		}
	}
/script>

但 要是处理 uniapp 中使用不了 window 对象问题可以试试使用 renderjs

主要服务于 APP，因为 uni-app 为 vue+js+html 进行编写，整个是 h5 的技术栈。而 app 上并没有 document 等基础对象。那么，涉及到这些的前端类库就无法使用，例如 html2、canvas、canvas2、image。这是用就出现了 renderjs 这种视图层工具来进行渲染。运行在视图层的 js。
注意：1. 在 renderjs 层不能使用 uni 或其他框架的 API，例如 uni.request、uni.getlocation 等等方法，需在原生层调用后触发监听将数据传入。
2. 在 APP 端 renderjs 层的 data 与原生层的 data 互不相干
3.this.$ownerInstance.callMethod 方法必须通过点击事件执行
详细可查看 uniapp 官网 renderjs