iOS 小程序自定义报错页面

在加载小程序时,如果网络加载失败或无法打开网站,会出现类似如下的报错页面:

本文介绍如何自定义上图中的报错页面。

操作步骤

自定义报错页面可分为以下 2 步:

  1. 在 H5 基类中监听 kEvent_Navigation_Error 方法。
    通过 MPH5WebViewController () <PSDPluginProtocol> 接口,引入 - (void)handleEvent:(PSDEvent *)event 方法:

    1. - (void)handleEvent:(PSDEvent *)event
    2. {
    3. [super handleEvent:event];
    4. if ([kEvent_Navigation_Error isEqualToString:event.eventType]) {
    5. [self handleContentViewDidFailLoad:(id)event];
    6. }
    7. }

    handleContentViewDidFailLoad 方法如下:

    1. - (void)handleContentViewDidFailLoad:(PSDNavigationEvent *)event
    2. {
    3. PSDNavigationEvent *naviEvent = (PSDNavigationEvent *)event;
    4. NSError *error = naviEvent.error;
    5. [MPH5ErrorHelper handlErrorWithWebView:(WKWebView *)self.psdContentView error:error];
    6. }
  2. afterDidFinishLaunchingWithOptions 方法中设置 error 页面以及 H5 基类。
    error page
    其中,errorHtmlPath 是当 H5 页面加载失败时展示的 HTML 错误页路径,默认读取 MPNebulaAdapter.bundle/error.html
    myerror 代码如下:
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>Document</title>
    7. </head>
    8. <body>
    9. 自定义报错信息
    10. </body>
    11. </html>
    效果如下:
    effect