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://www.mzph.cn/bicheng/10183.shtml

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

相关文章

前端nginx(windows操作系统)学习配置开发验证

Nginx概述 Nginx 作为负载均衡在 Linux 系统上具备很好的并发性能&#xff0c;并且占用极小的内存。但是在 Windows 系统上并不支撑较高并发&#xff0c;所以在Windows系统上选用Nginx作为负载均衡&#xff0c;需要考虑并发情况。 若并发需求低于 300&#xff0c;部署集群仅以…

使用 Valgrind 检测内存泄漏

Valgrind 是一个编程工具&#xff0c;用于内存调试、内存泄漏检测以及性能分析。Valgrind 工具集中的 Memcheck 是用于检测内存管理和线程错误的主要工具。 参考&#xff1a;https://blog.csdn.net/weixin_44046545/article/details/138417524 1、安装 Valgrind sudo apt-ge…

汇昌联信科技:做拼多多网店要押金吗?

做拼多多网店要押金吗?”这个问题&#xff0c;其实与拼多多的平台规则有关。在开店之前&#xff0c;商家需要详细了解平台的各项规定和费用构成&#xff0c;这样才能做好充足的准备。 一、明确回答问题 做拼多多网店&#xff0c;不需要支付押金。拼多多的入驻门槛相对较低&…

【本地部署及云化部署】

文章目录 本地部署及云化部署介绍 文章目录 文章目录一、本地部署模式二、云化部署模式总结 一、本地部署模式 需建设专业化机房&#xff0c;系统应用、前端软件全部安装到本地服务器上。需要专业的IT、网络安全、DBA、电气化工程师进行维护。近些年勒索病毒安全事件频发&am…

k8s设置在任意node里执行kubectl 命令

一、问题 正常来讲kubectl 只能在master node 里运行 当我们尝试在某个 node 节点来执行时&#xff0c; 通常会遇到下面错误 执行错误&#xff1a;The connection to the server localhost:8080 was refused - did you specify the 原因&#xff1a;因为k8s的各个组建&#xf…

安装配置pushgateway

环境 主机名 服务器IP 系统 说明 Ubuntu -1 192.168.1.144 Ubuntu.20.04 docker安装Prometheus docker 192.168.1.140 cent…

KAN核心团队震撼力作!MIT华人用AI首次发现物理学全新方程 | 最新快讯

新智元报道 编辑&#xff1a;Aeneas 好困 刚刚提出了 KAN 的 MIT 物理学家 Max Tegmark 和北大校友刘子鸣&#xff0c;又有一项重磅研究问世了&#xff01;团队发现&#xff0c;它们用 AI 发现了物理学中的新方程&#xff0c;从此&#xff0c;AI 很可能被引入物理学研究领域&am…

东芝移动硬盘是固态还是机械硬盘?数据丢失怎么办

东芝移动硬盘凭借出色的性能和稳定性&#xff0c;在市场上备受赞誉。那么&#xff0c;如何判断自己手中的东芝移动硬盘是固态硬盘还是机械硬盘呢&#xff1f;本文将指导您如何进行这一判断&#xff0c;并深入探讨固态硬盘与机械硬盘之间的区别。同时&#xff0c;针对数据丢失这…

RustDesk 自建服务器部署和使用教程

RustDesk 是一个强大的开源远程桌面软件&#xff0c;是中国开发者的作品&#xff0c;它使用 Rust 编程语言构建&#xff0c;提供安全、高效、跨平台的远程访问体验。可以说是目前全球最火的开源远程桌面软件了&#xff0c;GitHub 星星数量达到了惊人的 64k&#xff01; 与 Team…

【Linux】基础命令,文件处理,用户,vim编辑器,文件压缩

常用命令及参数&#xff1a;dir表示文件夹&#xff0c;file表示文件&#xff08;file可表示其他目录下的文件&#xff09; pwd命令&#xff1b;查看当前所属文件夹&#xff08;print working directory&#xff09; ls [选项] dir&#xff1b;查看当前、指定文件夹目录内容&am…

切换tomcat使用的jdk版本

改一下这俩地方 用这个启动时候 就可以使用对应的jdk版本了 java的classpath内容如下&#xff08;换成自己的&#xff09;&#xff1a; E:\A_code\environment\tomcat\Tomcat9.0\bin\bootstrap.jar;E:\A_code\environment\tomcat\Tomcat9.0\bin\tomcat-juli.jar

存储卡如何下载歌曲?

作为存储芯片及存储卡的原厂&#xff0c;我们了解客户关于如何在存储卡上下载歌曲的疑问。在这篇文章中&#xff0c;我们将详细解析存储卡的使用方法和歌曲下载步骤&#xff0c;帮助客户顺利完成歌曲下载并存储到存储卡中。 1. 选择合适的存储卡 首先&#xff0c;确保您选择的存…

sql-labs(11-20)

1.less-11 1.判断类型 根据测试在使用 " 不会报错&#xff0c; 会报错&#xff0c;所以他是字符型的并且被单引号闭合&#xff0c;而且只有用户 登陆成功才会显示数据。所以先尝试报错注入 2.爆数据库 and updatexml(2,concat(0x7e,(select database()),0x7e),2)-- 3.爆数…

图文教程 | 2024年最新VSCode下载和安装教程c/c++环境配置,json文件详解,实用插件分享

前言 &#x1f4e2;博客主页&#xff1a;程序源⠀-CSDN博客 &#x1f4e2;欢迎点赞&#x1f44d;收藏⭐留言&#x1f4dd;如有错误敬请指正&#xff01; 由于重装电脑&#xff0c;需要重新安装VsCode&#xff0c;记录安装配置过程。 一、VSCode下载 官网地址&#xff1a; Vis…

【激活函数--中】激活函数和阶跃函数的可视化及对比

文章目录 一、Python中绘制阶跃函数的图形二、实现和可视化Sigmoid函数2.1 Python实现2.2 可视化Sigmoid函数 三、比较Sigmoid函数与阶跃函数3.1 Sigmoid函数与阶跃函数的差异3.2 Sigmoid函数与阶跃函数的共同点 一、Python中绘制阶跃函数的图形 在Python中实现阶跃函数的代码…

ZFS 文件系统结构及 ZFS 文件系统数据恢复

ZFS是一种革命性的文件系统&#xff0c;它遵循完全不同的文件系统管理方法&#xff0c;同时提供目前其他文件系统无法提供的新功能和优势。ZFS 可靠、可扩展且易于管理。 它放弃了卷的概念&#xff0c;从而摆脱了传统的文件系统原则。另外&#xff0c;ZFS 提供更复杂的存储池&…

公检法部门涉密网文件导出,哪种方案最安全适合?

公检法是我国政法机关的重要组成部分&#xff0c;由于公检法涉及重要案件信息和个人隐私数据&#xff0c;因此&#xff0c;在内部多采用网络隔离技术将网络隔离为两个及以上网络区域&#xff0c;如涉密网、办公网、外联区等。 公检法涉密网是指公安机关、检察机关和法院等执法机…

Git操作GitHub全记录

目录 一. GitHub ssh-key配置二. 添加GitHub仓库Git提交本地代码到Github仓库远程克隆仓库到本地的文件夹再上传本地的无.git的文件夹上传到远程仓库 三. Git删除Github仓库或某个文件或文件夹1.删除已有Github仓库2.删除Github中的某个文件或文件夹①如果没有建立本地库或者克…

第12节 第二种shellcode编写实战(1)

我最近在做一个关于shellcode入门和开发的专题课&#x1f469;&#x1f3fb;‍&#x1f4bb;&#xff0c;主要面向对网络安全技术感兴趣的小伙伴。这是视频版内容对应的文字版材料&#xff0c;内容里面的每一个环境我都亲自测试实操过的记录&#xff0c;有需要的小伙伴可以参考…

AI技术构建本地知识库的流程

构建本地知识库是一个复杂的过程&#xff0c;涉及以下几个步骤&#xff0c;使用大模型技术构建本地知识库是一种很有前途的方法。随着大模型技术的不断发展&#xff0c;我们可以期待本地知识库将变得更加智能、高效和准确。北京木奇移动技术有限公司&#xff0c;专业的软件外包…