uni-app实现web-view和App之间的相互通信

双向实时

如果app端部署成网站，则web-view就是iframe，使用也可以双向通讯

https://uniapp.dcloud.net.cn/component/web-view.html

APP端代码

index.vue:

<template><web-viewid="m-webview":fullscreen="true":src="webViewSrc":webview-styles="{ height: '400px' }"@message="handleMessage"@onPostMessage="handlePostMessge"@load="handleLoad"@error="handleError"></web-view>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'let webViewSrc = ref('')
let webview: any
//#region 事件
const handleH5Message = (value: any) => {console.log('父应用接收消息，handleH5Message', value.data.data)handleH5PostMessage()
}const handleMessage = (value: any) => {console.log('父应用接收消息，handleMessage', value)webview.evalJS('globalCallbackForApp("点击")')if (Array.isArray(value.detail?.data) && value.detail.data.length > 0) {if (value.detail.data[0].type === 'msg' &&value.detail.data[0].value === 'chooseImage') {if (value.detail.data[0].callback) {webview.evalJS(`${value.detail.data[0].callback}("自定义点击")`)}uni.chooseImage({count: 1, // 默认9, 设置图片的选择数量sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], // 从相册选择success: (res) => {// 返回选定照片的本地文件路径列表 tempFilePathsconsole.log(res.tempFilePaths)},fail: (err) => {// 处理错误console.error(err)},})}}
}const handlePostMessge = (value: any) => {console.log('handlePostMessge', value)
}const handleLoad = (value: any) => {console.log('handleLoad', value)
}const handleError = (value: any) => {console.log('handleError', value)
}//#endregionconst handleMessageInit = () => {// #ifdef H5window.removeEventListener('message', handleH5Message)window.addEventListener('message', handleH5Message)// #endif
}const handleH5PostMessage = () => {var iframe: any = document.getElementById('m-webview')var message = {target: 'iframe',data: 'Hello, I am your parent',}console.log('父应用发送消息', message)iframe.contentWindow.postMessage(message, '*')
}const init = (option: any) => {handleMessageInit()webViewSrc.value = option.webViewUrl// #ifdef APP-PLUS//https://uniapp.dcloud.net.cn/tutorial/page.html#getappwebviewlet pages = getCurrentPages()let page: any = pages[pages.length - 1]let currentWebview = page.$getAppWebview()setTimeout(() => {webview = currentWebview.children()[0]console.log('this.wvNode.evalJS2', typeof webview.evalJS)if (typeof webview.evalJS === 'function') {console.log('执行')webview.evalJS('globalCallbackForApp("初始化")')}}, 1000)// #endif
}onLoad((option) => {init(option)
})
</script><style lang="scss" scoped></style>

被嵌入的网页端代码

list-user.vue:

<template><view><view class="m-title">工艺报警</view><text>{{ title }}</text><view class="m-btn-wrap"><cl-button @click="handleClick">打开相册</cl-button></view></view>
</template><script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";const title = ref("");//#region 事件
const handleFormatPostMessageData = (value: any) => {if (typeof value.callbackFun === "function") {window[value.callback] = value.callbackFun;delete value.callbackFun}return {...value,};
};const handleClick = () => {console.log("子应用发送消息");webViewUni.postMessage({data: handleFormatPostMessageData({type: "msg",value: "chooseImage",callback: "customCallbackClick",callbackFun: (data: any) => {console.log("子应用接收父应用的实时消息【自定义】:", data);},}),});
};//#endregionconst init = () => {window.addEventListener("message",function (event) {if (event.data.target === "iframe") {console.log("子应用接收消息:", event.data.data);}},false,);
};onLoad(() => {init();
});
</script><style lang="scss" scoped>
.m-title {padding: 20rpx;color: #666;font-size: 40rpx;
}
.m-btn-wrap {padding: 20rpx;
}
</style>

hybrid_html_uni.webview.1.5.5.js:

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}function a(){return window.__uniapp_x_postMessage||window.__uniapp_x_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(a()){if("postMessage"===e){var r={data:n};return window.__uniapp_x_postMessage?window.__uniapp_x_postMessage(r):window.__uniapp_x_.postMessage(JSON.stringify(r))}var d={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__uniapp_x_postMessage?window.__uniapp_x_postMessageToService(d):window.__uniapp_x_.postMessageToService(JSON.stringify(d))}else if(o()){if("postMessage"===e){var s={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(s):window.__dcloud_weex_.postMessage(JSON.stringify(s))}var w={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(w):window.__dcloud_weex_.postMessageToService(JSON.stringify(w))}else{if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var u=plus.webview.currentWebview();if(!u)throw new Error("plus.webview.currentWebview() is undefined");var g=u.parent(),v="";v=g?g.id:u.id,t.push(v)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var c=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(c,",").concat(JSON.stringify(t),");"))}}},d={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){a()?e({uvue:!0}):o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},s=/uni-app/i.test(navigator.userAgent),w=/Html5Plus/i.test(navigator.userAgent),u=/complete|loaded|interactive/;var g=window.my&&navigator.userAgent.indexOf(["t","n","e","i","l","C","y","a","p","i","l","A"].reverse().join(""))>-1;var v=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var _=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var m=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var E=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var x=window.xhs&&window.xhs.miniProgram&&/xhsminiapp/i.test(navigator.userAgent);for(var S,h=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},y=[function(e){if(s||w)return window.__uniapp_x_postMessage||window.__uniapp_x_||window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&u.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),d},function(e){if(_)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(g){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(v)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(p)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(m){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(E)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){if(x)return window.xhs.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),d}],M=0;M<y.length&&!(S=y[M](h));M++);S||(S={});var P="undefined"!=typeof uni?uni:{};if(!P.navigateTo)for(var b in S)i(S,b)&&(P[b]=S[b]);return P.webView=S,P}));

index.html

<!doctype html>
<html><head><meta charset="UTF-8" /><script>window.globalCallbackForApp = function (value) {console.log("子应用接收父应用的实时消息【全局】", value);};var coverSupport ="CSS" in window &&typeof CSS.supports === "function" &&(CSS.supports("top: env(a)") || CSS.supports("top: constant(a)"));document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +(coverSupport ? ", viewport-fit=cover" : "") +'" />',);</script><script src="/src/static//js/hybrid_html_uni.webview.1.5.5.js"></script><!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=PB3X34j5vGW07DLETDN11qtTrrV1fn8M"></script> --><script type="text/javascript">window.webViewUni = uni;// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。document.addEventListener("UniAppJSBridgeReady", function () {// webViewUni.postMessage({// 	data: {// 		action: "message",// 	},// });// webViewUni.getEnv(function (res) {// 	console.log("当前环境：" + JSON.stringify(res));// });});</script><title></title><!--preload-links--><!--app-context--></head><body><div id="app"><!--app-html--></div><script type="module" src="/src/main.ts"></script></body>
</html>

APP端代码（选项式）

<template><web-viewref="webview"src="http://11.2.244.245:9901/pages/home/list-user/index":fullscreen="false"id="m-webview"></web-view>
</template><script lang="ts">
export default {data() {return {webUrl: '',wvNode: null,}},onReady() {// #ifdef APP-PLUSvar currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效setTimeout(() => {this.wvNode = currentWebview.children()[0]console.log('currentWebview', currentWebview)console.log('this.wvNode.evalJS1', this.wvNode)console.log('this.wvNode.evalJS', typeof this.wvNode.evalJS)console.log('执行')this.wvNode.evalJS('msgFromApp("来着父组件的消息")')}, 1000)// #endif},onHide() {// console.log('patrol-h5-onHide')// #ifdef APP-PLUSconst name = 'stop'this.wvNode.evalJS("msgFromApp('" + name + "')")// console.log('---currentWebview---wvNode---onHide=',this.wvNode.evalJS)// #endif},
}
</script><style lang="scss" scoped></style>

https://uniapp.dcloud.net.cn/tutorial/page.html#getappwebview

参考链接

https://juejin.cn/post/7230727650259025980

人工智能学习网站 

https://chat.xutongbao.top

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/52592.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

epoll内核原理与实现详解

epoll内核原理与实现详解

目录 1 epoll相关理论基础 1.1 I/O多路复用技术 1.2 事件驱动模型 1.2.1 基本概念 1.2.2 优缺点分析 1.2.3 与epoll的关联 1.3 epoll机制简介 1.3.1 核心原理 1.3.2 优点 2 epoll内核原理 2.1 epoll数据结构 2.1.1 主要数据结构 2.1.2 数据结构关系 2.2 epoll工作…
阅读更多...
不同vlan之间的通信方法

不同vlan之间的通信方法

1.通过路由器的物理接口 1.给PC1,PC2配置IP地址&#xff0c;网关2.进入交换机配置vlan&#xff0c;交换机所有口都配置access口并绑定vlan3.配置路由器&#xff0c;进入路由器的两个接口配置网关IP和掩码缺点&#xff1a;成本高&#xff0c;每增加一个vlan就需要一个物理端口和…
阅读更多...
双流join

双流join

在 Flink 中实现双流 join 主要有两种方式&#xff1a;基于窗口的 join&#xff08;Window Join&#xff09;和基于时间区间的 join&#xff08;Interval Join&#xff09;。以下是这两种方式的简要说明和代码示例&#xff1a; 1. 基于窗口的 join&#xff08;Window Join&…
阅读更多...
辛巴赔付到账，罗永浩退一赔三：直播带货终于往好方向卷了下…

辛巴赔付到账，罗永浩退一赔三：直播带货终于往好方向卷了下…

因为快手顶流辛巴扔出的一颗重磅炸弹「被辛巴架火上烤&#xff0c;带货顶流圈快乱成一锅粥了……」&#xff0c;把直播带货行业藏在深处的淤泥炸出了水面。 原本表面看上去清澈、安静的水面&#xff0c;越来越浑&#xff0c;且还冒着火星子&#xff01;‍‍‍‍‍‍‍ 自从这个…
阅读更多...
学习node.js十三，文件的上传于下载

学习node.js十三，文件的上传于下载

文件上传 文件上传的方案&#xff1a; 大文件上传&#xff1a;将大文件切分成较小的片段&#xff08;通常称为分片或块&#xff09;&#xff0c;然后逐个上传这些分片。这种方法可以提高上传的稳定性&#xff0c;因为如果某个分片上传失败&#xff0c;只需要重新上传该分片而…
阅读更多...
无人机电调接线

无人机电调接线

接线方式&#xff1a; 电调的作用是将飞控板的PWM控制信号转变为电流信号 因为电机的电流是很大的&#xff0c;通常每个点击正常工作时都平均有3A左右的电流&#xff0c;如果没有电调的存在&#xff0c;飞控无法承受这么大的电流。 电调的选择&#xff1a;电调上标的电流值是…
阅读更多...
六、图结构

六、图结构

文章目录 一、引入二、基本概念三、图的表示四、图的遍历4.1 图的深度优先遍历&#xff08;DFS&#xff09;4.2 图的广度优先遍历&#xff08;BFS&#xff09;4.3 图的深度优先 VS 广度优先 一、引入 二、基本概念 三、图的表示 package com.gyh.grapg;import java.util.ArrayL…
阅读更多...
udt聊天室

udt聊天室

创建一个简单的udp聊天室 服务器代码思路&#xff1a; 初始化&#xff1a; 创建UDP套接字。配置服务器的IP和端口号&#xff0c;并绑定套接字到这个地址。 数据接收和处理&#xff1a; 使用循环接收客户端发来的消息。recvfrom()解析消息类型&#xff08;如登录、发送、下线&a…
阅读更多...
OpenCV结构分析与形状描述符（22）计算图像中某个轮廓或区域的矩函数moments()的使用

OpenCV结构分析与形状描述符（22）计算图像中某个轮廓或区域的矩函数moments()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一个多边形或光栅化形状直到三阶的所有矩。 该函数计算一个向量形状或光栅化形状直到三阶的矩。结果返回在 cv::Moments 结构中。 函数原型…
阅读更多...
基本输入与输出

基本输入与输出

引言 在前面的课程中&#xff0c;我们已经学习了 Python 中的基本数据类型、数据类型的运算和转换。本课时将聚焦于 Python 中的基本输入与输出功能&#xff0c;具体包括使用 input() 函数获取用户输入、使用 print() 函数输出信息以及格式化输出。通过这些功能&#xff0c;你可…
阅读更多...
ATF UFS初始化笔记

ATF UFS初始化笔记

1. JESD220 中关于UFS初始化的描述 原文 13.1.3 Initialization and boot code download process The initialization and boot code download process is made up of the following phases: partial initialization, boot transfer and initialization completion. 13.1.3.…
阅读更多...
多线程——死锁

多线程——死锁

死锁 在Java中使用多线程&#xff0c;就会有可能导致死锁问题。死锁会让程序一直卡住&#xff0c;程序不再往下执行。 我们只能通过中止并重启的方式来让程序重新执行。 这是我们非常不愿意看到的一种现象&#xff0c;我们要尽可能避免死锁的情况发生&#xff01; 死锁的原因…
阅读更多...
数据结构之栈和队列的应用

数据结构之栈和队列的应用

目录 一、栈的应用 1. 括号匹配 2. 计算后缀表达式 方法一&#xff08;栈&#xff09; 方法二&#xff08;数组模拟栈&#xff09; 二、队列应用 1. 二叉树层序遍历 方法一&#xff08;队列&#xff09; 三、总结 一、栈的应用 1. 括号匹配 给定一个只包括 (&#xf…
阅读更多...
List＜Map＜String, Object＞＞汇总统计排序

List＜Map＜String, Object＞＞汇总统计排序

开发环境&#xff1a;jdk 1.8 需求一&#xff1a; 1、统计每个小时(升序)不同事件的产品产量 2、统计不同事件&#xff08;OK 、NG&#xff09;的总产量 public static void main(String[] args) {//数据源List<Map<String, Object>> list new ArrayList<Map…
阅读更多...
云计算实训48——k8s环境搭建（详细版）

云计算实训48——k8s环境搭建（详细版）

1.创建主机、设置ip、设置hostname 2.设置免密登录 # 生成私钥 [rootk8s-master ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): /root/.ssh/id_rsa already exists. Overwrite (y/n)? y Enter passphr…
阅读更多...
77-java 装饰器模式和适配器模式区别

77-java 装饰器模式和适配器模式区别

‌Java中的装饰器模式和适配器模式虽然都涉及到对象的组合和包装&#xff0c;但它们的应用场景和目的有所不同。‌ ‌装饰器模式的目的是在不修改原始对象的基础上&#xff0c;动态地添加功能或行为。‌它允许用户通过创建一个包含原始对象的包装类&#xff08;装饰器&#xff…
阅读更多...
Computer Vision的学习路线

Computer Vision的学习路线

学习**Computer Vision&#xff08;计算机视觉&#xff09;**的过程中&#xff0c;可以按照以下步骤循序渐进地掌握基础知识、算法和实际应用。这个学习路线将涵盖从基础理论到前沿技术的各个层面。 1. 数学与基础知识 1.1 线性代数 计算机视觉中的图像处理和模型训练都依赖…
阅读更多...
Uni-app 开发微信小程序

Uni-app 开发微信小程序

随着移动互联网的发展&#xff0c;微信小程序已经成为一种流行的应用开发模式。Uni-app 作为一种跨平台的开发框架&#xff0c;使用 Vue.js 语法&#xff0c;能够方便快速地开发出 微信小程序、H5、App 等多端应用。本指南将引导您从环境配置到实战案例开发&#xff0c;帮助您快…
阅读更多...
vue3 使用swiper制作带缩略图的轮播图

vue3 使用swiper制作带缩略图的轮播图

效果图 实现代码 <template><div class"wrap"><!-- 主轮播图 --><swiper :style"{--swiper-navigation-color: #fff,--swiper-pagination-color: #fff,}" :modules"modules" :navigation"true" :thumbs"{ …
阅读更多...
计算机网络 第2章 物理层

计算机网络 第2章 物理层

文章目录 通信基础基本概念信道的极限容量编码与调制常用的编码方法常用的调制方法 传输介质双绞线同轴电缆光纤以太网对有限传输介质的命名规则无线传输介质物理层接口的特性 物理层设备中继器集线器一些特性 物理层任务&#xff1a;实现相邻节点之间比特&#xff08;0或1&…
阅读更多...
最新文章

Copyright @ 2022~2023