往期文章
微信有个存在已久的 bug，不论直接打开 webview 的 h5，还是小程序内 webview 打开的 h5，在拍照上传图片的场景都有一定概率会因为内存占用过高而触发 h5 重新加载，也就是刷新。
影响是会中断用户的业务流程，有时候即使重试依旧会触发这个问题，只能让用户先拍照到相册然后通过相册选择图片，或者重启手机再试。
拍照的方式包括通过浏览器 file 类型的 input 标签，和 jssdk chooseImage API，两种方式无一幸免都有可能触发这个 bug。
本文介绍一种微信小程序 webview 内拍照图片上传的实现方案，规避上述的问题。
主要思路
小程序提供了一个 camera 组件。允许小程序页面内放置相机组件，而不是直接拉起全屏的系统相机组件。可以用来实现自定义相机的功能。
经过测试，小程序内 webview 再打开 camera 组件实现的自定义相机页面，再执行拍照，是不会触发 webview 的重新加载。
测试方案不是很严谨，但通过对照测试和线上观测，此方案确实是有效果。对照测试方法：通过打开多个微信小程序或者小游戏，模拟微信内存占用紧张的场景，通过小程序 webview h5 拉起相机拍照后基本必现 webview 重新加载，而通过小程序自定义相机拍照后，webview 页面的状态依旧保持原状。
实现步骤
基于此，要解决的问题就只有两个了：
-
如何实现微信小程序自定义相机页面？（可参考官方文档示例）
-
小程序 webview 内 h5 和小程序自定义相机页面是不同的运行时环境，如何将两个业务流程关联起来？ (具体代码可以参照上篇文章： H5与原生互调方案)
调用时序：
大家好，我是 funkyfang，如果觉得文章还不错，希望大家 点赞、关注和转发，您的支持是我持续更新的动力。🙇🏻
更多内容关注公众号 FunkyCoding
Peace & Love ❤️
