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

最新推荐文章于 2024-08-22 16:16:39 发布

不知名Do

最新推荐文章于 2024-08-22 16:16:39 发布

阅读量7.1k

点赞数 2

分类专栏： uni-app 文章标签： uni-app javascript webview vue html5

本文链接：https://blog.csdn.net/weixin_46027556/article/details/128855408

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

效果图展示

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

h5 引入通讯方式

vue页面代码

//使用的是iframe 标签
<iframe id="myframe" style="border: none" :src="浙政钉二维码地址" height="330">
</iframe>
//使用的是web-view标签
<web-view id="myframe" style="border: none" :src="浙政钉二维码地址" height="330">
</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>
		<!-- uni 的 SDK -->
    	<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
		<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
		<script>
		 // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
			document.addEventListener('UniAppJSBridgeReady', function() {  
				var wv = plus.webview.currentWebview()  
				//监听扫码结果
				window.addEventListener('message', function(event) {
					// 这里的event.data 就是登录成功的信息
					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)//renderjs返回的值
			}
		}
	}
</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