uniapp webview实现双向通信

需求:uniapp webview嵌套一个h5 实现双向通信

  • uniapp 代码
<template><view><web-view src="http://192.168.3.150:9003/" @message="onMessage"></web-view></view>
</template><script>export default {data(){return{currentWebview:null}},mounted() {const self = this;self.currentWebview = self.$scope.$getAppWebview().children()[0]let info = {name:'hello'}self.currentWebview.evalJS(`uniEvent(${JSON.stringify(info)})`);setInterval(() => {self.currentWebview.evalJS(`uniEvent(${JSON.stringify(info)})`);},1000)},methods: {onMessage(e) {console.log('来自页面的消息', e.detail.data);uni.showToast({title: e.detail.data, icon: 'none'});}}}
</script>
  • h5 页面代码
<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>测试</title><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body onload="addUniEvenPassthrough()"><div class="margin-top:200px;"></div><button onclick="sendMessage()">Send message to uniapp</button><button onclick="sendMessage()">Send message to uniapp</button><button onclick="sendMessage()">Send message to uniapp</button><button onclick="sendMessage()">Send message to uniapp</button><button onclick="sendMessage()">Send message to uniapp</button><button onclick="sendMessage()">Send message to uniapp</button><button onclick="sendMessage()">Send message to uniapp</button><script>function sendMessage() {uni.postMessage({data: 'Hello from web page!'});}function addUniEvenPassthrough() {window.uniEvent = function(info) {console.log('webview通信', JSON.stringify(info));}}</script>
</body>
</html>
  • 效果
    在这里插入图片描述
    在这里插入图片描述

ps: 如果你webview嵌套的h5 是uniapp打包出来的 那么uni.postMessage 方法调用不成功的话,成得改成 uni.webView.postMessage

在这里插入图片描述

  • 这样就成功了
    在这里插入图片描述

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

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

相关文章

全网首发YOLOv8暴力涨点:Gold-YOLO,遥遥领先,超越所有YOLO | 华为诺亚NeurIPS23

💡💡💡本文独家改进:提出了全新的信息聚集-分发(Gather-and-Distribute Mechanism)GD机制,Gold-YOLO,替换yolov8 head部分 实现暴力涨点 Gold-YOLO | 亲测在多个数据集能够实现大幅涨点 💡💡💡Yolov8魔术师,独家首发创新(原创),适用于Yolov5、Yolov7、…

Mysql主从数据恢复随笔

目录 1.使用pt-table-checksum插件安装方式如下 2.在主节点执行检查数据同步情况 3.同步检查出现的问题 3.1没有sock文件 3.2 Authentication plugin ‘sha256_password’ cannot be loaded: /usr/lib64/mysql/plugin/sha256_password.so: 无法打开共享对象文件: 没有那个文…

【办公自动化】使用Python一键往Word文档的表格中填写数据(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

vSAN数据恢复-vSAN架构下虚拟机磁盘组件出现问题的数据恢复案例

vsan数据恢复环境&#xff1a; 一套VMware vSAN超融合基础架构&#xff0c;全闪存&#xff0c;开启压缩重删。共11台服务器节点。每台服务器节点上配置1块PCIE固态硬盘和8-10块SSD固态硬盘。 每个服务器节点上创建1个磁盘组&#xff0c;每个磁盘组将1个PCIE固态硬盘识别为2个硬…

YOLOv8快速复现 官网版本 ultralytics

YOLOV8环境安装教程.&#xff1a;https://www.bilibili.com/video/BV1dG4y1c7dH/ YOLOV8保姆级教学视频:https://www.bilibili.com/video/BV1qd4y1L7aX/ b站视频&#xff1a;https://www.bilibili.com/video/BV12p4y1c7UY/ 1 平台搭建YOLOv8 平台&#xff1a;https://www.a…

Halcon Tuple相关算子(一)

(1) tuple_length( : : Tuple : Length) 功能&#xff1a;返回输入元组中元素的个数。 控制输入参数&#xff1a; Tuple&#xff1a;输入元组&#xff1b; 控制输出参数&#xff1a;length&#xff1a;输入元组中元素的个数。 (2) tuple_find( : : Tuple, ToFind : Indices…

使用Python进行员工流失分析

员工流失分析是指分析离开公司、企业的员工的行为&#xff0c;并将他们与公司中的现有员工进行比较。它有助于找出哪些员工可能很快离开。所以&#xff0c;如果你想学习如何分析员工流失&#xff0c;这篇文章适合你。本文中&#xff0c;将带您完成使用Python进行员工流失分析的…

【李沐深度学习笔记】基础优化方法

课程地址和说明 基础优化方法p2 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 基础优化方法 在讲具体的线性回归实现之前&#xff0c;要先讲一下基础的优化模型的方法 梯度下降 当模型没有显示解&#xff08…

华为孟晚舟:从最惨千金 到最强战士

作者&#xff1a;积溪 简评&#xff1a;华为25号开发布会&#xff0c;有何深意&#xff1f;从最惨千金到最强战士&#xff0c;孟晚舟和华为都回来了 #华为发布会 #孟晚舟 #任正非 #华为 华为发布会 在打谁的脸&#xff1f; 苹果只是前菜 今天才是正餐 两年前的今天 华为…

数据结构 | 树

树 树是n&#xff08;n>0&#xff09;个结点的有限集。当n 0时&#xff0c;称为空树。在任意一棵非空树中应满足&#xff1a; 有且仅有一个特定的称为根的结点。当n>1时&#xff0c;其余节点可分为m&#xff08;m>0&#xff09;个互不相交的有限集T1,T2,…,Tm&#…

Excel 技巧记录-那些复杂的公式和函数

目标表格的关键字在行和列里&#xff0c;匹配源表格的行和列对应的关键字 **具体需求为&#xff1a;**表A叫Total_202308.xlsx&#xff0c;sheet叫摊销前分析&#xff0c;表B叫data.xlsx,sheet叫总部费用&#xff0c;表A的数据里&#xff0c;A列是科目名称&#xff0c;第9行是…

git_回退到上一次commit与pull

git 回退到上个版本 rollback 回滚 git reset HEAD&#xff0c; git 回退到上一版本

每天一个注解之@ConditionalOnProperty

ConditionalOnProperty ConditionalOnProperty(prefix “data”, havingValue “jyh”, matchIfMissing false, name “from”) 表示示在满足特定条件时才会创建或启用 bean。具体来说&#xff0c;这个条件是基于应用程序的属性&#xff08;Properties&#xff09;配置的。…

服务器怎么启动vue3 构建的dist 服务

服务器怎么启动vue3 构建的dist 服务 服务器启动Vue3构建的dist服务&#xff0c;可以按照以下步骤进行操作&#xff1a; 1.将Vue3项目构建的dist文件夹中的所有文件复制到服务器的静态资源文件夹中&#xff0c;例如/var/www/html/。 2.在服务器上安装Node.js环境&#xff0c;并…

LCP 66.最小展台数量

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;LCP 66. 最小展台数量 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 对每种类型的展台在会在某一天中的出现的最大数量求和即可。 解题代码&#xff1a; class Solution {public int mi…

SpringCloud 学习(一)简介和环境搭建

1. 简介 1.1 SpringCloud SpringCloud 基于 SpringBoot 提供了一套微服务解决方案&#xff0c;包括服务注册与发现&#xff0c;配置中心&#xff0c;全链路监控&#xff0c;服务网关&#xff0c;负载均衡&#xff0c;熔断器等组件&#xff0c;除了 NetFlix 的开源组件做高度抽…

SpringMVC 学习(一)Servlet

1. Hello Servlet (1) 创建父工程 删除src文件夹 引入一些基本的依赖 <!--依赖--> <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test<…

【KMP算法】C++

KMP算法的原理是通过构建部分匹配表&#xff0c;来利用已经匹配过的信息&#xff0c;避免不必要的回溯。部分匹配表是一个长度与模式字符串相等的数组&#xff0c;用于记录在每个位置上的最长公共前后缀的长度。 这样图片完全表达了KMP算法的核心思想&#xff0c;出处来自添加链…

ruoyi-nbcio项目增加右上角的消息提醒

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 因为以后流程的通知需要提醒&#xff0c;所以右上角需要增加消息提醒。 1、增加右上角的按钮与信息 <div class"right-menu"><templat…

深入探讨Vue.js:从基础到高级(最佳实践)

文章目录 Vue.js 基础1. Vue.js 是什么&#xff1f;2. Vue 实例3. 双向数据绑定 Vue 组件1. 什么是 Vue 组件&#xff1f;2. 组件之间的通信 Vue 模板语法1. 插值和指令2. 条件和循环3. 事件绑定和表单输入绑定 Vue 路由1. Vue Router安装和配置&#xff1a;导航&#xff1a; 2…