HarmonyOS Next实战##HarmonyOS SDK应用服务##教育
页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。
Web(value: WebOptions)
WebOptions：通过接口定义Web选项，属性及含义如下：
- src：网页资源地址。src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过loadUrl()重新加载。
- controller：控制器，通过controller可以控制Web组件各种行为（包括页面导航、声明周期状态、JavaScript交互等行为）。
- renderMode：表示当前Web组件的渲染方式，RenderMode.ASYNC_RENDER表示Web组件自渲染，RenderMode.SYNC_RENDER表示支持Web组件统一渲染能力，默认值RenderMode.ASYNC_RENDER，该模式不支持动态调整。
- incognitoMode：表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview，false表示创建正常模式的webview。默认值：false。
- sharedRenderProcessToken：表示当前Web组件指定共享渲染进程的token，多渲染进程模式下，相同token的Web组件会优先尝试复用与token相绑定的渲染进程。token与渲染进程的绑定发生在渲染进程的初始化阶段。当渲染进程没有关联的Web组件时，其与token绑定关系将被移除。默认值： ""。
加载网络页面资源的前提：
页面加载过程中，若涉及网络资源获取，请在module.json5中配置网络访问权限，添加方法可参考在配置文件中声明权限。
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET"
}
]
开发者可以在Web组件创建时，指定默认加载的网络页面。在默认页面加载完成后，如果需要变更此Web组件显示的网络页面，可以通过调用loadUrl()接口加载指定的网页。Web组件的第一个参数变量src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过loadUrl()重新加载。
加载指定的URL。
loadUrl(url: string | Resource, headers?: Array<WebHeader>): void
url：需要加载的 URL。
headers：URL的附加HTTP请求头。
在下面的示例中，在Web组件加载完“example.com”页面后，开发者可通过loadUrl接口将此Web组件显示页面变更为“example1.com”。
实战代码示例：
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%')
}
}
