HarmonyOS — Carregando páginas usando componentes da web

O carregamento da página é a função básica dos componentes da Web. De acordo com a fonte dos dados de carregamento da página, eles podem ser divididos em três cenários comuns, incluindo carregamento de páginas da web, carregamento de páginas locais e carregamento de dados rich text em formato HTML.

Durante o carregamento da página, se a aquisição de recursos de rede estiver envolvida, a permissão de acesso à rede ohos.permission.INTERNET precisará ser configurada.

Carregar página da web

Os desenvolvedores podem especificar a página de rede carregada padrão ao criar um componente da Web. Após o carregamento da página padrão, se o desenvolvedor precisar alterar a página da web exibida por este componente da Web, ele poderá carregar a página da web especificada chamando a interface loadUrl() .

No exemplo a seguir, depois que o componente da web carrega a página "www.example.com", o desenvolvedor pode alterar a página exibida do componente da web para "www.example1.com" por meio da interface loadUrl.

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct 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})    }  }}

Carregar página local

Ao colocar o arquivo da página local no diretório rawfile do aplicativo, o desenvolvedor pode especificar a página local a ser carregada por padrão quando o componente da web é criado e, após a conclusão do carregamento, a página do componente da web atual pode ser alterada chamando a interface loadUrl() .

O exemplo a seguir mostra como carregar um arquivo de página local:

● Coloque os arquivos de recursos no diretório resources/rawfile do aplicativo. Figura 1 Caminho do arquivo de recursos

● Código do lado do aplicativo

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct 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 })    }  }}

● código da página local.html.

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

Carregar dados de texto em formato HTML

Os componentes da Web podem carregar dados de texto em formato HTML por meio da interface loadData . Quando os desenvolvedores não precisam carregar a página inteira, mas apenas exibir alguns fragmentos da página, esse recurso pode ser usado para carregar a página rapidamente.

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct 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 })    }  }}

Clique para acompanhar e leia o texto original para mais informações