当前位置: 首页 > news >正文

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

相关文章:

  • 使用Kotlin进行全栈开发 Ktor+Kotlin/JS
  • 数据结构_带头双向循环链表
  • 常见的垃圾回收器(下)
  • 网桥的原理
  • STM32 CAN过滤器细节
  • 网络编程(现在不重要)
  • 10-菜刀连接木马
  • Unity数据持久化—Json存档
  • 基于SSM的在线学习系统的设计与实现(论文+源码)_kaic
  • 数据库SQL语言实战(二)
  • idea错误地commit后如何处理
  • VRTK(Virtual Reality Toolkit)深入介绍
  • 【LeetCode热题100】【贪心算法】划分字母区间
  • 第二届数据安全大赛暨首届“数信杯”数据安全大赛数据安全积分争夺赛-东区预赛部分WP
  • 如何在Python中使用matplotlib库进行数据可视化?
  • 网工基础协议——TCP/UDP协议
  • ClickHouse--16--普通函数
  • 03-JAVA设计模式-组合模式
  • C++发票识别、发票查验接口示例,您的“发票管理专家”
  • 【电控笔记6.2】拉式转换与转移函数
  • 第十五届蓝桥杯题解-数字接龙
  • 【vue】绑定事件 v-on
  • 【应用】SpringBoot-自动配置原理
  • 中文编程入门(Lua5.4.6中文版)第十二章 Lua 协程 参考《愿神》游戏
  • C++笔记之注册回调函数常见的5种情况对比
  • 人工智能揭示矩阵乘法的新可能性
  • 实在智能携手长江新零售俱乐部:探秘实在Agent数字员工,开启零售品牌增长新篇章
  • 计算机科学与导论 第十七 十八章 计算理论,人工智能
  • linux 设置定时任务---学习
  • 钡铼IOy系列模块深挖工业场景需求提供丰富多样的I/O解决方案