van-uploader 在app内嵌的webview中的一些坑

2024-04-17 17:12
文章标签 app 内嵌 webview uploader van

本文主要是介绍van-uploader 在app内嵌的webview中的一些坑,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题:

  1. 部分版本在ios 中没有问题,但是安卓中不触发图片选择和拍照(之前是可以的,可能是没有锁定版本,重新发版导致的)。
  2. 在ios中下拉文案是英文,html配置lang等于 zh 也没有用,ios里配置也无效。
  3. 我自己遇到的,ios中拍照上传图片点击使用图片之后会刷新整个页面。

解决方案:

  1. 安卓使用app 提供的原生方法上传图片(上传逻辑放在app完成,上传成功之后给h5 返回图片url)
    1-1:利用**@click.native** 的特性,会触发组件上传方法之前调用 clickUploader 方法,判断如果是安卓app,则阻止事件向内部传递,然后调用原生app提供的方法。
    1-2:app上传成功之后会调用前端绑定在window上的方法backImgUrlFromApp,然后把图片的url传给H5端。
    1-3:此种方法不会自动触发组件的afterRead方法了,需要自己手动调用。
    1-4:如果是在ios app中打开的H5, 则不会触发 event.preventDefault(),会走组件的触发ios上传功能
<van-uploaderv-model="uploader1"max-count="1":after-read="afterRead"upload-text="选择图片"@click.native="clickUploader($event, 'uploader1')"/>// 上传方法
clickUploader(event, formKey) {if (!this[formKey].length && inAndroidApp()) {event.preventDefault();window.nativeApp.callAlbum();(window as any).backImgUrlFromApp= async (url: string) => {console.log("拿到app返回的上传图片的url", url);this[formKey] = [{ url }];this.afterRead({ filePath: url }, true);};}},
  1. 在ios中下拉文案是英文这个问题,需要让ios在webview中设置一个属性(不太懂,可以直接把这个链接给ios开发看)
    参考来源:https://www.jianshu.com/p/9ed94a238e28
需要在info.plist 里面填加一个key表示app 使用系统的语言,
key为Localized resources can be mixed 设置为YES 就可以了

在这里插入图片描述
3. ios拍照上传会刷新整个页面问题:
先让ios排查webview中是否有调用触发刷新的方法

这个问题我是让ios排查的,因为很明显是触发了整个webview的刷新,
后面发现是他代码里写了进了某个生命周期,触发了整个页面的刷新,
历史遗留问题,是之前的开发写的,至于为什么,无从得知

这篇关于van-uploader 在app内嵌的webview中的一些坑的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912392

相关文章

MFC中App,Doc,MainFrame,View各指针的互相获取

纸上得来终觉浅,为了熟悉获取方法,我建了个SDI。 首先说明这四个类的执行顺序是App->Doc->Main->View 另外添加CDialog类获得各个指针的方法。 多文档的获取有点小区别,有时间也总结一下。 //  App void CSDIApp::OnApp() {      //  App      //  Doc     CDocument *pD

ConstraintLayout布局里的一个属性app:layout_constraintDimensionRatio

ConstraintLayout 这是一个约束布局,可以尽可能的减少布局的嵌套。有一个属性特别好用,可以用来动态限制宽或者高app:layout_constraintDimensionRatio 关于app:layout_constraintDimensionRatio参数 app:layout_constraintDimensionRatio=“h,1:1” 表示高度height是动态变化

App Store最低版本要求汇总

1,自此日期起: 2024 年 4 月 29 日 自 2024 年 4 月 29 日起,上传到 App Store Connect 的 App 必须是使用 Xcode 15 为 iOS 17、iPadOS 17、Apple tvOS 17 或 watchOS 10 构建的 App。将 iOS App 提交至 App Store - Apple Developer 2,最低XCode版本 Xcod

鸿蒙自动化发布测试版本app

创建API客户端 API客户端是AppGallery Connect用于管理用户访问AppGallery Connect API的身份凭据,您可以给不同角色创建不同的API客户端,使不同角色可以访问对应权限的AppGallery Connect API。在访问某个API前,必须创建有权访问该API的API客户端。 1.登录AppGallery Connect网站,选择“用户与访问”。选择左侧

使用Vant Uploader 文件上传,后端java中MultipartFile接收不到文件问题解决

问题 在Uploader组件 after-read回调函数将获取的file对象上传到服务器。 <van-uploader:after-read="uploadFile"/>uploadFile(file) {const data = new FormData();data.

Xinstall助力App全渠道统计,参数传递下载提升用户体验!

在移动互联网时代,App已成为我们日常生活中不可或缺的一部分。然而,对于App开发者来说,如何有效地推广和运营自己的应用,却是一个不小的挑战。尤其是在面对众多渠道、复杂的数据统计和用户需求多样化的情况下,如何精准地触达目标用户,提升用户的下载、安装和活跃度,更是考验着每一个运营者的智慧。 今天,我们就来揭秘一个能够帮助App开发者解决这些痛点的神器——Xinstall。作为一家一站式App全渠道

Flask 创建app 时候传入的 static_folder 和 static_url_path参数理解

Flask 在创建app的时候 是用 app = Flask(__name__) 来创建的,不传入 static_folder参数的话 ,默认的静态文件的位置是在 static目录下 我们可以进入 Flask的源码里面查看 ctrl+鼠标左键进入 这是Flask的 __init__源码(后面还有一些,我就选了需要的代码)     def __init__(self,import_

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '-[__NSCFArra

这个错误说的是一个不可变数组负值给了一个可变的数组。有可能你前面定义的数组是一个可变数组,但是在你其他方法里面用他的时候,他就是一个不可变数组,因为在可变数组拿到别的地方用的时候,他会默认为不可变的,可能这只是一个类里面你只是简单的声明了他吧,并没有进行对他初始化,或者分配什么内存,所以他只是一个不可变的数组,当你在其他地方用他的时候,他就默认为不可变的数组,他可能因为你的没分配内存,而变回不可变

app提交到腾讯开发平台,提示无法获取签名信息,请上传有效包(110506)

最近提交APP时遇到的,一般情况下是因为打包时至勾选v2没有勾选v1的原因,如下图: 这个时候将v1勾选即可。 但是在打包时ˉv1和v2都勾选了也可能会出现这个报错,那就要看一下gradle的 minSdkVersion,如果这个版本在24-26之间也可能会提示这个错误,所以降低这个版本就可以了

基于Python的电商导购APP设计与实现

基于Python的电商导购APP设计与实现 Design and Implementation of an E-commerce Shopping Guide App based on Python 完整下载链接:基于Python的电商导购APP设计与实现 文章目录 基于Python的电商导购APP设计与实现摘要第一章 简介1.1 研究背景1.2 研究目的1.3 研究方法1.4 论文结