uniapp、web网页跨站数据交互及通讯

        来来来,说说你的创作灵感!这就跟吃饭睡觉一样,饿了就找吃的,渴了就倒水张口灌。

最近一个多月实在是忙的没再更新日志,好多粉丝私信说之前的创作于他们而言非常有用!受益菲浅,这里非常感谢粉丝们的抬爱及认可。本来写这些东东也没有什么私心,只是觉的写写,将来有人看到,在工作中会提供一份帮助或思路即可。

        好了,来说说本文要总结的技术方案及场景。

使用uniapp开发出来APP,在开发过程中加载到了自己网站上的一些页面,这些页面呢是公共核心功能,不必要再在app上实现一遍,而是直接跨站访问WEB页面的URL,把初化参数传给URL,后续的点击事件等通过jsbridge来发送到APP端实现相应的功能及业务。如:WEB上录入数据完成后点击WEB上的的完成事件按钮后,APP直接回退到上一级页面!这个场景是不是很好玩!WEB上某个事件透传到APP,在APP上进行更友好的弹窗或者提示是不是也很新鲜?下来来贴一下实现代码:

 一、web端透传数据到uniapp端

先来看看官方的文档说明:

web-view的文档icon-default.png?t=N7T8https://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端没有具体的业务要求,所以没有具体的业务实现。

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

无人直播新模式——视频挂机自动播,一小时收益上千元,思路分享!

无人直播新模式——视频挂机自动播&#xff0c;一小时收益上千元&#xff0c;思路分享&#xff01; 无人直播新模式——视频挂机自动直播是一种创新的直播方式&#xff0c;能够实现自动化的收益。下面将分享一些思路、玩法和流程&#xff0c;帮助您了解这个模式并进行实施。 1、…

内容安全(DPI和DFI解析)

内容安全前言&#xff1a; 防火墙的本质其实就是包过滤&#xff0c;我们通常所说的安全设备&#xff08;如&#xff1a;IPS、IDS、AV、WAF&#xff09;的检测重心是应用层。下一代防火墙基于传统防火墙的拓展能力&#xff0c;就是可以将以上的安全设备模块集成在一起&#xff0…

uniapp的app端软件更新弹框

1&#xff1a;使用html PLUS实现&#xff1a;地址HTML5 API Reference (html5plus.org)&#xff0c;效果图 2&#xff1a;在app.vue的onLaunch生命周期中&#xff0c;代码如下&#xff1a; onLaunch: function() {let a 0let view new plus.nativeObj.View(maskView, {backg…

IO流-其他流:数据流,序列化流

import java.io.DataOutputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream;public class DataOutputStream1 {public static void main(String[] args) {//创建一个数据输出流包装一个低级的字节输出流try (DataOutputStream dosnew DataOutp…

Elasticsearch:RBAC 和 RAG - 最好的朋友

作者&#xff1a;来自 Elastic Jeff Vestal 检索增强生成 (RAG) 通过提供额外的上下文或信息来增强大型语言模型 (LLM) 的知识&#xff0c;从而提高响应质量。 尽管 LLMs 拥有令人印象深刻的能力&#xff0c;但也有其局限性&#xff0c;例如无法在培训后保留新信息以及对不熟悉…

软考网络工程师 第六章 第三部分 第三节 流量控制和拥塞控制

TCP流量控制 流量控制&#xff1a;为了防止发送方防止发送速度过快&#xff0c;导致接受方处理不过来&#xff0c;造成丢包重传&#xff0c;浪费网络资源 TCP流量控制机制&#xff1a;可变大小的滑动窗口 TCP滑动窗口机制 TCP拥塞控制 例题&#xff1a; TCP采用拥塞窗口&am…

Ubuntu意外断电vmdk损坏--打不开磁盘“***.vmdk”或它所依赖的某个快照磁盘。

背景&#xff1a;电脑资源管理器崩溃卡死&#xff0c;强行断电重启&#xff0c;结果虚拟机打不开了&#xff0c;提示打不开磁盘“***.vmdk”或它所依赖的某个快照磁盘。 删除lck文件&#xff1a;失败vmware-vdiskmanager修复 &#xff1a;提示无法修复最终用 VMFS Recovery挂载…

ipv4手动设置网络的相关知识

基本知识 1.IP地址 IP地址 网络地址 主机地址(又称&#xff1a;主机号和网络号组成) 192.168.100.168&#xff08;IP地址&#xff09; 192.168.1.0 (网络地址) 0.0.0.168&#xff08;主机地址&#xff09; 2.家庭网络基础组成 3.子网掩码 作用&#xff1a;告诉计算机哪…

开源相机管理库Aravis例程学习(七)——chunk-parser

开源相机管理库Aravis例程学习&#xff08;七&#xff09;——chunk-parser 简介例程代码函数说明arv_camera_create_chunk_parserarv_camera_set_chunksarv_chunk_parser_get_integer_value 简介 本文针对官方例程中的&#xff1a;05-chunk-parser做简单的讲解。并介绍其中调…

【JavaScript】内置对象 - 数组对象 ① ( 数组简介 | 数组创建 | 数组类型检测 )

文章目录 一、数组对象1、数组简介2、数组创建3、数组检测 - Array.isArray() 方法4、数组检测 - instanceof 运算符 Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array 一、数组对象 1、数组简介 在 JavaScr…

3d gaussian-splatting源码运行及结果展示

笔者是在windows下配置的环境 源码地址及官方教程 github gaussian-splatting 官网给出了详细的配置教程和视频解说 记录一下个人的部署过程 环境需求 硬件需求 具有计算能力 7.0 的带有CUDA的GPU 24G显存 软件需求 python版本我没注意到明确说明&#xff0c;3.7以上应…

c++高级篇(一) —— 初识Linux下的进程控制

linux的信号 信号的概念 在Linux中&#xff0c;信号是一种用于进程间通信和处理异步事件的机制&#xff0c;用于进程之间相互传递消息和通知进程发生了事件&#xff0c;但是&#xff0c;它不能给进程传递任何数据。 信号产生的原因有很多种&#xff0c;在shell中&#xff0c…

三、配置带HybridCLR的ARCore开发环境

预告 本专栏将介绍如何使用这个支持热更的AR开发插件&#xff0c;快速地开发AR应用。 专栏&#xff1a; Unity开发AR系列 插件简介 通过热更技术实现动态地加载AR场景&#xff0c;简化了AR开发流程&#xff0c;让用户可更多地关注Unity场景内容的制作。 “EnvInstaller…”支…

代码覆盖率:度量软件质量的关键指标

一、引言 代码覆盖率是衡量软件测试质量的一个重要指标&#xff0c;它描述了测试用例覆盖了多少代码。高的代码覆盖率可以帮助我们增加对软件质量的信心&#xff0c;并发现潜在的问题。在本文中&#xff0c;我们将深入探讨代码覆盖率&#xff0c;并通过实例来演示如何计算和提…

多目标跟踪入门介绍

多目标跟踪算法 我们也可以称之为 Multi-Target-Tracking &#xff08;MTT&#xff09;。 那么多目标跟踪是什么&#xff1f; 不难看出&#xff0c;跟踪算法同时会为每个目标分配一个特定的 id 。 由此得出了目标跟踪与目标检测的区别&#xff08;似乎都是用方框来框出目标捏…

番外篇 | 利用PyQt5+YOLOv5来搭建目标检测系统(附可视化界面+功能介绍+源代码)

前言:Hello大家好,我是小哥谈。PyQt5是一个Python绑定的Qt库,是用于创建图形用户界面(GUI)和其他应用程序组件的工具包。PyQt5提供了许多GUI元素,如按钮、文本框、标签等,也提供了许多Qt的功能,如网络、数据库、XML等。通过PyQt5可以在Python中使用Qt的丰富功能和强大的工…

jenkins使用gitLab(极狐)认证登陆

jenkins安装 GitLab Authentication插件 我因为java版本和最新GitLab Authentication 1.19版本不兼容&#xff0c;选择了本地安装 找个历史版本1.13版本&#xff0c;然后下载到电脑上 - 本地上传插件并安装 在极狐上创建一个应用 - 配置应用信息 应用名&#xff1a;jenkinsLo…

OC foudation框架(下)的学习

OCfoudation框架&#xff08;下&#xff09; 前面学习了有关OCfoudation框架的部分内容&#xff0c;我们现在对于后面的内容继续学习。 文章目录 OCfoudation框架&#xff08;下&#xff09;数组&#xff08;NSArray和NSMutableArray&#xff09;对集合元素整体调用方法排序使用…

弱监督语义分割-对CAM的生成过程进行改进1

一、仿射变换图像结合正则项优化CAM生成 论文&#xff1a;Self-supervised Equivariant Attention Mechanism for Weakly Supervised Semantic Segmentation &#xff08;CVPR,2020&#xff09; 1.SEAM方法 孪生网络架构&#xff08;Siamese Network Architecture&#xff09…

【网络编程】UDP协议和TCP协议1

UDP协议格式 UDP 报文分为 UDP 报头和 UDP 数据区两部分。报头由 4 个 16 位长&#xff08;2字节&#xff09;字段组成&#xff0c;分别说明该报文的源端口、目的端口、报文长度和校验值。 UDP协议如何将报头和有效载荷分离 UDP报头是一种定长报头&#xff0c;长度为8个字节。…