liu yang

Posted on Jun 23

Load the page using Web components

#harmonyosnext

Loading Local Pages in HarmonyOS Next

Loading Local Page Files

The following example demonstrates how to load local page files:

Place the local page files in the application's rawfile directory. Developers can specify the default local page to load when creating the Web component, and after loading is complete, they can change the current Web component's page by calling the loadUrl() interface.

When loading a local HTML file that references a local CSS style file, you can use the following method:

<link rel="stylesheet" href="resource://rawfile/xxx.css">
<link rel="stylesheet" href="file:///data/storage/el2/base/haps/entry/cache/xxx.css">// Loading a local CSS file from the sandbox path.

Place resource files in the application's resources/rawfile directory.

Application-Side Code

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // When the button is clicked, use loadUrl to navigate to local1.html
            this.controller.loadUrl($rawfile("local1.html"));
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      // When the component is created, load the local file local.html using $rawfile
      Web({ src: $rawfile("local.html"), controller: this.controller })
    }
  }
}

local.html Page Code

<!-- local.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

local1.html Page Code

<!-- local1.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>This is local1 page</p>
  </body>
</html>

Loading Local Page Files from the Sandbox Path

Construct a singleton object GlobalContext to obtain the sandbox path, and enable the file system access fileAccess permission in the application.

GlobalContext.ets

// GlobalContext.ets
export class GlobalContext {
  private constructor() {}
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

xxx.ets

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { GlobalContext } from '../GlobalContext';

let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // Load file from the sandbox path.
      Web({ src: url, controller: this.controller })
      .fileAccess(true)
    }
  }
}

Modify EntryAbility.ets

Take filesDir as an example to obtain the sandbox path. If you want to obtain other paths, please refer to the application file paths.

// xxx.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { webview } from '@kit.ArkWeb';
import { GlobalContext } from '../GlobalContext';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    // By binding filesDir on the GlobalContext object, data synchronization between the UIAbility component and the UI can be achieved.
    GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
    console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"));
  }
}

Loaded HTML File

<!-- index.html -->
<!DOCTYPE html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>

DEV Community