ArkWeb
16.1 概念介绍
Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。可以用于实现移动端的混合式开发(Hybrid App):
- 页面加载:Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、HTML格式文本数据。
- 页面交互:Web组件提供丰富的页面交互的方式，包括:设置前端页面深色模式，新窗口中加载页面位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。
- 页面调试:Web组件支持使用Devtools工具调试前端页面。
16.2 ArkWeb API参考
-
Web组件： 提供具有网页显示能力的一种组件。
Web(options: { src: ResourceStr, contreller: WebviewController | WebController, renderMode? : RenderMode, incognitoMode? : boolean}) -
Webview: 提供web控制能力的相关接口。例如控制Web组件加载的内容，控制Web内容后退前进，以及异步执行JavaScript脚本等能力。
16.2 页面加载与显示
- 加载网络页面
开发者可以在Web组件创建时，指定默认加载的网络页面。默认页面加载完成后，如果开发者需要变更此Web组件显示的网络页面，可以通过调用loadUrl接口加载指定的网页。
...
struct WebComponent {
webviewController: webview.Webviewcontroller = new webview.WebviewController();
build(){
Column(){
Button('loadUrl')
.onclick(()=>{try {//点击按钮时，通过loadUrl，跳转到www.example1.com
this.webviewController.loadUrl('www.example1.com');
}catch(error){
...
}
}）
//组件创建时，加载www.example.com
Web({ src:'www.example.com',controller: this.webviewController })
}
}
}
加载网络页面时，需要在module.json5文件下配置相关的网络权限
{
"module": {
...
"requestPermissions": [
{
"name": "ohos.permisson.INTERNET"
}
]
}
}
}
//注： 此权限级别为normal，只需要在module.json5文件中配置即可
- 加载本地页面
将本地页面文件放在rawfile目录下，可以在Web组件创建的时候指定默认加载的本地页面，并且加载完成后可通过调用loadUrl（）接口变更当前Web组件的页面。
struct WebComponent {
webviewController: webview.Webviewcontroller = new webview.Webviewcontroller();
build(){
Column(){
Button('loadUrl')
.onclick(()=>{
try {//点击按钮时，通过loadurl，跳转到ocal1.html
this.webviewcontroller.loadUrl($rawfile("local1.html"));
}catch(error){
...
}
})
//组件创建时，通过$rawfile加载本地文件local.html
Web({ src: $rawfile("local.html"),controller: this.webviewcontroller })
}
}
}
- 加载HTML格式数据
Web组件可以通过loadData()接口是西安夹杂iHTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面
struct Webcomponent
webviewController: webview,WebviewController = new webview.Webviewcontroller();
build(){
Column(){
Button('loadData')
.onclick(()=>//点击按钮时，通过loadData，加载HTML格式的文本数据
this.controller.loadData("<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
"text/html",
"UTF-8"
);
})
//组件件创建时，加载www.example.com
Web({ src:'www.example.com',controller:this.controller })
}
}
}
2039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
