乐趣区

关于harmonyos:HarmonyOS使用Web组件加载页面

jiezi

页面加载是 Web 组件的基本功能。依据页面加载数据起源能够分为三种罕用场景，包含加载网络页面、加载本地页面、加载 HTML 格局的富文本数据。

页面加载过程中，若波及网络资源获取，须要配置 ohos.permission.INTERNET 网络拜访权限。

加载网络页面
开发者能够在 Web 组件创立的时候指定默认加载的网络页面。在默认页面加载实现后，如果开发者须要变更此 Web 组件显示的网络页面，能够通过调用 loadUrl()接口加载指定网络网页。

在上面的示例中，在 Web 组件加载完“www.example.com”页面后，开发者可通过 loadUrl 接口将此 Web 组件显示页面变更为“www.example1.com”。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {Column() {Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过 loadUrl，跳转到 www.example1.com
            this.webviewController.loadUrl('www.example1.com');
          } catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创立时，加载 www.example.com
      Web({src: 'www.example.com', controller: this.webviewController})
    }
  }
}

加载本地页面
将本地页面文件放在利用的 rawfile 目录下，开发者能够在 Web 组件创立的时候指定默认加载的本地页面，并且加载实现后可通过调用 loadUrl()接口变更以后 Web 组件的页面。

在上面的示例中展现加载本地页面文件的办法：
● 将资源文件搁置在利用的 resources/rawfile 目录下。图 1 资源文件门路

● 利用侧代码

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {Column() {Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过 loadUrl，跳转到 local1.html
            this.webviewController.loadUrl($rawfile("local1.html"));
          } catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 组件创立时，通过 $rawfile 加载本地文件 local.html
      Web({src: $rawfile("local.html"), controller: this.webviewController })
    }
  }
}

●local.html 页面代码。

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

加载 HTML 格局的文本数据
Web 组件能够通过 loadData 接口实现加载 HTML 格局的文本数据。当开发者不须要加载整个页面，只须要显示一些页面片段时，可通过此性能来疾速加载页面。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_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.code},  Message: ${error.message}`);
          }
        })
      // 组件创立时，加载 www.example.com
      Web({src: 'www.example.com', controller: this.controller})
    }
  }
}

点击关注浏览原文，理解更多资讯

退出移动版