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

这篇具有很好参考价值的文章主要介绍了关于uniapp的app和uniapp的H5互相通讯实现H5调取app扫码再传入H5(app内嵌H5,webView)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.h5传值给app

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

// #ifdef H5
import '@/common/webview_sdk.js'
// #endif

uniapp app端和h5双向通信,uni-app

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

2.h5页面给app传值部分

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

uniapp app端和h5双向通信,uni-app

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"], // 调起条码扫描
					success(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可直接获取经纬度及城市信息
								isHighAccuracy: true,
								success: (pointSuccess) => {
									uni.showToast({
										title: "加载数据中...",
										icon: "none",
										duration: 5000,
									});
									outOfRange({
										riskUnitId: codeResult[2],
										longitude: pointSuccess
											.longitude,
										latitude: pointSuccess
											.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
}

至此互相通讯完毕文章来源地址https://www.toymoban.com/news/detail-785360.html

到了这里，关于关于uniapp的app和uniapp的H5互相通讯实现H5调取app扫码再传入H5(app内嵌H5,webView)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！