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-uploader
   v-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的刷新,
后面发现是他代码里写了进了某个生命周期,触发了整个页面的刷新,
历史遗留问题,是之前的开发写的,至于为什么,无从得知

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

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

相关文章

护眼灯什么价位的好?五款性价比高的学生用台灯推荐!

在为学生选择护眼灯时&#xff0c;价格与性价比常常是家长们考虑的重点。价格并非唯一标准&#xff0c;但合适的价位确实能够让我们找到性价比高的产品。今天&#xff0c;我将为大家推荐五款特别适合学生使用的台灯&#xff0c;它们不仅价格适中&#xff0c;而且性能优越&#…

Windows电脑使用Everything+cpolar搭建在线资料库并实现无公网IP管理文件

文章目录 推荐前言1.软件安装完成后&#xff0c;打开Everything2.登录cpolar官网 设置空白数据隧道3.将空白数据隧道与本地Everything软件结合起来总结 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家…

【办公类-21-15】 20240410三级育婴师 712道单选题(题目与答案合并word)

作品展示 背景需求&#xff1a; 前文将APP题库里的育婴师题目下载到EXCEL&#xff0c;并进行手动整理 【办公类-21-13】 2024045三级育婴师 721道单选题 UIBOT下载整理-CSDN博客文章浏览阅读451次&#xff0c;点赞10次&#xff0c;收藏3次。【办公类-21-13】 2024045三级育婴…

【学习】软件信创测试中,如何做好兼容性适配

在软件信创测试的领域中&#xff0c;兼容性适配是至关重要的一环。如何确保软件在不同的操作系统、硬件设备和软件环境中稳定运行&#xff0c;是每个测试人员需要面对的挑战。本文将从几个方面探讨如何做好兼容性适配&#xff0c;以提高软件的稳定性和用户体验。 首先&#xf…

STM32学习和实践笔记(12):蜂鸣器实验

蜂鸣器主要分为两种&#xff0c;一种是压电式的无源蜂鸣器&#xff0c;一种是电磁式的有源蜂鸣器。 有源和无源是指其内部有没有振荡器。 无源的没有内部振荡器&#xff0c;需要输入1.5-5KHZ的音频信号来驱动压电蜂鸣片发声。 有源的内部有振荡器&#xff0c;因此只需要供给…

真实用户见证:爱校对——让您的文字更准确,工作更轻松

在快节奏的工作和学习中&#xff0c;精确无误的文字输出显得尤为重要。爱校对&#xff0c;一款依托清华大学计算机智能人机交互实验室的技术成果开发的校对工具&#xff0c;旨在帮助用户提升文字质量&#xff0c;确保沟通无误。 主体&#xff1a; 核心技术&#xff1a;爱校对…

COOH-Dextran羧基功能化葡聚糖 水凝胶药物载体

COOH-Dextran羧基功能化葡聚糖 水凝胶药物载体 【中文名称】羧基化葡聚糖 【英文名称】Dextran-COOH 【分 子 量】2K/3k/5K/10K/20K/40K/70K/100K/200k/400k/500k/1000k...... 【结 构 式】 【品 牌】碳水科技&#xff08;Tanshtech&#xff09; 【纯 度】95%以上 【…

【40分钟速成智能风控16】模型训练

目录 ​编辑 模型训练 逻辑回归 XGBoost Wide&Deep 模型部署 模型训练 确定了最终的入模变量&#xff0c;终于进入模型训练的环节了&#xff0c;在这个环节我们需要选定模型结构&#xff0c;调节模型超参数&#xff0c;以及评估模型的效果。为了得到一个兼具区分度和…

MySQL学习笔记3——条件查询和聚合函数

条件查询和聚合函数 一、条件查询语句二、聚合函数1、SUM&#xff08;&#xff09;2、AVG()、MAX()、MIN()3、COUNT&#xff08;&#xff09; 一、条件查询语句 WHERE 和 HAVING 的区别&#xff1a; WHERE是直接对表中的字段进行限定&#xff0c;来筛选结果&#xff1b;HAVIN…

相交链表(双指针)

160. 相交链表 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据…

#猫咪养护机模块功能分析

1.供电部分 AC转DC模块 220V交流转12V直流 系统的整体供电模块&#xff0c;可以直接接入220V交流电&#xff0c;并且输出12V直流电&#xff0c;12V直流电一方面供电给TB6600电机驱动板&#xff0c;一方面供电给PTC加热模块&#xff0c;还有一方面接入DCDC直流12转直流5V模块供…

定制Pro版研究区底图,为你的SCI论文增色!

研究区图&#xff08;Research Area Map&#xff09;是一种用于可视化学术研究内容所处地理位置的图表。论文中的研究区图不仅需要准确传达地理和地质数据&#xff0c;还应当在视觉上具有吸引力&#xff0c;以便更好地引起读者的兴趣。经常在高影响力的SCI论文中看到一些非常美…

半导体成品测试详述(Final Test,简称FT)

00、FT的一些概念 半导体成品测试&#xff08;Final Test&#xff0c;简称FT&#xff09;是在芯片封装完成后进行的最后一个测试阶段&#xff0c;其目的是确保芯片在实际应用中的性能和可靠性。FT测试可以包括环境测试、老化测试和应用特定的性能测试。 FT测试主要是为了解决各…

Stable Diffusion AI绘画宝典:从新手到高手,一图胜千言!

在这个数字化时代的浪潮中&#xff0c;人工智能技术以其惊人的创造力和创新性席卷全球。党的二十大报告把“实施科教兴国战略&#xff0c;强化现代化建设人才支撑”作为战略举措进行系统阐述&#xff0c;彰显我国不断发展新动能、新优势的决心和气魄。 Stable Diffusion是一款…

淘宝天猫玩具销售数据可视化

目录 背景描述数据说明数据来源1. 导入模块2. 乐高淘宝数据分析及其可视化2.1 乐高淘宝数据概览2.2 乐高淘宝数据处理2.3 乐高销量排名淘宝店铺Top502.4 乐高产地数量排名top502.5 天猫乐高价格分布2.6 不同价格区间的销售额整体表现分布2.7 淘宝乐高标题词云图 3. 乐高天猫旗舰…

06-java面向对象(中)封装与继承

6.1 封装 6.1.1 封装概述 1、为什么需要封装&#xff1f; 适当的封装可以让代码更容易理解与维护&#xff0c;也加强了代码的安全性。 通俗的讲&#xff0c;把该隐藏的隐藏起来&#xff0c;该暴露的暴露出来。这就是封装性的设计思想。 随着我们系统越来越复杂&#xff0c;…

SQL数据库管理开发工具:DataGrip 2024(win/mac)激活版

JetBrains DataGrip是一款专业的SQL数据库管理开发工具。DataGrip允许您以不同的方式发展模式以及执行信息查询&#xff0c;并提供服务本地文化历史问题记录&#xff0c;可以提高跟踪您的所有学生活动并保护如果您不选择丢失您的工作。DataGrip允许您通过建立相应的操作按名称就…

mPEG-NCO,mPEG-isocyanate常被用于修饰蛋白质、肽或其他具有这些基团的材料组

【试剂详情】 英文名称 mPEG-NCO&#xff0c;mPEG-isocyanate 中文名称 聚乙二醇单甲醚异氰酸酯&#xff0c; 甲氧基-聚乙二醇-异氰酸酯 外观性状 由分子量决定&#xff0c;粘性液体或固体粉末 分子量 400&#xff0c;1k&#xff0c;2k&#xff0c;3.4k&#xff0c;5k&a…

vscode格式化找不到使用...格式化文档

问题记录&#xff1a; 修改一年前的一个项目的时候&#xff0c;忽然发现vscode没有办法对项目进行合理的格式化&#xff0c;但凡保存&#xff0c;因为格式化问题几百个错刷屏。 问题排查&#xff1a; 开始以为是setting.json文件被我修改乱了&#xff0c;复制过来最开始保存的…

HackMyVM-Pwned

目录 信息收集 arp nmap nikto whatweb WEB web信息收集 dirsearch wfuzz FTP ssh连接 提权 get user 系统信息收集 横向渗透 信息收集 arp ┌─[rootparrot]─[~/HackMyVM] └──╼ #arp-scan -l Interface: enp0s3, type: EN10MB, MAC: 08:00:27:16:3d:f8, …
最新文章