当前位置: 首页 > article >正文

uniapp APP端页面触发调用webview(页面为uniapp开发的H5)里的方法

原理:

使用 getCurrentInstance() 获取当前组件的 Vue 实例,通过 instance.proxy.$scope.$getAppWebview() 获取 Uniapp 的原生 WebView 对象。 使用 WebView 提供的 evalJS 方法,执行嵌入 H5 页面内的 JavaScript 代码

<template>
	<view class="main">
		<view v-if="url" class="" style="width: 100%;height: 50vh;">
			<web-view @message="onMessageFromH5" id="webView" ref="webView" @error="onError" :src="url"></web-view>
		</view>
	</view>
</template>
function getData() {
		url.value = "http://192.168.0.22:5174/#/pages/orderDatelis/orderDatelis"
		orderDetails({
			id: orderId.value
		}).then(res => {
			const {
				end_latitude,
				end_longitude,
				id,
				start_latitude,
				start_longitude
			} = res.data
			send(res.data)
		})
	}

	function send(data) {
		const json = JSON.stringify(data)
		if (instance) {
			const currentWebview = instance.proxy.$scope?.$getAppWebview();
			const wv = currentWebview.children()[0];
			wv.evalJS(`msgFromUniapp(${json})`);
			console.warn("发送");
		} else {
			console.warn('getCurrentInstance() returned null');
		}
	}

代码大意:调完接口后将接口返回参数注入webview

uniapp H5 webview部分:

onMounted(() => {
		window.msgFromUniapp = (res) => {
			send(res)
			try {
				data.value = res
				initMap()
			} catch (e) {
				uni.showToast({
					title: e.message
				})
				send(e.message)
			}

		}
	})


http://www.kler.cn/a/517021.html

相关文章:

  • 代码随想录 二叉树 test 2
  • sqlzoo答案4:SELECT within SELECT Tutorial
  • Android SystemUI——最近任务应用列表(十七)
  • .Net Core微服务入门全纪录(四)——Ocelot-API网关(上)
  • Class1(2020):Shell基础(一)——Shell概念
  • Mac 查看 Java SDK 和 Android SDK 的路径
  • 速通Docker === Docker Compose
  • WebAssembly视频检测在社区创作平台的落地与实践 | 得物技术
  • 设计模式的艺术-职责链模式
  • 解决npm install总是卡在sill idealTree buildDeps不动问题
  • 【java】签名验签防篡改研究测试
  • 解决Python 在 Flask 开发模式下定时任务启动两次的问题
  • C# OpenCV机器视觉:交通标志识别
  • 【Uniapp-Vue3】下拉刷新
  • 最新-CentOS 7 基于1 Panel面板安装 JumpServer 堡垒机
  • maven打包springboot项目出现找不到符号错误
  • k8s 蓝绿发布、滚动发布、灰度发布
  • git和idea重新安装后提交异常
  • 【安当产品应用案例100集】034-安当KSP支持密评中存储数据的机密性和完整性
  • Stable Diffusion 图片背景完美替换
  • 游戏设备升级怎么选?RTX4070独显,ToDesk云电脑更具性价比
  • 仿 RabbitMQ 的消息队列3(实战项目)
  • 深度学习-93-大语言模型LLM之基于langchain的模型IO的输出解析
  • JAVA系统中Spring Boot 应用程序的配置文件:application.yml
  • 监控系统-zabbix
  • JAVA与数据结构-线性表