最新更新时间：2020年04月14日15:04:24
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容：小程序退出webview组件之前，在H5页面中进行部分业务逻辑开发
概述
- 问题描述
小程序中使用webview组件，加载了一个H5的URL链接，web项目采用react架构，用户在页面进行了相关的操作，当用户点击左上角原生返回按钮的时候，在react组件中的
componentWillUnmount()方法对用户数据进行暂存，调用接口保存到后端，但实际情况前端没有发送接口请求，点击返回按钮并没有触发componentWillUnmount()方法
- componentWillUnmount
react的生命周期方法
componentWillUnmount()执行时机，在路由入栈和出栈时触发，此时点击返回按钮并没有触发这两种场景
- 问题分析
当用户点击左上角原生返回按钮的时候，会执行webview组件的生命周期方法onUnload()，但对于H5页面的操作相当于关闭浏览器，关闭浏览器或者关闭浏览器标签页面不会触发
componentWillUnmount()
解决方案
- 使用 onbeforeunload 事件
onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发
- 方案一
componentWillMount(){
window.onbeforeunload = function(){}
}
- 方案二
<body onbeforeunload="return myFunction()"></body>
function myFunction() {}
扩展
- onunload
事件在用户退出页面时发生，发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)
- onload
事件会在页面或图像加载完成后立即发生，通常用于 body 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
参考资料
感谢阅读，欢迎评论^-^
扫一扫
3670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
