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

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.datasend(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 = resinitMap()} catch (e) {uni.showToast({title: e.message})send(e.message)}}})

http://www.lryc.cn/news/525217.html

相关文章:

  • 嵌入式知识点总结 C/C++ 专题提升(七)-位操作
  • 新星杯-ESP32智能硬件开发--ESP32的I/O组成
  • 航空航天混合动力(7)航空航天分布式电推进系统
  • AIGC视频生成明星——Emu Video模型
  • Cyber Security 101-Security Solutions-Firewall Fundamentals(防火墙基础)
  • 备赛蓝桥杯之第十五届职业院校组省赛第一题:智能停车系统
  • Docker核心命令与Yocto项目的高效应用
  • idea plugin插件开发——入门级教程(IntelliJ IDEA Plugin)
  • 61,【1】BUUCTF WEB BUU XSS COURSE 11
  • 开发环境搭建-1:配置 WSL (类 centos 的 oracle linux 官方镜像)
  • Spring Boot MyBatis Plus 版本兼容问题(记录)
  • 26. 【.NET 8 实战--孢子记账--从单体到微服务】--需求更新--用户注销、修改用户名、安全设置
  • 神经网络|(一)加权平均法,感知机和神经元
  • OpenHarmony OTA升级参考资料记录
  • 在 Kubernetes 上快速安装 KubeSphere v4.1.2
  • 【回忆迷宫——处理方法+DFS】
  • 华为OD机试真题---战场索敌
  • 计算机网络 (53)互联网使用的安全协议
  • c++算法贪心系列
  • 【Maui】注销用户,采用“手势”点击label弹窗选择
  • 智慧脚下生根,智能井盖监测终端引领城市安全新革命
  • Word2Vec如何优化从中间层到输出层的计算?
  • 第七篇:vue3 计算属性:computed
  • 搭建k8s集群
  • Android SystemUI——最近任务应用列表(十七)
  • java 根据前端传回的png图片数组,后端加水印加密码生成pdf,返回给前端
  • 《探秘鸿蒙Next:如何保障AI模型轻量化后多设备协同功能一致》
  • C语言二级
  • 隐私保护+性能优化,RyTuneX 让你的电脑更快更安全
  • rust学习-宏的定义与使用