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，一经查实，立即删除！

相关文章

不同vlan之间的通信方法

不同vlan之间的通信方法

1.通过路由器的物理接口 1.给PC1,PC2配置IP地址&#xff0c;网关2.进入交换机配置vlan&#xff0c;交换机所有口都配置access口并绑定vlan3.配置路由器&#xff0c;进入路由器的两个接口配置网关IP和掩码缺点&#xff1a;成本高&#xff0c;每增加一个vlan就需要一个物理端口和…
阅读更多...
辛巴赔付到账，罗永浩退一赔三：直播带货终于往好方向卷了下…

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

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

无人机电调接线

接线方式&#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…
阅读更多...
OpenCV结构分析与形状描述符（22）计算图像中某个轮廓或区域的矩函数moments()的使用

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

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一个多边形或光栅化形状直到三阶的所有矩。 该函数计算一个向量形状或光栅化形状直到三阶的矩。结果返回在 cv::Moments 结构中。 函数原型…
阅读更多...
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.…
阅读更多...
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…
阅读更多...
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&…
阅读更多...
pptpd配置文件/etc/pptpd.conf详解

pptpd配置文件/etc/pptpd.conf详解

正文共&#xff1a;1111 字 2 图&#xff0c;预估阅读时间&#xff1a;1 分钟 如果要在Linux系统配置PPTP&#xff08;Point-to-Point Tunneling Protocol&#xff0c;点到点隧道协议&#xff09;VPN&#xff0c;一般是使用pptpd软件。pptpd命令通常从配置文件/etc/pptpd.conf中…
阅读更多...
单片机拍照_将采集的RGB图像封装为BMP格式保存到SD卡

单片机拍照_将采集的RGB图像封装为BMP格式保存到SD卡

文章目录 一、前言二、BMP文件结构2.1 BMP图片的格式说明 2.2 RGB888与RGB565格式是什么&#xff1f;&#xff08;1&#xff09;RGB565&#xff08;2&#xff09;RGB888&#xff08;3&#xff09;区别&#xff08;4&#xff09;如何构成&#xff08;5&#xff09;示例 三、实现…
阅读更多...
【Leetcode56】合并区间（数组 | 排序）

【Leetcode56】合并区间（数组 | 排序）

文章目录 一、题目二、思路三、代码 一、题目 二、思路 先将所有子列表按照start_pos进行排序&#xff0c;有利于保持顺序性&#xff0c;每次处理新子列表时&#xff0c;只用和结果列表ans_lst的最后一个子列表对比&#xff0c;如果有重合则合并&#xff0c;然后将合并的新子列…
阅读更多...
Java 入门指南：Java 并发编程 —— 同步工具类 Phaser（相位器）

Java 入门指南：Java 并发编程 —— 同步工具类 Phaser（相位器）

文章目录 同步工具类Phaser主要特点核心方法使用步骤适用场景使用示例 同步工具类 JUC&#xff08;Java.util.concurrent&#xff09;是 Java 提供的用于并发编程的工具类库&#xff0c;其中包含了一些通信工具类&#xff0c;用于在多个线程之间进行协调和通信&#xff0c;特别…
阅读更多...
创新实验报告VC++案例开发十二生肖的俄罗斯方块智力游戏完整代码设计方案

创新实验报告VC++案例开发十二生肖的俄罗斯方块智力游戏完整代码设计方案

一&#xff0e;项目名称 十二生肖俄罗斯方块 二&#xff0e;开发背景&#xff1a; 俄罗斯方块是一个很低古老的一个小游戏&#xff0c;到但今日它还有很大的魅力。 三&#xff0e;技术路线或工作原理&#xff1a; 采用的软件及开发平台 Micosoft Visual 6.0 项目的总体方…
阅读更多...
uniapp 原生插件开发 UI

uniapp 原生插件开发 UI

前言&#xff1a; 在集成某些特定 原生SDK的时候&#xff0c;它本身是带UI控件的。当我们使用 uniapp 开发app的时候实是 可以使使用 nvue 页面&#xff0c;以 weex 的方式嵌入原生的UI控件。 我这边的场景是 接入连连app的支付&#xff0c;它有个自己的密码键盘 控件是原生的页…
阅读更多...
树形弹窗选择框/vue2/Element/弹框选择

树形弹窗选择框/vue2/Element/弹框选择

前言 此类选择器根据vueelementUI实现&#xff0c;使用vue3的可以根据此案例稍作改动即可实现&#xff0c;主要功能有弹出选择、搜索过滤、搜索结果高亮等&#xff0c;此选择器只支持单选&#xff0c;如需多选可在此基础进行改造。 效果图 代码实现 使用时&#xff0c;props-…
阅读更多...
NVIDIA AI Workbench 让 Windows 上的 GPU 使用更加简便

NVIDIA AI Workbench 让 Windows 上的 GPU 使用更加简便

NVIDIA AI Workbench 是一款免费的、用户友好型开发环境管理器&#xff0c;可在您选择的系统&#xff08;PC、工作站、数据中心或云&#xff09;上简化数据科学、ML 和 AI 项目。在 Windows、macOS 和 Ubuntu 上&#xff0c;您可以本地开发、测试项目和构建项目原型&#xff0c…
阅读更多...
一文说清什么是数据仓库

一文说清什么是数据仓库

01 数据仓库的概念 数据仓库的概念可以追溯到20世纪80年代&#xff0c;当时IBM的研究人员开发出了“商业数据仓库”。本质上&#xff0c;数据仓库试图提供一种从操作型系统到决策支持环境的数据流架构模型。 目前对数据仓库&#xff08;Data Warehouse&#xff09;的标准定义&a…
阅读更多...
【研赛论文】数学建模2024华为杯论文word/latex模板

【研赛论文】数学建模2024华为杯论文word/latex模板

国赛结束&#xff0c;研究生瞩目的研赛马上就要来了&#xff0c;相信研究生同学也是在努力的准备当中&#xff0c;在这里祝愿大家能够获得一个好的名次。一举冲出重围&#xff0c;拿下国奖。在数模比赛当中&#xff0c;论文是参赛者唯一能够与评阅老师进行沟通的方式&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023