页面加载是Web组件的基本功能。依据页面加载数据起源能够分为三种罕用场景,包含加载网络页面、加载本地页面、加载HTML格局的富文本数据。
页面加载过程中,若波及网络资源获取,须要配置ohos.permission.INTERNET网络拜访权限。
加载网络页面
开发者能够在Web组件创立的时候指定默认加载的网络页面 。在默认页面加载实现后,如果开发者须要变更此Web组件显示的网络页面,能够通过调用loadUrl()接口加载指定网络网页。
在上面的示例中,在Web组件加载完“www.example.com”页面后,开发者可通过loadUrl接口将此Web组件显示页面变更为“www.example1.com”。
// 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}) } }}
加载本地页面
将本地页面文件放在利用的rawfile目录下,开发者能够在Web组件创立的时候指定默认加载的本地页面 ,并且加载实现后可通过调用loadUrl()接口变更以后Web组件的页面。
在上面的示例中展现加载本地页面文件的办法:
● 将资源文件搁置在利用的resources/rawfile目录下。图1 资源文件门路
● 利用侧代码
// 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 }) } }}
●local.html页面代码。
<!-- local.html --><!DOCTYPE html><html> <body> <p>Hello World</p> </body></html>
加载HTML格局的文本数据
Web组件能够通过loadData接口实现加载HTML格局的文本数据。当开发者不须要加载整个页面,只须要显示一些页面片段时,可通过此性能来疾速加载页面。
// 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 }) } }}
点击关注浏览原文,理解更多资讯