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.rhkb.cn/news/324282.html

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

相关文章

阿里云ECS服务器实例挂载数据盘步骤(磁盘自动挂载.、访问挂载点)

阿里云ECS服务器实例挂载数据盘步骤 1.磁盘自动挂载 首先登录阿里云ECS服务器&#xff0c;通过 df -h 命令查看当前磁盘挂载情况 通过 fdisk -l 命令查看磁盘情况&#xff0c;可以发现有两个盘&#xff1a; 系统盘 /dev/vda: 60GB&#xff0c; 数据盘 /dev/vdb: 500GB 使用…

反了!美国假冒邮政服务钓鱼网站访问量竟然超过正规官网

美国邮政是美国主要的包裹信件投递机构之一&#xff0c;长期以来该单位都是网络钓鱼和诈骗的针对目标。对美国公民来说&#xff0c;在假期通常都会收到声称来自美国邮政的诈骗。美国邮政甚至单独建设的网页提醒消费者警惕诈骗信息&#xff1a; 专用提醒网页 Akamai 的研究人员…

linux上用Jmter进行压测

在上一篇中安装好了Jmeter环境&#xff0c;在这一篇中将主要分享如何使用jmeter在linux中进行单机压测。 1.项目部署 在这里我们先简单部署一下测试环境&#xff0c;所用到的项目环境是个jar包&#xff0c;先在linux上home目录下新建app目录&#xff0c;然后通过rz命令将项目ja…

【c++】string深度刨析以及实现

#pragma once #include<iostream> using namespace std; #include<assert.h> namespace bite {class string{public://迭代器 //像指针 底层不一定是指针 typedef char* iterator;iterator begin(){return _str;}iterator end(){return _str _size;}//const 版本…

面试集中营—JVM篇

一、JVM内存模型 线程独占&#xff1a;栈&#xff0c;本地方法栈&#xff0c;程序计数器; 线程共享&#xff1a;堆&#xff0c;方法区 虚拟机栈&#xff1a;线程私有的&#xff0c;线程执行方法是会创建一个栈阵&#xff0c;用来存储局部变量表&#xff0c;操作栈&#xff0c;…

【Vue3进阶】- Pinia

什么是Pinia Pinia 是 Vue 的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态。它提供了类似于 Vuex 的功能&#xff0c;但比 Vuex 更加简单和直观。 需要在多个组件之间共享状态或数据时使用 Pinia 的 store&#xff0c;这样可以避免 props 和 eventBus 等传统方法…

LeetCode:116.填充每个节点的下一个右侧节点指针

文章目录 1.层次遍历2.使用next层序遍历3.递归方法 LeetCode&#xff1a;116.填充每个节点的下一个右侧节点指针 题目&#xff1a; 示例&#xff1a; 分析题意容易关注到只需要将每层结点连接起来&#xff0c;因此我们只需要把每层结点求出来即可&#xff0c;即使用层次遍历。 …

面试中算法(删去n个数字后的最小值)

有一个整数&#xff0c;从该整数中去掉n个数字&#xff0c;要求剩下的数字形成的新整数尽可能小。 分析&#xff1a;使用栈的特性&#xff0c;在遍历原整数的数字时&#xff0c;让所有数字一个一个入栈&#xff0c;当某个数字需要被删除时&#xff0c;&#xff08;即栈顶数字&g…

【深度学习】Diffusion扩散模型原理解析1

1、前言 diffusion&#xff0c;这几年一直很火的模型&#xff0c;比如这段时间在网上的文生图大模型——Stable diffusion。就是以diffusion作为基底模型&#xff0c;但由于该模型与VAE那边&#xff0c;都涉及了较多了概率论知识&#xff0c;实在让人望而却步。所以&#xff0…

node pnpm修改默认包的存储路径

pnpm与npm的区别 PNPM和NPM是两个不同的包管理工具。 NPM&#xff08;Node Package Manager&#xff09;是Node.js的官方包管理工具&#xff0c;用于安装、发布和管理Node.js模块。NPM将包安装在项目的node_modules目录中&#xff0c;每个包都有自己的依赖树。 PNPM&#xf…

NumPy及Matplotlib基本用法

NumPy及Matplotlib基本用法 导语NumPy导入与生成算术运算N维数组广播元素访问 Matplotlib简单图案绘制多函数绘制图像显示 总结参考文献 导语 深度学习中经常需要对图像和矩阵进行操作&#xff0c;好在python提供了Numpy和Matplotlib库&#xff0c;前者类似一个已经定义的数组…

2024年数维杯B题完整代码和思路论文讲解与分析

2024数维杯数学建模完整代码和成品论文已更新&#xff0c;获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/bgic2nbxs2h41pvt?singleDoc# 2024数维杯数学建模B题45页论文和代码已完成&#xff0c;代码为全部问题的代码 论文包括摘要、问题重述、问题分析、模型假设、…

linux phpstudy 重启命令

[rootLinuxWeb phpstudy]# ./system/phpstudyctl restart 查看命令 1) phpstudy -start 启动小皮面板 2) phpstudy -stop 停止小皮面板 3) phpstudy -restart 重启小皮面板 4) phpstudy -status 查询面板状态 5) phpstudy -in…

pytest(二):关于pytest自动化脚本编写中,初始化方式setup_class与fixture的对比

一、自动化脚本实例对比 下面是一条用例,使用pytest框架,放在一个类中,两种实现方式: 1.1 setup_class初始化方式 1. 优点: 代码结构清晰,setup_class 和 teardown_class 看起来像传统的类级别的 setup 和 teardown 方法。2. 缺点: 使用 autouse=True 的 fixture 作为…

Linux 磁盘分区工具 gdisk / fdisk

fdisk 是传统的 Linux 磁盘分区工具&#xff0c;磁盘容量有2T的大小限制&#xff1b;gdisk 又叫 GPT fdisk, 作为 fdisk 的升级版&#xff0c;主要使用的是GPT分区类型&#xff0c;用来划分容量大于2T的硬盘&#xff0c;本文介绍使用方法。 简介 早期的磁盘使用 fdisk 工具分区…

GitHub搭建免费博客

一、GitHub仓库准备 ​ 搭建博客需要准备两个仓库。一个存放博客图床的仓库&#xff0c;另一个存放博客网站的仓库。 1.1、图床创建 新建仓库 第一步&#xff1a; ​ 第二步&#xff1a; 生成Token令牌 点击右上角头像->Settings->下拉&#xff0c;直到左侧到底&#…

中国地图(2024版审图号地图)和地图变化说明

2024版shp格式审图号地图预览图&#xff1a; 新版中国地图的变化&#xff08;简述&#xff09; 国土面积的增加&#xff1a;新版中国地图显示&#xff0c;中国的国土面积从960万平方公里增加到1045万平方公里&#xff0c;增加了85万平方公里。 九段线变为十段线&#xff1a;…

GT资源-Clock资源

一、Transmitter 时钟分布 XCLK&#xff1a;在使用TX buffer的模式下&#xff0c;XCLK来源于TXOUTCLK。在使用TX bypassing的模式下XCLK来源于TXUSERCLK。TXUSRCLK是GTX/GTH中PCS的内部逻辑时钟。TXUSRCLK2是GT Transceiver 用户侧逻辑时钟。 TXUSRCLK与TXUSRCLK2的关系 FPGA …

无人零售,重塑购物新纪元

在这个快节奏的时代&#xff0c;科技的每一次跃进都在悄无声息地改变着我们的生活方式。而今&#xff0c;无人零售正以雷霆之势&#xff0c;颠覆传统购物模式&#xff0c;为我们带来前所未有的便捷与智能体验。想知道无人零售如何彻底改变我们的购物方式吗&#xff1f;跟随我&a…

字符以及字符串函数

字符以及字符串函数 求字符串长度strlen 长度不受限制的字符串函数strcpystrcatstrcmp 长度受限制的字符串函数strncpystrncatstrncmp 字符串查找strstrstrtok 错误信息报告strerror 字符分类函数字符转换函数tolowertoupper 内存操作函数memcpymemmovememcmpmemset 这篇文章注…