All Products
Search
Document Center

Customize error page for iOS mini program

Last Updated: Apr 06, 2021

When loading the mini program, if it fails to load the page or the website cannot be opened, an error page similar to the following will appear:

This article introduces how to customize the error page in the above figure.

Procedure

Customizing the error page falls into the following 2 steps:

  1. Listen to the kEvent_Navigation_Error method in HTML5 base class.
    Introduce - (void)handleEvent:(PSDEvent *)event method via MPH5WebViewController () <PSDPluginProtocol> interface:

    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 method is as follows:

    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. Set error page and HTML5 base class in afterDidFinishLaunchingWithOptions method.
    error page
    In which, errorHtmlPath is the HTML error page path displayed when it fails to load the HTML5 page, and reads MPNebulaAdapter.bundle/error.html by default.
    The code of myerror is as follows:
    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. Custom error message
    10. </body>
    11. </html>
    The result is as follows:
    effect