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

embedded/2024/10/18 14:16:14/

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

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

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

使用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.ppmy.cn/embedded/42038.html

相关文章

Android面试题之Kotlin的几种常见的类

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 初始化的顺序 主构造函数里声明的属性 类级别的属性赋值 init初始化块里的属性赋值和函数调用 次构造函数里的属性赋值和函数调用 延迟初始…

element 表格滚动条滑动,表格错位

解决办法&#xff08;主要是根据滚动条的宽度决定的&#xff0c;可自行调整&#xff09; 1、.el-table__header-wrapper { width: 99.3% !important; } 2、.el-table__header-wrapper { padding-right: 10px!important; }

R语言学习笔记

学习资料&#xff1a; 菜鸟教程&#xff1a;https://www.runoob.com/r/r-setup.html 1、查看 R 包的安装目录.libPaths() 查看已安装的包&#xff1a;library() search()函数可以输出当前加载的环境&#xff1a; 2、利用conda创建新的环境&#xff0c;并安装包&#xff08;…

量子计算入门:原理与编程

量子计算是一种利用量子力学原理来执行计算的技术。与传统的经典计算机相比&#xff0c;量子计算机在处理某些特定类型的问题时&#xff0c;如整数分解、搜索算法和模拟量子物理过程等&#xff0c;可以显著提高速度。下面我们将简要介绍量子计算的基本原理和如何开始量子编程。…

P7222 [RC-04] 信息学竞赛

文章目录 题目[RC-04] 信息学竞赛题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 思路AC代码 题目 [RC-04] 信息学竞赛 题目描述 小 R 今天学习了余角有关的数学知识&#xff0c;请你帮帮他计算一个角的余角吧&#xff01; 一个角的余角的计算公式如下&#…

纯css实现tab导航栏下划线

<div class"title"><span>基础信息</span> </div> .title {position: relative;height: 40px;line-height: 40px;&::after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 2px;background-color: #f…

无需MAC,也能打开Sketch文件:多平台兼容软件介绍

Sketch是专门为Macos开发的矢量图形绘制软件&#xff0c;帮助很多设计师创作了很多优秀的作品&#xff0c;其强大的功能受到很多设计师的喜爱。但是Sketch受到Macos系统的限制&#xff0c;这也让很多设计师非常苦恼。有时候他们不能在Mac打开Sketch文件&#xff0c;那么他们能在…

垃圾分类管理系统java项目

文章目录 垃圾分类管理系统一、项目演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目&#xff08;9.9&#xffe5;带走&#xff09; 垃圾分类管理系统 一、项目演示 垃圾分类管理系统 二、项目介绍 系统角色&#xff1a;管理员、用户 1、登录、注册功能…