【uniapp-ios】App端与webview端相互通信的方法以及注意事项

前言

在开发中,使用uniapp开发的项目开发效率是极高的,使用一套代码就能够同时在多端上线,像笔者之前写过的使用Flutter端和webview端之间的相互通信方法和问题,这种方式本质上实际上是h5和h5之间的通信,网上有非常多的方案,最简单的就是使用postMessage和addEventListener的方式,这个在我之前的文章有讲解,这里不再赘述。
那么今天的问题,是使用uniapp开发的App端和H5端(webview)之间的通信问题

注意前提,是使用uniapp同时去开发app端和h5端。

问题

uniapp本质开发的app实际上还是web,那么能不能用postMessage的方式呢?
答案当然是可以的,但是你要区分情况,仔细看看官方文档
在这里插入图片描述
平台差异说明:App-nvue,是App-nvue的方法,这是个坑!!!

所以,这个时候就需要去区分情况了,你使用的是vue写的webview还是nvue写的webview

vue类型的webview

在这里插入图片描述

<web-view :src="src" ref="webview" :fullscreen="false" @message="receiveData"></web-view>

app传递数据给h5

本质:h5在webview环境中提取放入一个函数,app调用该函数传递数据进去。

h5端接收:可以在app.vue的onLaunch阶段

window.msgFromUniapp = (res) =>{console.log("原生传递过来的数据:",res)
}

app端发送:

methods: {//给webview传递数据postMess(msg) {const currentWebview = this.$scope.$getAppWebview();const wv = currentWebview.children()[0];wv.evalJS(`msgFromUniapp('${JSON.stringify(msg)}')`)}},onLoad(item) {this.src = decodeURIComponent(item.url)// 传入需要跳转的链接 使用web-view标签进行跳转this.title = item.title// #ifdef APP-PLUSconst currentWebview = this.$scope.$getAppWebview();const that = thissetTimeout(function() {let wv = currentWebview.children()[0];that.postMess({type: 'app/systemInfo',data: {sys: 'ios'},code: 1,})}, 500);// #endif}

h5传递给app

app端接收:
添加监听即可

@message="receiveData"

h5端发送:

  //传递url给原生应用uni.webView.postMessage({data:{action:'openUrl',url:this.orderDetail.url}})

注意事项

app端要延迟再去获取webview实例,等webview加载完成。
官方写的是uni.posMessage,笔者亲试,没用的,注意是是 uni.webView.postMessage

nvue类型的webview

vue页面和nvue页面的区别,这里不做赘述,官方文档写的很清楚。

这个时候就可以使用官方文档的postMessage方式来

app传递数据给h5

绑定一个ref,获取webview实例

 <web-view ref="webview" :src="src" @onPostMessage="handlePostMessage":style="{height:mbHeight,width:mbWidth,top:mbTop}" fullscreen="false"></web-view>
  this.$refs.webview.postMessage(data, '*')

或者

// 调用 webview 内部逻辑evalJs: function() {this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");}
  • 然后h5使用window.addEventListener接收

h5传递数据给app

在这里插入图片描述

app接收消息:

<web-view ref="webview" class="webview" @onPostMessage="handlePostMessage"></web-view>
	handlePostMessage: function(data) {console.log("接收到消息:" + JSON.stringify(data.detail));},

注意事项

页面空白

如果你是nvue页面:
在这里插入图片描述
大概率是你没指定宽高,不信你放入一个百度的url试试,如果还是空白,请你设置style指定宽高。

如果你是vue页面,可能就是网页本身就打不开

环境问题

这是一个非常头疼的问题,我怎么知道这个web页面是在app环境打开还是在h5打开的,为什么需要去区分环境问题,因为你可能有一个这样的场景,你开发的app需要打开一个网页,然后撑满全屏,本质还是用webview容器去打开的,h5不知道自己所处的环境是app端,那么就会带来导航栏区域和底部安全区域怎么获取和处理的问题。

你可以选择从app端下手,前提是这个webview必须是nvue页面,因为vue页面默认webview是撑满全屏的,撑满全屏,撑满全屏。

如果你是vue页面,那么你可以通知h5端当前所处的环境,当前的导航栏高度和安全区域高度,在h5端单独去做样式兼容

如果你是nvue页面,除了上述方式,你还可以自己去指定webview的样式。

我还是建议都使用第一种方案吧,笔者自己去设置webview的样式发现在全屏阶段还是有一些问题的,不如默认撑满全屏,在h5端去做调整,毕竟调整h5端端成本最小,上架之后的app还需要提审等一些列步骤。

侧滑返回问题

可能有小伙伴发现,我打开一个webview,网页里面本身有好多跳转,为什么没办法侧滑返回。

原因是,本质上,在app端你打开的实际上只有一个webview页面,它只有一个页面,你的h5页面是在里面打开的,无论你h5的路由栈有多少层多没用,对于app来说,就只有一个webview页面。

所以,一定要注意放一个返回按钮提供给用户返回的机会,如果你要跳转外部网页,也不要用window.location去进行跳转,到时候就会返回不了了,你可以通知app端使用plus方法去打开网页

总结

官方文档并没有详细去区分两者的区别,网上的信息也很杂乱,所以在此特别去做区分和处理,如果你有更好的建议和方案,欢迎在评论区提出。

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

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

相关文章

深度学习-基础网络组件介绍(六)

深度学习基础网络组件介绍 网络组件网络结构-全连接层激活函数常见激活函数-Sigmoid常见激活函数-tanh常见激活函数-Relu常见激活函数-Gelu常见激活函数-Softmax 损失函数损失函数-均方差损失函数-交叉熵&#xff08;Cross Entropy&#xff09; 网络组件 **释义&#xff1a;**…

基于docker的prometheus+grafana+altermanager+prometheus-webhook-dingtalk钉钉报警

一、各软件功能简介 prometheus&#xff1a;Prometheus(是由go语言(golang)开发)是一套开源的监控&报警&时间序列数 据库的组合。主要优点&#xff1a;外部依赖安装使用超简单、系统集成 多等 grafana&#xff1a;Grafana 是一款采用 go 语言编写的开源应用&#xff0…

电脑如何进行屏幕录制?快来看看这3种方法

在数字化浪潮席卷而来的今天&#xff0c;屏幕录制已不再是简单的视频记录&#xff0c;它演变成了一种表达、传播与创新的工具。传统的屏幕录制方法虽然经典简单&#xff0c;但已逐渐无法满足现代人对效率、品质和创意的追求。 所以&#xff0c;在这个充满变革与创新的时代&…

新能源汽车充电站远程监控系统S275钡铼技术无线RTU

新能源汽车充电站的远程监控系统在现代城市基础设施中扮演着至关重要的角色&#xff0c;而钡铼技术的S275无线RTU作为一款先进的物联网数据监测采集控制短信报警终端&#xff0c;为充电站的安全运行和高效管理提供了强大的技术支持。 技术特点和功能 钡铼S275采用了基于UCOSI…

上位机图像处理和嵌入式模块部署(mcu项目2:串口日志记录器)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 淘宝上面有一个商品蛮好玩的&#xff0c;那就是日志记录器。说是记录器&#xff0c;其实就是一个模块&#xff0c;这个模块的输入是一个ttl串口&am…

基于Java+SpringMvc+Vue技术的智慧校园系统设计与实现

博主介绍&#xff1a;硕士研究生&#xff0c;专注于信息化技术领域开发与管理&#xff0c;会使用java、标准c/c等开发语言&#xff0c;以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年&#xff0c;拥有近12年的管理工作经验&#xff0c;拥有较丰富的技术架…

PHP工单预约表单系统小程序源码

&#x1f527;【高效办公新利器】工单预约表单系统大揭秘 &#x1f4bc;【一键提交&#xff0c;工单管理新高度】 你还在为繁琐的工单提交流程头疼吗&#xff1f;工单预约表单系统&#xff0c;让你的工单管理步入高效时代&#xff01;只需简单几步&#xff0c;填写必要信息&a…

机器学习中的可解释性

「AI秘籍」系列课程&#xff1a; 人工智能应用数学基础 人工智能Python基础 人工智能基础核心知识 人工智能BI核心知识 人工智能CV核心知识 为什么我们需要了解模型如何进行预测 我们是否应该始终信任表现良好的模型&#xff1f;模型可能会拒绝你的抵押贷款申请或诊断你患…

高性能Python网络框架实现网络应用详解

概要 Python作为一种广泛使用的编程语言,其简洁易读的语法和强大的生态系统,使得它在Web开发领域占据重要位置。高性能的网络框架是构建高效网络应用的关键因素之一。本文将介绍几个高性能的Python网络框架,详细描述它们的特点、使用场景及具体示例代码,帮助高效实现网络应…

【linux高级IO(二)】多路转接之select详解

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux高级IO 1. 前言2. 初识s…

基于vue的可视化大屏

要提前准备一个xinyang.json文件 可以在这个网站下载 DataV.GeoAtlas地理小工具系列 (aliyun.com) 代码结构 总框架代码&#xff1a; <template><div><div class"center"><center-left /><center-map /><center-right /><…

Xterminal工具的安装与使用体验

Xterminal工具的安装与使用体验 一、Xterminal简介二、Xterminal核心特性三、Xterminal使用场景四、Xterminal下载地址五、Xterminal的基本使用5.1 设置仓库密码5.2 SSH连接5.3 Windows远程桌面5.4 笔记功能5.5 AI工具 六、总结 一、Xterminal简介 Xterminal是一款专为开发者设…

FastReport 指定sql 和修改 数据库连接地址的 工具类 :FastReportHelper

FastReport 指定sql 和修改 数据库连接地址的 工具类 &#xff1a;FastReportHelper 介绍核心代码&#xff1a;完整代码&#xff1a; 介绍 在FastReport中&#xff0c;经常会遇到需要给 sql 加条件的情况&#xff0c;或者给数据库地址做更换。 &#xff08;废话不多说&#x…

达梦数据库的系统视图v$auditrecords

达梦数据库的系统视图v$auditrecords 在达梦数据库&#xff08;DM Database&#xff09;中&#xff0c;V$AUDITRECORDS 是专门用来存储和查询数据库审计记录的重要系统视图。这个视图提供了对所有审计事件的访问权限&#xff0c;包括操作类型、操作用户、时间戳、目标对象等信…

1.DDR3 SO-DIMM 内存条硬件总结

最近在使用fpga读写DDR3&#xff0c;板子上的DDR3有两种形式与fpga相连&#xff0c;一种是直接用ddr3内存颗粒&#xff0c;另一种是通过内存条的形式与fpga相连。这里我们正好记录下和ddr3相关的知识&#xff0c;先从DDR3 SO-DIMM 内存条开始。 1.先看内存条的版本 从JEDEC下载…

如果你想手写Linux系统

哈喽&#xff0c;我是子牙老师。今天咱们聊聊这个话题吧&#xff0c;Linux作为当今科技世界的地基&#xff0c;我们越来越接近真理了&#xff0c;有木有&#xff1f; 这个文章的角度&#xff0c;你可能全网都很难找到第二篇如此系统讲透这个问题的文章 你可能想问&#xff1a…

强化学习编程实战-2马尔可夫决策过程

2.1 从多臂赌博机到马尔可夫决策过程 如图2-1&#xff0c;图中A为多臂赌博机&#xff0c;B为一堆鸳鸯&#xff0c;其中左上角为雄性鸳鸯&#xff0c;右上角为雌性鸳鸯&#xff0c;B展示的任务是雄性鸳鸯绕过障碍物找到词性鸳鸯。跟多臂赌博机不同的是&#xff0c;雄性鸳鸯经过一…

【SpringCloud应用框架】Nacos集群配置

第八章 Spring Cloud Alibaba Nacos之集群配置 文章目录 一、Linux版NacosMySql生产环境配置具体配置&#xff1a; 二、Nacos集群配置更改Nacos启动命令配置原理具体配置测试启动总结 一、Linux版NacosMySql生产环境配置 上一篇博客中已经了解了Nacos生产环境下需要搭建集群配…

angular 请求响应拦截

在module中provide 对请求做一些操作 对响应做一些操作 import { Injectable } from angular/core; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from angular/common/http; import { Observable, throwError } from rxjs; import { catc…

[ControlNet] Adding Conditional Control to Text-to-Image Diffusion Models

1、目的 让预训练好的大型DDPM模型支持额外的输入条件&#xff08;如Canny edges、Hough lines、user scribbles、segmentation maps、human key points、shape normals、depths等&#xff09; 不同于image-to-image translation致力于学习不同domain之间的映射&#xff0c;Con…