关于uniapp的app和uniapp的H5互相通讯实现H5调取app扫码再传入H5(app内嵌H5,webView)

一.h5传值给app

1，在h5项目的mian.js中引入

// #ifdef H5
import '@/***mon/webview_sdk.js'
// #endif

//此处需要注意的是如果项目本身要打包成app,记得使用条件编译，否则在app运行时本次引入会报错

2.h5页面给app传值部分

otherAppMethod(e){
                uni.webView.postMessage({
                    data:{
                        action:e
                    }
                })
            },

3.app页面接收

html

<web-view :src="webUrl" ref="webview" @message="message"></web-view>

js由于我做的是扫码

message(event) {
				console.log(event, '这样还不行吗')
				let _this=this
				 //(`getParams(${JSON.stringify(res)})`)
				uni.scanCode({
					onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片 如果想用相册选择图片扫码 需要注释掉
					// scanType: ["barCode"], // 调起条码扫描
					su***ess(CodeRes) {
						let codeResult = "";
						codeResult = CodeRes.result.split(":");
						if (codeResult[0] === "RU" && codeResult[1] === "INSPECT") {
							uni.showToast({
								title: "获取位置信息中...",
								icon: "none",
								duration: 5000,
							});
							uni.getLocation({
								type: "wgs84",
								geocode: true, // 设置该参数为true可直接获取经纬度及城市信息
								isHighA***uracy: true,
								su***ess: (pointSu***ess) => {
									uni.showToast({
										title: "加载数据中...",
										icon: "none",
										duration: 5000,
									});
									outOfRange({
										riskUnitId: codeResult[2],
										longitude: pointSu***ess
											.longitude,
										latitude: pointSu***ess
											.latitude,
									}).then((res) => {
										uni.hideToast()
										if (res) {
											if (res.data.flag) {
												// uni.navigateTo({
												// 	url: "/pages/dangerQuick/viewSaoInvestigation/index?inspectId=" +codeResult[2] +"&source=index",
												// });
												// this.webUrl =
												// 	'http://192.168.1.77:8081/views/login/index?action=' +
												// 	2
												console.log(codeResult[2],'扫出来的啥')
												_this.sanweb(codeResult[2])
											} else {
												uni.showToast({
													title: res
														.data
														.message ||
														"您不在规定范围内，请前往扫描",
													icon: "none",
												});
											}
										}
									});
								},
								fail: (pointFail) => {
									uni.showToast({
										title: "获取地址失败，请打开位置信息。并重新登录!",
										duration: 5000,
										icon: "none",
									});
								},
							});
						} else {
							// _this.sanweb(codeResult[2])
							uni.showToast({
								title: "请扫描正确二维码",
								icon: "none",
							});
							
						}
					},
				});
				// 对从web-view中接收到的消息进行处理
				// console.log('收到来自web-view的消息：', event.detail.data)
				// // 将消息发送到uni-app中的事件总线
				// EventBus.$emit('toOption', event.detail.data)
			},
			sanweb(e){
				this.currentWebview = this.$scope.$getAppWebview().children()[0]
				console.log(this.$scope.$getAppWebview().children()[0],'两边与偶啥')
				// this.currentWebview.evalJS("uniEvent()");
				let res={
				     action:1,
					 code:e
				}
				this.currentWebview.evalJS(`uniEvent(${JSON.stringify(res)})`)
			}

二.扫码过后app向h5传值并跳转

1.app发起传值

在“一“的app接收h5传值部分我也写了

sanweb(e){
				this.currentWebview = this.$scope.$getAppWebview().children()[0]
				console.log(this.$scope.$getAppWebview().children()[0],'两边与偶啥')
				// this.currentWebview.evalJS("uniEvent()");
				let res={
				     action:1,
					 code:e
				}
				this.currentWebview.evalJS(`uniEvent(${JSON.stringify(res)})`)
			}

2.h5接收app传过来的值

onShow() {
			// #ifdef H5
			let dianziHetong = null;
			   window.uniEvent = function(data) {
			       console.log('app发来的数据2', data.action)
				   if(data.action==1){
					   uni.navigateTo({
					   	url: "/pages/dangerQuick/viewSaoInvestigation/index?inspectId=" +data.code +"&source=index",
					   });
				   }
			   }
			// #endif
}

至此互相通讯完毕