问题场景:
在网络条件较差或链接资源有问题时,Web组件加载失败会出现白屏状态,这种场景下用户无法感知页面加载状态,导致体验较差,需要将白屏替换为自定义错误页面的方案。
解决措施:
应用可以监听页面加载异常的相关事件如onErrorReceive、onHttpErrorReceive和onSslErrorEventReceive等,在对应的回调中按需实现业务逻辑,如使用loadurl加载自定义错误页;本文以onErrorReceive为例对主资源报错的场景进行处理,加载本地错误页面资源文件。
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Stack() {
Web({ src: 'www.example.com', controller: this.controller })
.onErrorReceive((event) => {
// Only handle loading errors of the main framework to avoid duplicate processing of errors in sub-resources
if (event && event.request.isMainFrame()) {
try {
// 加载自定义错误页面
this.controller.loadUrl($rawfile('custom_failure_page.html'));
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
}
})
}
}
}