uniapp-webview获取h5页面加载错误信息及自定义错误页面（捕获uniapp中webview加载error）
问题描述
- uniapp中需要加载H5页面，使用了webview，但是在某些情况下，页面加载出现错误，但是官方文档里给出的捕获错误信息的回调函数，只适用部分平台，某些平台无法获取@error异常信息，这种情况如何处理呢？
- 解决uniapp web-view组件的@load @error事件无效，事件不触发的问题
原因分析
原因:运行平台问题
除去代码语法问题，查看官方文档平台说明，如果运行在非小程序的情况下，就会导致事件无效
获取h5页面加载错误：HTML5+引擎plus.webview
- uni-app应用程序内置HTML5+引擎，允许js直接调用丰富的原生功能。因此我们可以使用js创建webview来加载h5的html,通过plus.webview可获取应用界面管理对象，获取页面异常详情并添加处理逻辑。
- 参考文档：HTML5+引擎 Webview模块
- 参考文档：uni-app使用plus注意事项
<template>
<div></div>
</template>
<script setup>
import { ref } from "vue";
import { onLoad, onBackPress } from "@dcloudio/uni-app";
const vw = ref("webview");
const pages = getCurrentPages();
onLoad((options) => {
// #ifdef APP-PLUS
var wv = plus.webview.create("", 'custom-webview', {
plusrequire: 'none', //禁止远程网页使用plus的API
'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
top: uni.getSystemInfoSync().statusBarHeight + 44 //放置在titleNView下方。
});
wv.onerror = (e)=>{
console.log("拿到错误啦：", e)
}
wv.loadURL("https://www.baidu.com/");//加载url
let pages = getCurrentPages();//获取当前页面栈的实例
let currentPage = pages[pages.length - 1]; // 上一页
var currentWebview = currentPage.$getAppWebview();//获取当前页面的webview对象实例
currentWebview.append(wv);//Webview窗口中添加子窗口
// #endif
});
</script>
自定义错误页面方案：自定义Webview的404等错误页面，Webview窗口加载页面错误时显示一个默认自定义错误页面
一把报错的时候会有一个默认的错误页，不太好看，我们可以自己写一个好看的提示页，然后放在项目根目录下，然后采用如下配置：
设置应用全局默认错误页面
5+App和wap2app：配置manifest.json
"plus": {
"error": {
"url": "error.html"
},
//...
},
//...
uni-app项目：配置manifest.json
"app-plus": {
"error": {
"url": "hybrid/html/error.html"
},
//...
},
//...
单独设置某个Webview窗口的错误页面怎么处理呢？
使用HTML5+引擎 Webview API来单独处理这种需求即可~
var styles = {errorPage:"error.html"}; // 设置为“none”则关闭此Webview窗口的跳转到错误页面功能
var webview = plus.webview.create( "url", "id", styles );
webview.show();
附赠：HTML5+引擎 Webview API说明
参考文档：HTML5+引擎 Webview模块 uni-app使用plus注意事项
属性：
- isRecovery: 当前Webview窗口是否由于内核崩溃自动恢复
方法：
- all: 获取所有Webview窗口
- close: 关闭Webview窗口
- create: 创建新的Webview窗口
- currentWebview: 获取当前窗口的WebviewObject对象
- getDisplayWebview: 获取屏幕所有可视的Webview窗口
- getWebviewById: 查找指定标识的WebviewObject窗口
- getLaunchWebview: 获取应用首页WebviewObject窗口对象
- getSecondWebview: 获取应用第二个首页WebviewObject窗口对象
- getTopWebview: 获取应用显示栈顶的WebviewObject窗口对象
- hide: 隐藏Webview窗口
- open: 创建并打开Webview窗口
- prefetchURL: 预载网络页面
- prefetchURLs: 预载网络页面（多个地址）
- show: 显示Webview窗口
- startAnimation: Webview窗口组合动画
- defaultHardwareAccelerated: 获取Webview默认是否开启硬件加速
对象：
- AnimationTypeShow: 一组用于定义页面或控件显示动画效果
- AnimationTypeClose: 一组用于定义页面或控件关闭的动画效果
- WebviewObject: Webview窗口对象，用于操作加载HTML页面的窗口
- WebviewAnimationOptions: Webview窗口动画参数
- WebviewAnimationStyles: Webview窗口动画样式
- WebviewBounceStyle: Webview窗口回弹样式
- WebviewContentAnimationOptions: Webview窗口内容动画参数
- WebviewDock: 原生控件在窗口中停靠的方式
- WebviewDragEvent: Webview窗口滑动事件数据
- WebviewDragOptions: 窗口手势操作参数
- WebviewDragOtherViewOptions: 手势操作关联对象参数
- WebviewDrawOptions: 截屏绘制操作参数
- WebviewFavoriteOptions: 窗口收藏参数
- WebviewLoadDataOptions: 创建加载HTML数据参数
- WebviewShareOptions: 窗口的分享参数
- WebviewSubNViewStyles: 窗口原生子View控件样式
- WebviewTitleNViewStyles: 窗口标题栏控件样式
- WebviewTitleNViewBackButtonStyles: 窗口标题栏自定义返回按钮样式
- WebviewTitleNViewButtonStyles: 窗口标题栏自定义按钮样式
- WebviewTitleNViewSearchInputStyles: 窗口标题栏搜索框样式
- WebviewProgressStyles: 标题栏控件的进度条样式
- WebviewSplitLineStyles: 窗口标题栏控件的分割线样式
- WebviewEvent: Webview窗口事件
- WebviewExtraOptions: JSON对象，原生窗口扩展参数
- WebviewPosition: 原生控件在窗口中显示的位置
- WebviewPullToRefreshStyles: Webview窗口下拉刷新样式
- WebviewRenderedEventOptions: Webview窗口rendered事件参数
- WebviewReplaceWebApiOptions: 替换H5标准API配置信息
- WebviewStatusbarStyles: JSON对象，Webview窗口的系统状态栏区域样式
- WebviewStyles: JSON对象，Webview窗口对象的样式
- WebviewTransform: 一组用于定义页面或控件变形的属性
- WebviewTransition: 一组用于定义页面或控件转换效果的属性
- WebviewOverrideResourceOptions: 拦截Webview窗口资源请求的参数
- WebviewOverrideUrlOptions: 拦截Webview窗口URL请求的属性
- WebviewListenResourceOptions: 监听Webview窗口资源加载的属性
回调方法：
- BounceEventCallback: Webview窗口回弹事件的回调函数
- EventCallback: Webview窗口事件的回调函数
- PopGestureCallback: Webview窗口侧滑事件的回调函数
- HistoryQueryCallback: 历史记录查询的回调函数
- ListenResourceLoadingCallback: Webview窗口加载资源事件的回调函数
- OverrideUrlLoadingCallback: Webview窗口拦截URL链接跳转的回调函数
- TitleUpdateCallback: Webview窗口加载页面标题更新的回调函数
- WebviewAnimationCallback: Webview窗口组合动画回调函数
- WebviewDragCallback: Webview窗口滑屏操作事件回调函数
- WebviewCustomButtonCallback: Webview窗口标题栏上自定义按钮点击事件回调函数
- SuccessCallback: Webview窗口操作成功回调函数
- ErrorCallback: Webview窗口操作失败回调函数
权限：
{
// ...
"permissions":{
// ...
"Webview": {
"description": "窗口管理"
}
}
}
注意事项
1.uniapp调用HTML5+的扩展规范时，必须使用条件编译。否则，运行到h5、applet等平台时，会出现plus is not defined错误。
// #ifdef APP-PLUS
var appid = plus.runtime.appid;
console.log('应用的 appid 为：' + appid);
// #endif
2.uni应用程序中的事件侦听器Event listeners
在普通的H5+项目中，使用document.addEventListener,在uni应用程序中，没有document,我们可以使用plus.globalEvent.addEventListener
// #ifdef APP-PLUS
// Listen for new intent events
plus.globalEvent.addEventListener('newintent', function(){});
// #endif
结语
- 今天就写到这里啦~
- 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境，合作共赢
