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

news2024/11/19 0:23:47

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

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

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

使用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.coloradmin.cn/o/1662175.html

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

相关文章

分布式与集群的区别

先说区别&#xff1a; 分布式是并联工作的&#xff0c;集群是串联工作的。 分布式中的每一个节点都可以做集群。而集群并不一定就是分布式的。 集群举例&#xff1a;比如新浪网&#xff0c;访问的人很多&#xff0c;他可以做一个集群&#xff0c;前面放一个相应的服务器&…

MySQL变量的四则运算以及取模运算

1、定义多个变量在一条语句中&#xff0c;需要使用,作为分隔符 除法默认保留4位有效数字 2、浮点数运算&#xff1a; 除法默认保留4位有效数字

《这就是ChatGPT》读书笔记

书名&#xff1a;这就是ChatGPT 作者&#xff1a;[美] 斯蒂芬沃尔弗拉姆&#xff08;Stephen Wolfram&#xff09; ChatGPT在做什么&#xff1f; ChatGPT可以生成类似于人类书写的文本&#xff0c;它基本任务是弄清楚如何针对它得到的任何文本产生“合理的延续”。当ChatGPT写…

2024 年最新使用 ntwork 框架搭建企业微信机器人详细教程

NTWORK 概述 基于 PC 企业微信的 api 接口&#xff0c;支持收发文本、群、名片、图片、文件、视频、链接卡片等。 下载安装 ntwork pip install ntwork国内源安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple ntwork企业微信版本下载 官方下载&#xff1a;h…

无列名注入

在进行sql注入时&#xff0c;一般都是使用 information_schema 库来获取表名与列名&#xff0c;因此有一种场景是传入参数时会将 information_schema 过滤 在这种情况下&#xff0c;由于 information_schema 无法使用&#xff0c;我们无法获取表名与列名。 表名获取方式 Inn…

使用chatglm3本地部署形成的api给上一篇得到的网页信息text_content做内容提取

使用chatglm3本地部署形成的api给上一篇得到的网页信息text_content做内容提取&#xff0c; chatglm3的api调用见&#xff1a;chatglm3的api调用_启动chatglm3的api服务报错-CSDN博客 import os from openai import OpenAIbase_url "http://localhost:5000/v1/" c…

书生作业:XTuner

作业链接&#xff1a; https://github.com/InternLM/Tutorial/blob/camp2/xtuner/homework.md xtuner: https://github.com/InternLM/xtuner 环境配置 首先&#xff0c;按照xtuner的指令依次完成conda环境安装&#xff0c;以及xtuner库的安装。 然后&#xff0c;我们开始尝试…

基于Vant UI的微信小程序开发(随时更新的写手)

基于Vant UI的微信小程序开发✨ &#xff08;一&#xff09;悬浮浮动1、效果图&#xff1a;只要无脑引用样式就可以了2、页面代码3、js代码4、样式代码 &#xff08;二&#xff09;底部跳转1、效果图&#xff1a;点击我要发布跳转到发布的页面2、js代码3、页面代码4、app.json代…

STM32CubeMX软件使用(超详细)

1、Cube启动页介绍 2、芯片选择页面介绍 3、输入自己的芯片型号&#xff0c;这里以STM32U575RIT6举例 4、芯片配置页码介绍 5、芯片外设配置栏详细说明 6、点击ClockConfiguration进行时钟树的配置&#xff0c;选择时钟树后可以选择自己想使用的时钟源&#xff0c;也可以直接输…

LeetCode题练习与总结:反转链表Ⅱ--92

一、题目描述 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#…

e 值的故事:从复利到自然增长的数学之旅

自然对数函数的底数 e&#xff08;也称为自然常数或欧拉数&#xff09;与 π 一样&#xff0c;是数学中最伟大的常数之一。它大约为 2.718281828&#xff0c;是一个无理数&#xff0c;意味着它的小数部分无限且不重复。 与 π 和 √2 这些由几何发现而来的常数不同&#xff0c…

【高阶数据结构】图 -- 详解

一、图的基本概念 图 是由顶点集合及顶点间的关系组成的一种数据结构&#xff1a;G (V&#xff0c; E)。其中&#xff1a; 顶点集合 V {x | x属于某个数据对象集} 是有穷非空集合&#xff1b; E {(x,y) | x,y属于V} 或者 E {<x, y> | x,y属于V && Path(x, y…

解决常见的Android问题

常见问题&#xff1a; 1、查杀&#xff1a; 查杀一般分为两个方向一种是内存不足的查杀&#xff0c;一种的是因为温度限频查杀&#xff0c;统称为内存查杀&#xff0c;两个问题的分析思路不同 1、内存不足查杀&#xff1a; 主要是因为当用户出现后台运行多个APP或者是相机等…

LeetCode96:不同的二叉搜索树

题目描述 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 代码 /*dp[i]&#xff1a;表示i个节点有dp[i]个不同的二搜索叉树递推公式&#xff1a;dp[i] dp[j-1] * dp[i-j], j…

【JavaSE】/*运算符—快速总结*/

目录 前言 一、什么是运算符 二、算术运算符 三、增量运算符 四、自增/自减运算符 五、关系运算符 六、逻辑运算符 七、位运算符 八、移位运算符 九、条件运算符 十、运算符的优先级 前言 Java 中的运算符和 C语言 的运算符规则有很多类型的地方&#xff0c;我们只…

K8s源码分析(二)-K8s调度队列介绍

本文首发在个人博客上&#xff0c;欢迎来踩&#xff01; 本次分析参考的K8s版本是 文章目录 调度队列简介调度队列源代码分析队列初始化QueuedPodInfo元素介绍ActiveQ源代码介绍UnschedulableQ源代码介绍**BackoffQ**源代码介绍队列弹出待调度的Pod队列增加新的待调度的Podpod调…

LinkedList链表

LinkedList 的全面说明 LinkList底层实现了双向链表和双端队列特点可以添加任意元素&#xff08;元素可以重复&#xff09;&#xff0c;包括null线程不安全&#xff0c;没有实现同步 LinkedList 的底层操作机制 LinkedList底层维护了一个双向链表LinkList中维护了两个属性fi…

【C#进阶】简单数据结构类

简单数据结构类 文章目录 1、Arraylist1、ArrayList的本质2、声明3、增删查改4、装箱拆箱思考 背包售卖 2、Stack1、Stack的本质2、声明3、增取查改4、遍历思考 计算一个数的二进制 3、Queue1、Queue的本质2、声明3、增取查改4、遍历思考 每隔一段时间打印一条消息 4、Hashtab…

运营商的mpls专线

在当今高速发展的数字化时代&#xff0c;网络已成为企业发展不可或缺的基础设施。作为企业网络 连接的重要组成部分&#xff0c;MPLS专线在运营商的推动下逐渐成为了企业选择的首选。 MPLS&#xff08;Multi-Protocol Label Switching&#xff09;是一种基于标签的交换技术&am…

QT C++(QWidget类及其常见的属性)

文章目录 1. QWidget类及其常见的属性 1. QWidget类及其常见的属性 QT各种控件都是继承自QWidget类&#xff0c;QWidget类是QT控件体系中通用的部分。 QWidget属性如下图 常见的QT属性为&#xff1a; enabled&#xff1a;描述控件是否处于可用状态&#xff08;禁用状态这个…