reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-page-loading-with-web-components#%E5%8A%A0%E8%BD%BD%E7%BD%91%E7%BB%9C%E9%A1%B5%E9%9D%A2
Page loading is a fundamental function of web components. According to the source of page loading data, it can be divided into three common scenarios, including loading web pages, loading local pages, and loading rich text data in HTML format.
Web(value: WebOptions)
WebOptions: Define web options through interfaces, with the following properties and meanings:
- Src: URL of the webpage resource. Src cannot dynamically change the address through a state variable (e.g. @ State). If you need to change it, please reload it through loadurl().
- Controller: A controller that can control various behaviors of web components, including page navigation, declaring cycle state, JavaScript interaction, and more.
- RenderMode: represents the rendering mode of the current web component, renderMode.ASYNC RENDER represents self rendering of the web component, renderMode.SYNC_RENDER represents support for unified rendering capability of the web component, default value is renderMode.ASYNC RENDER, this mode does not support dynamic adjustment.
- IncognitoMode: Indicates whether the currently created webview is in privacy mode. True represents creating a private mode webview, while false represents creating a normal mode webview. Default value: false.
- SharedRenderProcessToken: Refers to the token specified by the current web component for the shared rendering process. In multi rendering process mode, web components with the same token will first attempt to reuse the rendering process bound to the token. The binding between the token and the rendering process occurs during the initialization phase of the rendering process. When there is no associated web component in the rendering process, its binding relationship with the token will be removed. Default value: ''.
The prerequisite for loading web page resources is:
During the page loading process, if network resource retrieval is involved, please configure network access permissions in module. json 5. The method of adding permissions can refer to declaring permissions in the configuration file.
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET"
}
]
Developers can specify the default web page to load when creating web components. After the default page is loaded, if you need to change the web page displayed by this web component, you can load the specified web page by calling the loadURL() interface. The first parameter variable src of a web component cannot dynamically change its address through a state variable (e.g. @ State). If you need to change it, please reload it through loadURL().
Load the specified URL.
loadUrl(url: string | Resource, headers?: Array<WebHeader>): void
URL: The URL that needs to be loaded.
Headers: Additional HTTP request headers for URLs.
In the following example, after the web component loads the "example. com" page, the developer can change the display page of this web component to "example. com" through the loadURL interface.
Practical code example:
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebOnlinePage {
src: ResourceStr = 'https://m.baidu.com'
webController: webview.WebviewController = new webview.WebviewController();
build() {
Column({ space: 10 }) {
Text('WebPage')
.fontSize(20)
.fontWeight(FontWeight.Bold)
Row({ space: 10 }){
Button('加载百度官网')
.onClick(() => {
try {
// 点击按钮时,通过loadUrl,跳转到https://m.baidu.com
this.webController.loadUrl('https://m.baidu.com');
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('加载华为开发者官网')
.onClick(() => {
try {
// 点击按钮时,通过loadUrl,跳转到https://developer.huawei.com/
this.webController.loadUrl('https://developer.huawei.com/');
} 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%')
}
}
Top comments (0)