H5接入到微信小程序或者微信浏览器打开相机界面会白屏刷新

最近开发的一个需求是H5项目，并嵌入到小程序中，其中有模块用到了拍照功能。

前端同事们开发这个功能嵌入到小程序后会有bug，只要打开相机拍照后返回界面，界面会白屏刷新并且返回到了上一级，前端同事查询微信论坛或者其他地方的问答都说是手机内存不足或者运行的软件太多导致的，但只留一个微信也会如此。

因为我用的iPhone调试的，发现打开相册的时候，前端页面不会全部覆盖，但是打开相机页面会被覆盖，所以我猜测是不是打开相机就是相当于覆盖了当前的页面。

然后我给页面添加了缓存设置，尝试方案可行：

<router-view v-slot="{ Component, route }">
    <component :is="Component" :key="route.name" v-if="!$route.meta.keepAlive"></component>
    <keep-alive>
      <component :is="Component" :key="route.name" v-if="$route.meta.keepAlive"></component>
    </keep-alive>
  </router-view>

缓存后页面数据会一直保存，如果是表单提交页建议：

onActivated(() => {
  // 清空表单数据
})
// 或者
onDeactivated(() => {
  
})

至此，H5项目在微信浏览器中打开相机导致页面白屏刷新并退出的问题得到解决！

如果您有更好的方法，欢迎告诉博主！