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端没有具体的业务要求,所以没有具体的业务实现。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu20.04 设置路由器

1. 网络拓扑图 2. 查看网卡信息 ip a得出如下网卡信息&#xff0c;enp1s0和enp2s0为两个网卡名称&#xff0c;以及相关两个网卡的详细信息&#xff0c;不同设备的网卡名称可能不一样 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group defaul…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-15.4讲 GPIO中断实验-IRQ中断服务函数详解

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

debug技巧之本地调试

大家好啊&#xff0c;我是summo&#xff0c;今天给大家分享一下我平时是怎么调试代码的&#xff0c;不是权威也不是教学&#xff0c;就是简单分享一下&#xff0c;如果大家还有更好的调试方式也可以多多交流哦。 如果看过我文章的同学应该知道我是一个Java开发&#xff0c;平时…

FANUC机器人工具坐标偏移的用法

一、工具坐标偏移的使用场景 在机器人位置不改变的情况下&#xff0c;工业机器人使用默认工具坐标系示教的一系列运动点位&#xff0c;要保持原本点位位置不变的情况下&#xff0c;改变机器人工具坐标的参数&#xff0c;就要用到机器人坐标转化的功能。在FANUC机器人上体现为机…

/swagger/index.html#/ 的页面可能存在问题,或者已永久移动到新的网址。

问题背景 在golang的项目中&#xff0c;使用了swagger。在另外一个项目中也使用了swagger,没有发生过这个问题。新的项目中&#xff0c;用了和之前项目同样的web框架&#xff0c;仔细比对了和之前项目的差异&#xff0c;只不过&#xff0c;目录结构做了调整&#xff0c;所以&a…

网络编程套接字 (二)---udosocket

本专栏内容为&#xff1a;Linux学习专栏&#xff0c;分为系统和网络两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握Linux。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;网络 &#x1f69a;代码仓库&#xff1a;小小unicorn的代…

Springboot集成Eureka实现注册中心-11

Spring Cloud Netflix Eureka是Spring Cloud Netflix子项目的核心组件之一&#xff0c;主要用于微服务架构中的服务治理。 什么是注册中心 在微服务架构中往往会有一个注册中心&#xff0c;每个微服务都会向注册中心去注册自己的地址及端口信息&#xff0c;注册中心维护着服务…

泰迪智能科技大数据开发实训平台功能介绍

大数据开发实训平台是面向实训课和课后训练的编程实训平台&#xff0c;平台底层基于Docker技术&#xff0c;采用容器云部署方案&#xff0c;预装大数据相关课程教学所需的实训环境&#xff0c;拥有1主2从的Hadoop集群&#xff0c;还能够自主定制环境&#xff0c;并能够与实训管…

10.轮转数组

文章目录 题目简介题目解答解法一&#xff1a;使用额外的数组代码&#xff1a;复杂度分析&#xff1a; 解法二&#xff1a;数组反转代码&#xff1a;复杂度分析&#xff1a; 题目链接 大家好&#xff0c;我是晓星航。今天为大家带来的是 轮转数组 相关的讲解&#xff01;&#…

基于VOLOPV2的自动驾驶环境感知系统

基于VOLOPV2的自动驾驶环境感知系统是一个复杂的系统&#xff0c;它主要负责实时检测并识别周围环境中的各种物体和信息&#xff0c;为自动驾驶车辆提供必要的感知数据。以下是对该系统的一个简要介绍&#xff1a; 环境感知是自动驾驶系统中的一个关键部分&#xff0c;它依赖于…

SQL的命令

目录 创建用户 ​编辑 DDL数据库操作 查询 创建 使用 删除 创建数据库表 在表中修改字段 查询表 DML 添加数据 修改 删除 DQL 查询 创建用户 DDL数据库操作 查询 show databases; 创建 权限问题导致无法创建&#xff0c;连接root修改用户权限 CREATE DATABAS…

AJAX概述和基本使用

01 【AJAX概述和基本使用】 1.AJAX简介 AJAX 全称为Asynchronous JavaScript And XML&#xff0c;就是异步的JS 和XML 通过AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据 AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准…

Java入门基础学习笔记8——注释

1、注释&#xff1a; 注释是写在程序中对代码进行解释说明的文件&#xff0c;方便自己和其他人查看&#xff0c;以便理解程序的。 package cn.ensource.note;/**文档注释文档注释 */ public class NoteDemo {public static void main(String[] args) {// 单行注释System.out.…

数字人金融应用技术指南

根据《北京金融科技产业联盟团体标准管理办法》的规定&#xff0c;2024年3月27日经北京金融科技产业联盟第三届理事会第二次会议审议&#xff0c;批准发布《数字人金融应用技术指南》&#xff08;T/BFIA 027—2024&#xff09;、《图数据库金融应用技术要求》&#xff08;T/BFI…

如何在两个日期之间获取日志属性

如果你们想在两个日期之间获取日志属性&#xff0c;需要首先明确你所指的“日志属性”。如果你是指在两个日期之间获取日志&#xff08;例如文本日志文件&#xff09;中的记录&#xff0c;你可以使用 Python 的文件操作来读取日志文件&#xff0c;并根据每行记录中的日期属性进…

【35分钟掌握金融风控策略18】贷前风控策略详解-3

目录 ​编辑 贷前风控数据源 第三方数据 贷前风控数据源 第三方数据 在金融风控过程中&#xff0c;金融机构通常会引入一些第三方的风控数据&#xff08;或第三方金融技术&#xff09;来辅助识别贷款个人或贷款企业的风险状况&#xff0c;帮助金融机构进行风控决策&#x…

政务网离线安装python3及其依赖手册

文章目录 python安装及环境配置gcc安装make安装python3安装pip安装 测试测试python3报错:ModuleNotFoundError: No module named _ctypes’测试pip3报错“pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.” 依赖库…

Android 如何启用user版本的adb源码分析

通过adb shell中执行getprop persist.sys.usb.config&#xff0c;可以看到系统usb的相关选项&#xff0c;persist.sys.usb.config显示的就是当前系统关于usb选项的系统配置【RK3188Android4.4刚移植的例子】: 全编脚本中make命令会调用build/core/main.mk,在里面可以看到一段…

AWTK 开源串口屏开发(18) - 用 C 语言自定义命令

AWTK-HMI 内置了不少模型&#xff0c;利用这些模型开发应用程序&#xff0c;不需要编写代码即可实现常见的应用。但是&#xff0c;有时候我们需要自定义一些命令&#xff0c;以实现一些特殊的功能。 本文档介绍如何使用 C 语言自定义命令。 1. 实现 hmi_model_cmd_t 接口 1.1…

服务丢在tomcat中启动war包,需要在tomcat中配置Java环境吗?

一般来说&#xff0c;部署在 Tomcat 上的 WAR 包启动时不需要在 Tomcat 中单独配置 Java 环境&#xff0c;因为 Tomcat 启动本身就需要依赖 Java 环境。以下是确保 Tomcat 正常运行与部署 WAR 包的基本步骤&#xff1a; 安装 Java 环境&#xff1a; 首先&#xff0c;确保你的系…