uni-app 中 App-Plus 平台 WebView 加载失败应通过 manifest.json 配置 error 页面或 plus.webview.create 设置 errorPage,而非依赖 <web-view> 的 @error 事件;自定义 error.html 可监听 error 事件获取出错 URL。

uni-app 无法通过 <web-view> 组件的 @error 事件统一捕获所有加载失败场景,尤其在 App 平台(App-Plus)上该事件基本不触发。真正可靠的方式是配置 manifest.json 的 error 页面路径,或用 plus.webview.create 手动创建并设置 errorPage 属性。
manifest.json 中配置全局错误页面路径
这是最常用、也最稳定的方案,适用于整个 App 的 WebView 加载失败(如 404、网络断开、本地 HTML 不存在等)。
- 路径必须是本地 HTML 文件,推荐放在
hybrid/html/目录下(App-Plus 要求),例如hybrid/html/error.html - 在
manifest.json的"app-plus"节点下配置:"app-plus": { "error": { "url": "hybrid/html/error.html" } } - 若想关闭自定义页、回退到系统默认错误页,把
url设为"none" - 注意:H5 和小程序平台**不支持**此配置,只对 App-Plus(即 5+App)生效
运行时单独为某个 WebView 设置 errorPage
当你需要对某一个 plus.webview 实例做差异化处理(比如某个 H5 页面要求显示专属错误页),就得在创建时传入 errorPage。
- 代码必须写在
#ifdef APP-PLUS条件编译块内,否则会报plus is not defined -
errorPage值必须是相对于应用根目录的本地路径,例如"error.html"或"hybrid/html/error.html" - 示例:
const styles = { errorPage: "hybrid/html/error.html" }; const wv = plus.webview.create("https://xxx.com", "my-webview", styles); - 不要在
wv.loadURL()之后再改errorPage—— 它只在创建时读取一次
在自定义 error.html 里获取错误详情
单纯展示静态提示页不够,你通常需要知道“到底哪错了”。uni-app 允许在自定义错误页中监听 error 事件来拿到上下文。
- 必须在
error.html的<script>中写:document.addEventListener("error", function(e) { console.log("出错 URL:", e.url); console.log("完整地址:", e.href); }); -
e.url是被加载失败的目标地址(比如https://api.example.com/data) -
e.href是当前 error.html 页面自身的完整路径(含file://协议) - 注意:这个事件只在 App-Plus 下触发,且仅当通过 manifest 或
errorPage配置跳转过来时才有效
为什么 <web-view> 的 @error 事件经常失效
这是开发者最容易踩的坑 —— 把 H5 或小程序的思维直接套到 App 上。
-
@error在 App-Plus 平台**几乎从不触发**,官方文档也明确说明它“仅部分平台支持” - 微信小程序中该事件能捕获部分加载失败,但不包括 DNS 解析失败、SSL 握手失败等底层错误
- H5 平台下它依赖浏览器原生
iframe的onerror,行为不稳定,且无法拿到 HTTP 状态码 - 真正可控的错误捕获,必须结合
plus.webview的onerror回调(注意不是组件事件):wv.onerror = function(e) { console.error("WebView 原生错误:", e); };
最后提醒一点:自定义错误页的 HTML 必须是纯静态资源,不能依赖 Vue 运行时或 uni API;所有交互逻辑需用原生 JS 实现,且路径引用要使用相对地址或 file:// 协议,避免跨域或加载失败导致二次错误。


















