uniapp、web网页跨站数据交互及通讯
来来来,说说你的创作灵感!这就跟吃饭睡觉一样,饿了就找吃的,渴了就倒水张口灌。
最近一个多月实在是忙的没再更新日志,好多粉丝私信说之前的创作于他们而言非常有用!受益菲浅,这里非常感谢粉丝们的抬爱及认可。本来写这些东东也没有什么私心,只是觉的写写,将来有人看到,在工作中会提供一份帮助或思路即可。
好了,来说说本文要总结的技术方案及场景。
使用uniapp开发出来APP,在开发过程中加载到了自己网站上的一些页面,这些页面呢是公共核心功能,不必要再在app上实现一遍,而是直接跨站访问WEB页面的URL,把初化参数传给URL,后续的点击事件等通过jsbridge来发送到APP端实现相应的功能及业务。如:WEB上录入数据完成后点击WEB上的的完成事件按钮后,APP直接回退到上一级页面!这个场景是不是很好玩!WEB上某个事件透传到APP,在APP上进行更友好的弹窗或者提示是不是也很新鲜?下来来贴一下实现代码:
一、web端透传数据到uniapp端
先来看看官方的文档说明:
web-view的文档
https://uniapp.dcloud.net.cn/component/web-view.html自行从头到尾阅读一下整体文档及说明,这里直接进入正题整理相关的方案:
uni.webview.js最新版地址:hybrid/html/uni.webview.1.5.5.js · alpha · DCloud / hello uni-app x · GitCode

1、在你的web项目中的public目录创建一个名为uni.webview.js 的文件,当然你自己可台随便给名。
2、点击上面连接的JS文件,拷贝文件里面的所有的代码粘贴到上步创建的文件中。
3、按照下图在你的index.html引入本地新加的uni.webview.js文件。当然你可以忽略1、2步,直接在src处引入'https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js'连接,只是没有本地加载来的效率高快而已。同时注意<script></script>脚本必须位于body之下!!!

引入后,在你的web页面相关需要通讯的地方添加以下代码:

至此WEB上相关的业务已经完成部署,来看看UNIAPP上的代码实现:
在你加载web页面的业务处,给webview添加message事件!

uniapp实现业务逻辑:
注意真机运行有效!
二、uniapp透传数据到web端
1、app端:参数对象必须json序列化!app2web这个就是你注册的方法名,可以根据你自己的习惯去命名即可。

2、web端:因为我web端没有具体的业务要求,所以没有具体的业务实现。

相关文章:
uniapp、web网页跨站数据交互及通讯
来来来,说说你的创作灵感!这就跟吃饭睡觉一样,饿了就找吃的,渴了就倒水张口灌。 最近一个多月实在是忙的没再更新日志,好多粉丝私信说之前的创作于他们而言非常有用!受益菲浅,这里非常感谢粉丝…...
2024-05-10 Ubuntu上面使用libyuv,用于转换、缩放、旋转和其他操作YUV图像数据,测试实例使用I420ToRGB24
一、简介:libyuv 最初是由Google开发的,主要是为了支持WebRTC项目中的视频处理需求。用于处理YUV格式图像数据的开源库。它提供了一系列的函数,用于转换、缩放、旋转和其他操作YUV图像数据。 二、执行下面的命令下载和安装libyuv。 git clo…...
怎么给视频加水印?2招轻松搞定
在数字媒体时代,视频水印作为一种有效的版权保护手段,被广泛应用于各种场景。给视频添加水印不仅可以防止内容被恶意盗用,还能增加视频的辨识度,提升品牌形象。本文将为您介绍2种简单易行的方法,教您怎么给视频加水印&…...
SpringBootWeb 篇-深入了解请求响应(服务端接收不同类型的请求参数的方式)
🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 请求响应概述 1.1 简单参数 1.2 实体参数 2.3 数组集合参数 2.4 日期参数 2.5 json 参数 2.6 路径参数 3.0 完整代码 1.0 请求响应概述 当客户端发送不同的请求参…...
实验十 智能手机互联网程序设计(微信程序方向)实验报告
实验目的和要求 完成以下页面设计。 二、实验步骤与结果(给出对应的代码或运行结果截图) Wxml <view class"container"> <view class"header"> <view class"logo"…...
Python图形复刻——绘制母亲节花束
各位小伙伴,好久不见,今天学习用Python绘制花束。 有一种爱,不求回报,有一种情,无私奉献,这就是母爱。祝天下妈妈节日快乐,幸福永远! 图形展示: 代码展示: …...
【算法优选】 动态规划之子数组、子串系列——壹
文章目录 🎋前言🎋最大子数组和🚩题目描述🚩算法思路🚩代码实现 🌴环形子数组的最大和🚩题目描述🚩算法思路:🚩代码实现 🌲乘积最大子数组&#x…...
PXE+Kickstart无人值守安装安装Centos7.9
文章目录 一、什么是PXE1、简介2、工作模式3、工作流程 二、什么是Kickstart1、简介2、触发方式 三、无人值守安装系统工作流程四、实验部署1、环境准备2、服务端:关闭防火墙和selinux3、添加一张仅主机的网卡4、配置仅主机的网卡4.1、修改网络连接名4.2、配IP地址4…...
C语言实现通讯录,包括增删改查以及动态开辟内存,写入文件等功能
文章目录 前言一、注意二、源码1. test.c源文件2. contact.h头文件3. contact.c源文件 总结 前言 C语言实现通讯录,包括增删改查以及动态开辟内存,写入文件等功能 一、注意 在通讯录菜单栏使用枚举定义PeoInfo类型时,每个结构体类型的成员…...
flowable多对并发网关跳转的分析
更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: h…...
【嵌入式——QT】QT集成Ymodem协议使用UDP进行传输
【嵌入式——QT】QT集成Ymodem协议使用UDP进行传输 Ymodem协议帧的数据格式帧头包号校验 通讯过程握手信号起始帧数据帧结束帧代码块 Ymodem命令 QT实现YmodemFileTransmit.hYmodemFileTransmit.cppBootLoader.hBootLoader.cppYmodem协议源码 Ymodem协议 帧的数据格式 帧头、…...
python笔记(17)输入输出
一、标准输入与输出简介 Python通过内置的sys模块管理标准输入(stdin)、标准输出(stdout)和标准错误(stderr)。但对大多数简单应用而言,直接使用内置函数就足够了。 二、输入:inpu…...
408数据结构总结复习笔记一:线性表
408数据结构总结复习笔记一:线性表 从现在开始慢慢更新我的考研复习笔记系列吧~ PS:主要是我自己个人复习过程中觉得重点的点,大家仅供参考哈~ 上岸!!!大家一起加油! 顺序表和链表的比较 顺序表链表存取…...
Docker——目录迁移
我们在生产环境中安装Docker时,默认的安装目录是/var/lib/docker,而通常情况下,规划给系统盘的目录一般为50G,该目录是比较小的,一旦容器过多或容器日志过多,就可能出现Docker无法运行的情况,所…...
SpringAMQP-消息转换器
这边发送消息接收消息默认是jdk的序列化方式,发送到服务器是以字节码的形式,我们看不懂也很占内存,所以我们要手动设置一下 我这边设置成json的序列化方式,注意发送方和接收方的序列化方式要保持一致 不然回报错。 引入依赖&#…...
轻松拿下指针(5)
文章目录 一、回调函数是什么二、qsort使用举例三、qsort函数的模拟实现 一、回调函数是什么 回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数的指针(地址)作为参数传递给另⼀个函数,当这个指针被⽤来调⽤其所指向的函数 时&#x…...
Nginx反向代理配置
一、介绍 Nginx 的反向代理功能在现代网络架构中扮演着至关重要的角色。首先,它充当了客户端与后端服务器之间的中介。当客户端发送请求时,这些请求先到达 Nginx 服务器,Nginx 会根据预先设定的规则和配置,将请求准确地转发到相应…...
突破编程界限:探索AI编程新境界
文章目录 一、AI编程助手1.1 Baidu Comate智能代码助手1.2 阿里云 通义灵码 二、场景需求三、体验步骤3.1 官网下载3.2 手动下载 四、试用感受4.1 提示4.2 注释生成代码4.3 代码生成4.4 选中生成注释4.5 查看变更&新建文件4.6 调优建议4.7 插件使用 五、结尾推荐 一、AI编程…...
C语言(指针)2
Hi~!这里是奋斗的小羊,很荣幸各位能阅读我的文章,诚请评论指点,关注收藏,欢迎欢迎~~ 💥个人主页:小羊在奋斗 💥所属专栏:C语言 本系列文章为个人学习笔记&#x…...
go学习笔记
1基础搭建 1.1,安装vscode https://code.visualstudio.com/download 64位 1.2,Windows 下搭建Go 开发环境-安装和配置 SDK SDK 的全称(Software Development Kit 软件开发工具包) Go 语言的官网为:golang.org , 因为各种原因,可…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)
引言 在嵌入式系统中,用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例,介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单,执行相应操作,并提供平滑的滚动动画效果。 本文设计了一个…...
二叉树-144.二叉树的前序遍历-力扣(LeetCode)
一、题目解析 对于递归方法的前序遍历十分简单,但对于一位合格的程序猿而言,需要掌握将递归转化为非递归的能力,毕竟递归调用的时候会调用大量的栈帧,存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧,而非…...
使用python进行图像处理—图像滤波(5)
图像滤波是图像处理中最基本和最重要的操作之一。它的目的是在空间域上修改图像的像素值,以达到平滑(去噪)、锐化、边缘检测等效果。滤波通常通过卷积操作实现。 5.1卷积(Convolution)原理 卷积是滤波的核心。它是一种数学运算,…...
break 语句和 continue 语句
break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行 break break语句用于跳出代码块或循环 1 2 3 4 5 6 for (var i 0; i < 5; i) { if (i 3){ break; } console.log(i); } continue continue语句用于立即终…...
使用VMware克隆功能快速搭建集群
自己搭建的虚拟机,后续不管是学习java还是大数据,都需要集群,java需要分布式的微服务,大数据Hadoop的计算集群,如果从头开始搭建虚拟机会比较费时费力,这里分享一下如何使用克隆功能快速搭建一个集群 先把…...
汇编语言学习(三)——DoxBox中debug的使用
目录 一、安装DoxBox,并下载汇编工具(MASM文件) 二、debug是什么 三、debug中的命令 一、安装DoxBox,并下载汇编工具(MASM文件) 链接: https://pan.baidu.com/s/1IbyJj-JIkl_oMOJmkKiaGQ?pw…...
