疑难杂症之-----h5 页面webview 进小程序内,调用摄像机拍照问题

描述:h5页是用 vue3+vite+vant 写的,拍照上传用的是 vant 的 # Uploader 文件上传 组件,内嵌进小程序的 webview 里 提测打回,测试描述:安卓手机拍照后点击确定会闪退,并且会刷新到首页 第一反应是兼容性问题,然后开始一顿查询,结果在微信开放平台果然发现有同样的问题,时间是 2022 年,但是结果,你们懂的。。。此处省略内心一万句话。 1.解决闪退问题,查询无用,开始自己找方法,突然想起,有没有可能是拍照的图片太大导致,然后查 vant 的文档,推荐使用compressorjs 做图片压缩

js 复制代码
/**
 * 图片压缩
 * @param {File} image 图片
 * @param {String} backType 需要返回的类型blob、file、base64
 * @param {Number} quality 图片压缩比,数字越小,图片压缩越小
 * @return
 */
export const compressorImage = (image: File, backType: string, quality: number) => {
  return new Promise((resolve, reject) => {
    new Compressor(image, {
      quality: quality || 0.8,
      success(result) {
        if (!backType || backType === 'blob') {
          resolve(result);
        } else if (backType === 'file') {
          const file = new File([result], image.name, { type: image.type });
          resolve(file);
        } else if (backType === 'base64') {
          const reader = new FileReader();
          reader.readAsDataURL(result);
          reader.onload = () => resolve(reader.result);
          reader.onerror = (error) => reject(error);
        }
      },
      error(err) {
        reject(err);
      },
    });
  });
};

经测试后,有效,闪退解决,

/查询解决办法的时候,看到说有的机型内存不足,或者太旧也会造成闪退,某官方回答,!暂无解决办法!,只能说一句牛批,目前没碰到,所以不知道适不适用/

**解决完之后,才通知我要求限制图片大小 100M。。。

2.刷新问题,因为 webview 内嵌样式,而且需求要求扫描二维码,没用 wx 的 jssdk,原因:时间太短,后台不予支持,而且公众号管理员找不到人。。。真是槽点。所以想了个曲线救国的办法,用 uniapp 的 webviewjs 跳转小程序扫一扫,扫完后返回,不推荐,但是没办法, 因为吊起扫一扫返回需要在 onshow 里接参数,而且要刷新webview,就在 onshow 内更改了下 webview 的 src,需要先清除再重新赋值才可以刷新,发现直接清除重新加参数不好用,所以加了个延时器 拍照后发现 webview 页重新执行了 onshow,所以造成了刷新问题, 解决:把初始化webview 的 src 赋值放在 onLoad 里,并且需要把webview v-if 去掉,否则安卓某些手机机型会报错 webview 一个页面只能插入一个

至此,问题全部解决

注:此文章为自己解决问题记录所写,可能不适合所有人,不喜勿喷,解决办法可能会参考某些文章,但是时间长了,找不到出处,如有侵权,联系本人,谢谢

相关推荐
尘中客1 小时前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
FreeBuf_2 小时前
Chrome 0Day漏洞遭野外利用
前端·chrome
小彭努力中2 小时前
199.Vue3 + OpenLayers 实现:点击 / 拖动地图播放音频
前端·vue.js·音视频·openlayers·animate
2501_916007472 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
前端大波2 小时前
Sentry 每日错误巡检自动化:设计思路与上手实战
前端·自动化·sentry
ZC跨境爬虫3 小时前
使用Claude Code开发校园交友平台前端UI全记录(含架构、坑点、登录逻辑及算法)
前端·ui·架构
慧一居士3 小时前
Vue项目中,何时使用布局、子组件嵌套、插槽 对应的使用场景,和完整的使用示例
前端·vue.js
Можно3 小时前
uni.request 和 axios 的区别?前端请求库全面对比
前端·uni-app
M ? A4 小时前
解决 VuReact 中 ESLint 规则冲突的完整指南
前端·react.js·前端框架
Jave21085 小时前
实现全局自定义loading指令
前端·vue.js