DEV Community

victordeng
victordeng

Posted on

HarmonyOS NEXT project practice：Load local webpage resources

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-page-loading-with-web-components#%E5%8A%A0%E8%BD%BD%E6%9C%AC%E5%9C%B0%E9%A1%B5%E9%9D%A2

In order to reduce user waiting perception in scenarios such as startup, jumping, and weak network, and to buy time for dynamic content loading, local pages can be loaded to optimize user experience.

Show the method of loading a local page file in the following example:
By placing the local page file in the rawfile directory of the application, developers can specify the default loaded local page 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 local HTML files, referencing local CSS style files can be achieved through the following methods.

<link rel="stylesheet" href="resource://rawfile/xxx.css">
<link rel="stylesheet" href="file:///data/storage/el2/base/haps/entry/cache/xxx.css">// 加载沙箱路径下的本地css文件。
Enter fullscreen mode Exit fullscreen mode

Load \$r or \$rawfile local page

In the resources/rawfile directory
Add hello.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello!</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

add helloAgain.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello again!</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

add WebLocalPage

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

@Entry
@Component
struct WebLocalPage {
  src: ResourceStr = $rawfile("hello.html")
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {
      Text('WebPage')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Row({ space: 10 }){
        Button('hello')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到hello.html
              this.webController.loadUrl( $rawfile("hello.html"));
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
        Button('hello again')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到helloAgain.html
              this.webController.loadUrl( $rawfile("helloAgain.html"));
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
      }

      Web({ src: this.src, controller: this.webController })
        .width('100%')
        .layoutWeight(1)
        .horizontalScrollBarAccess(false)//设置是否显示横向滚动条
        .verticalScrollBarAccess(false) //设置是否显示纵向滚动条
    }
    .height('100%')
    .width('100%')
  }
}
Enter fullscreen mode Exit fullscreen mode

Load local resources through resource protocol

Replace $rawfile with resource protocol

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

@Entry
@Component
struct WebLocalPage {
  // src: ResourceStr = $rawfile("hello.html")
  src: ResourceStr = 'resource://rawfile/hello.html'
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {
      Text('WebPage')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Row({ space: 10 }) {
        Button('hello')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到hello.html
              // this.webController.loadUrl($rawfile("hello.html"));
              this.webController.loadUrl('resource://rawfile/hello.html');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
        Button('hello again')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到helloAgain.html
              // this.webController.loadUrl($rawfile("helloAgain.html"));
              this.webController.loadUrl('resource://rawfile/helloAgain.html');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
      }

      Web({ src: this.src, controller: this.webController })
        .width('100%')
        .layoutWeight(1)
        .horizontalScrollBarAccess(false)//设置是否显示横向滚动条
        .verticalScrollBarAccess(false) //设置是否显示纵向滚动条
    }
    .height('100%')
    .width('100%')
  }
}
Enter fullscreen mode Exit fullscreen mode

Load HTML formatted text data

The src of a web component can directly load HTML strings.

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

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  htmlStr: string = "data:text/html, <html><body bgcolor=\"green\"><h1>Source:<pre>source</pre></h1></body></html>";

  build() {
    Column() {
      // 组件创建时，加载htmlStr
      Web({ src: this.htmlStr, controller: this.controller })
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Web components can load HTML formatted text data through the loadData() interface. When developers do not need to load the entire page and only need to display some page fragments, this feature can be used to quickly load the page. When loading a large number of HTML files, the fourth parameter baseURL needs to be set to "data".

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

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

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)