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自行从头到尾阅读一下整体文档及说明,这里直接进入正题整理相关的方案:

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

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-05-16 14:18:06       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-16 14:18:06       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-16 14:18:06       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-16 14:18:06       18 阅读

热门阅读

  1. 【postgresql】PostgreSQL中的pgrowlocks插件介绍

    2024-05-16 14:18:06       12 阅读
  2. 机器学习 - 朴素贝叶斯

    2024-05-16 14:18:06       11 阅读
  3. 解决el-dialog弹框出现后页面滚动条可滚动问题

    2024-05-16 14:18:06       14 阅读
  4. nginx中,location匹配规则解析

    2024-05-16 14:18:06       12 阅读
  5. ubuntu 修改网卡名

    2024-05-16 14:18:06       8 阅读
  6. .net 框架基础(一) 字符、字符串

    2024-05-16 14:18:06       12 阅读
  7. leensa邀请码

    2024-05-16 14:18:06       10 阅读
  8. AI绘画原理及工具介绍

    2024-05-16 14:18:06       14 阅读
  9. Vue.js介绍

    2024-05-16 14:18:06       10 阅读
  10. 【Leetcode 每日一题】20. 有效的括号

    2024-05-16 14:18:06       13 阅读
  11. 【哈希】Leetcode 242. 有效的字母异位词【简单】

    2024-05-16 14:18:06       10 阅读
  12. Linux- cron调度进程

    2024-05-16 14:18:06       11 阅读
  13. 深度解析Kubernetes网络模型

    2024-05-16 14:18:06       10 阅读
  14. FunASR语音识别快速上手指南

    2024-05-16 14:18:06       10 阅读
  15. SDL系列(二)—— 渲染窗口与BMP图片

    2024-05-16 14:18:06       13 阅读
  16. Gone框架介绍19 -如何进行单元测试?

    2024-05-16 14:18:06       12 阅读