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

news2025/1/24 11:52:26

原理:

使用 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.coloradmin.cn/o/2281404.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

宝塔Linux+docker部署nginx出现403 Forbidden

本文主要讲述了宝塔docker部署nginx出现403 Forbidden的原因&#xff0c;以及成功部署前端的方法步骤。 目录 1、问题描述2、问题检测2.1 检测监听端口是否异常2.2 检测Docker容器是否异常2.2.1 打开宝塔Linux的软件商店&#xff0c;找到Docker管理器&#xff0c;查看前端容器是…

Tensor 基本操作2 理解 tensor.max 操作,沿着给定的 dim 是什么意思 | PyTorch 深度学习实战

前一篇文章&#xff0c;Tensor 基本操作1 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 目录 Tensor 基本操作torch.max默认指定维度 Tensor 基本操作 torch.max torch.max 实现降维运算&#xff0c;基于指定的 d…

[Linux] 进程管理与调度机制

文章目录 一.进程前言1.冯诺依曼体系结构2.操作系统 二.进程相关概念1.PCB2.查看进程标识符3.父与子进程 三.进程状态1.状态类别1).运行2).阻塞3).挂起 2.Linux下的状态1).R(running)2).S(Sleeping)3).D(disk sleeping)4).T(stopped)5).t(tracing stopped)6).Z(僵尸进程)7).孤儿…

复位信号的同步与释放(同步复位、异步复位、异步复位同步释放)

文章目录 背景前言一、复位信号的同步与释放1.1 同步复位1.1.1 综述1.1.2 优缺点 1.2 recovery time和removal time1.3 异步复位1.3.1 综述1.3.2 优缺点 1.4 同步复位 与 异步复位1.5 异步复位、同步释放1.5.1 总述1.5.2 机理1.5.3 复位网络 二、思考与补充2.1 复…

Unity中关于实现 管道水流+瀑布流动+大肠蠕动效果笔记

Unity中关于实现 管道水流瀑布流动大肠蠕动效果笔记 效果展示&#xff1a; 参考资料及链接&#xff1a; 1、如何在 Unity 中创建水效果 - 水弯曲教程 https://www.youtube.com/watch?v3CcWus6d_B8 关于补充个人技能中&#xff1a;顶点噪波影响网格着色器配合粒子实现水特效 …

Cloudpods是一个开源的Golang实现的云原生的融合多云/混合云的云平台,也就是一个“云上之云”。

Cloudpods是一个开源的Golang实现的云原生的融合多云/混合云的云平台&#xff0c;也就是一个“云上之云”。Cloudpods不仅可以管理本地的虚拟机和物理机资源&#xff0c;还可以管理多个云平台和云账号。Cloudpods隐藏了这些异构基础设施资源的数据模型和API的差异&#xff0c;对…

【LeetCode】--- MySQL刷题集合

1.组合两个表&#xff08;外连接&#xff09; select p.firstName,p.lastName,a.city,a.state from Person p left join Address a on p.personId a.personId; 以左边表为基准&#xff0c;去连接右边的表。取两表的交集和左表的全集 2.第二高的薪水 &#xff08;子查询、if…

JavaScript学习笔记(3)

一.BOM对象 BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就 是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能&#xff0c;可以通过操作 BOM对象的相关属性或者函数来完成。例如&#xff1a;我们想要将浏览器的地址改为 http:/…

DRG/DIP 2.0时代下基于PostgreSQL的成本管理实践与探索(下)

五、数据处理与 ETL 流程编程实现 5.1 数据抽取与转换(ETL) 在 DRG/DIP 2.0 时代的医院成本管理中,数据抽取与转换(ETL)是将医院各个业务系统中的原始数据转化为可供成本管理分析使用的关键环节。这一过程涉及从医院 HIS 系统中抽取患者诊疗数据,并对其进行格式转换、字…

【玩转全栈】----YOLO8训练自己的模型并应用

继上篇&#xff1a; 【玩转全栈】---基于YOLO8的图片、视频目标检测-CSDN博客 相信大家已经可以训练一些图片和视频了&#xff0c;接下来我将为大家介绍如何训练自己的特定模型&#xff0c;并用其进行检测 目录 准备数据 图片数据 标识数据 配置文件 运行 测试训练结果 存在的问…

简洁实用的wordpress外贸模板

简洁、实用、大气的wordpress外贸模板&#xff0c;适合跨境电商搭建外贸B2B产品展示型网站。 简洁实用的wordpress外贸模板 - 简站WordPress主题简洁、实用、大气的wordpress外贸模板&#xff0c;适合跨境电商搭建外贸B2B产品展示型网站。https://www.jianzhanpress.com/?p828…

Caesar

Caesar 打开.txt: oknqdbqmoq{kag_tmhq_xqmdzqp_omqemd_qzodkbfuaz} 根据题目判断是凯撒密码&#xff0c;flag前头是cyberpeace{}&#xff0c;可以得到偏移量是12. 所以&#xff1a; cyberpeace{you_have_learned_caesar_encryption} 下面是我找的关于凯撒密码的解密脚本 c…

OpenEuler学习笔记(四):OpenEuler与CentOS的区别在那里?

OpenEuler与CentOS的对比 一、基本信息 起源与背景&#xff1a; OpenEuler&#xff1a;由华为发起&#xff0c;后捐赠给开放原子开源基金会&#xff0c;旨在构建一个开放、多元化的云计算和边缘计算平台&#xff0c;以满足华为及其他企业的硬件和软件需求。CentOS&#xff1a;…

纯css实现div宽度可调整

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>纯css实现div尺寸可调整</title><style…

Cesium特效——城市白模的科技动效的各种效果

最终效果图如下&#xff1a; 实现方法&#xff1a; 步骤一&#xff1a;使用cesiumlib生产白模&#xff0c;格式为3dtiles 注意事项&#xff1a;采用其他方式可能导致白模贴地&#xff0c;从而导致不能实现该效果&#xff0c;例如把步骤二的服务地址改为Cesium Sandcastle 里的…

JavaWeb 学习笔记 XML 和 Json 篇 | 020

今日推荐语 愿你遇见好天气,愿你的征途铺满了星星——圣埃克苏佩里 日期 学习内容 打卡编号2025年01月23日JavaWeb笔记 XML 和 Json 篇020 前言 哈喽&#xff0c;我是菜鸟阿康。 以下是我的学习笔记&#xff0c;既做打卡也做分享&#xff0c;希望对你也有所帮助…

【力扣:新动计划,编程入门 —— 题解 ②】

—— 25.1.23 1512. 好数对的数目 给你一个整数数组 nums 。 如果一组数字 (i,j) 满足 nums[i] nums[j] 且 i < j &#xff0c;就可以认为这是一组 好数对 。 返回好数对的数目。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1,1,3] 输出&#xff1a;4 解释&#xff…

如何在data.table中处理缺失值

&#x1f4ca;&#x1f4bb;【R语言进阶】轻松搞定缺失值&#xff0c;让数据清洗更高效&#xff01; &#x1f44b; 大家好呀&#xff01;今天我要和大家分享一个超实用的R语言技巧——如何在data.table中处理缺失值&#xff0c;并且提供了一个自定义函数calculate_missing_va…

《RWA全球产业白皮书》发布:向凌云教授解析全球经济转型与RWA的未来

2025年1月16日&#xff0c;旅美经济学家、全球新兴产业金融专家向凌云教授在美国发布了引人注目的《RWA全球产业白皮书》。该白皮书通过深入分析全球产业结构变化&#xff0c;尤其强调了“真实世界资产”&#xff08;Real-World Assets&#xff0c;简称RWA&#xff09;在当前及…

TOGAF之架构标准规范-信息系统架构 | 数据架构

TOGAF是工业级的企业架构标准规范&#xff0c;信息系统架构阶段是由数据架构阶段以及应用架构阶段构成&#xff0c;本文主要描述信息系统架构阶段中的数据架构阶段。 如上所示&#xff0c;信息系统架构&#xff08;Information Systems Architectures&#xff09;在TOGAF标准规…