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-PLUSvar 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/");//加载urllet 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

结语

• 今天就写到这里啦~
• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~