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.hqwc.cn/news/689018.html

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

相关文章

RUST 编程语言使构建更安全的软件变得更加容易。RUST ALL THE THINGS 需要什么?

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

大模型生成提速2倍!单GPU几小时搞定微调,北大数院校友共同一作丨开源

只需给大模型“加点小零件”&#xff0c;推理速度立刻提升2倍&#xff01; 不需要额外训练一个模型&#xff0c;也不需要对计算硬件做优化&#xff0c;单张A100最快几小时就能微调完成。 这项新研究名叫Medusa&#xff08;美杜莎&#xff09;&#xff0c;来自普林斯顿、UIUC、…

mysql中sql语句 exists 判断子句的用法

如果子查询成立才执行父查询 exists判断子查询的使用例子&#xff1a; 张三不存在所以前面的父查询不执行 后面的子句结果存在&#xff0c;所以前面的父查询被执行 where条件所连接的嵌套子查询都是&#xff0c;条件子查询 ———————————————————————…

旅游系统小程序基于Uniapp+FastAdmin+ThinkPHP(源码搭建/上线/运营/售后/更新)

一款基于UniappFastAdminThinkPHP开发的旅游系统&#xff0c;包含消费者端&#xff08;手机端&#xff09;、机构工作人员&#xff08;手机端&#xff09;、机构端&#xff08;PC&#xff09;、平台管理端&#xff08;PC&#xff09;。机构可以发布旅游线路、景点项目&#xff…

AI宝库:全球精选AI工具网站一网打尽,创新智慧触手可及

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 精选专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 探秘AI之巅&#xff0c;一键解锁未来工具&#xff01;立即点击&#xff0c;开启智能新纪元&#…

C++的数据结构(二)

一、链表的基本概念 链表&#xff08;Linked List&#xff09;是一种物理存储单元上非连续的、非顺序的线性数据结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列节点&#xff08;链表中每一个元素称为节点&#xff09;组成&#xff0c;节点…

网站实现微信扫码登录(利用微信开放平台实现)

第一步&#xff1a;微信开放平台账户申请 网址&#xff1a;微信开放平台 1.首先我们要做的就是进入到微信开放平台申请一个开放平台账户&#xff0c;获得资质&#xff01; &#xff1a;注册需要准备营业执照、1-2个工作日审批、300元认证费 &#xff1a;注册之后&#xff0…

常用Linux命令详细总结

一、文档编辑、过滤、查看命令 1、cp 复制文件和目录 -a 复制文件并保持文件属性 -d 若源文件为链接文件&#xff0c;则复制链接文件属性而非文件本身 -i 覆盖文件前提示&#xff0c;如果不要提示&#xff0c;在命令前加上\ -r 递归复制&#xff0c;通常用于目录的复制 …

python代码实现xmind思维导图转换为excel功能

目录 转换前xmind示例 运行代码转换后excel示例 python代码 转换前xmind示例 运行代码转换后excel示例 如果想要合并单元格内容&#xff0c;在后面一列参考输入 B2&C2&D2&E2 python代码 from xmindparser import xmind_to_dict import pandas as pd from openp…

初识多线程

1. 前置知识——进程 在学习多线程前需要了解操作系统中的基本知识&#xff0c;这里简单回顾下。 1.1 进程控制块 一个进程对应着一个进程控制块PCB&#xff0c;PCB是一个用于管理和维护进程信息的数据结构&#xff0c;这个数据结构中大致包含下面内容&#xff08;并不完整&…

Centos 中如何汉化man命令

刚学Linux&#xff0c;记不住命令和选项&#xff0c;很依赖里面的 man 查看命令&#xff0c;但因为着实看不懂&#xff0c;有没有什么办法把man查看命令的信息改成中文 在CentOS 7中&#xff0c;你可以通过安装man-pages-zh包来获取中文的man手册。以下是具体的步骤&#xff1a…

学生党性价比蓝牙耳机哪款好用?五款性价比机型盘点分享

在众多的蓝牙耳机里&#xff0c;对于许多预算不到的学生党来说&#xff0c;想要在有限的预算内挑选到一款性价比高、性能出色的蓝牙耳机&#xff0c;确实是一个不小的挑战&#xff0c;作为蓝牙耳机大户的我今天就来为大家盘点五款性价比极高的蓝牙耳机&#xff0c;帮助大家在有…