【微信小程序webview组件(三)】拍照页面重载刷新bug解决方案

274 阅读2分钟

往期文章

微信有个存在已久的 bug,不论直接打开 webview 的 h5,还是小程序内 webview 打开的 h5,在拍照上传图片的场景都有一定概率会因为内存占用过高而触发 h5 重新加载,也就是刷新。

影响是会中断用户的业务流程,有时候即使重试依旧会触发这个问题,只能让用户先拍照到相册然后通过相册选择图片,或者重启手机再试。

拍照的方式包括通过浏览器 file 类型的 input 标签,和 jssdk chooseImage API,两种方式无一幸免都有可能触发这个 bug。

本文介绍一种微信小程序 webview 内拍照图片上传的实现方案,规避上述的问题。

主要思路

小程序提供了一个 camera 组件。允许小程序页面内放置相机组件,而不是直接拉起全屏的系统相机组件。可以用来实现自定义相机的功能。

经过测试,小程序内 webview 再打开 camera 组件实现的自定义相机页面,再执行拍照,是不会触发 webview 的重新加载。

测试方案不是很严谨,但通过对照测试和线上观测,此方案确实是有效果。对照测试方法:通过打开多个微信小程序或者小游戏,模拟微信内存占用紧张的场景,通过小程序 webview h5 拉起相机拍照后基本必现 webview 重新加载,而通过小程序自定义相机拍照后,webview 页面的状态依旧保持原状。

实现步骤

基于此,要解决的问题就只有两个了:

  1. 如何实现微信小程序自定义相机页面?(可参考官方文档示例)

  2. 小程序 webview 内 h5 和小程序自定义相机页面是不同的运行时环境,如何将两个业务流程关联起来? (具体代码可以参照上篇文章: H5与原生互调方案)

调用时序:

281725603360.png

大家好,我是 funkyfang,如果觉得文章还不错,希望大家 点赞、关注和转发,您的支持是我持续更新的动力。🙇🏻

更多内容关注公众号 FunkyCoding

Peace & Love ❤️