鸿蒙系列--Web组件
一、介绍
提供网页显示能力的组件
二、基础使用
接口：
Web(options: { src: string, controller?: WebController })
参数：
- src：是网页资源地址，可以是本地资源，也可以是网络资源
- controller：控制器，可以控制Web组件的各种行为，如网页前进、后退等
加载在线网页：
只需要给src指定引用的网页路径
Web({ src: 'https://www.baidu.com/', controller: this.controller })
加载本地网页
首先在main/resources/rawfile目录下创建一个HTML文件，然后通过$rawfile引用本地网页资源
Web({ src: $rawfile('index.html'), controller: this.controller })
controller：
- forward：前进
- backward：后退
- refresh：刷新
- stop：停止
- clearHistory：清除历史
- runJavaScript：原生页面调用H5页面
- zoom(factor: number)：设置网页缩放倍数，zoomAccess为true时才生效
属性：
-
fileAccess：设置是否开启通过$rawfile(filepath/filename)访问应用中rawfile路径的文件， 默认启用
-
javaScriptAccess：设置是否允许执行JavaScript脚本，默认允许执行
-
imageAccess：设置是否允许自动加载图片资源，默认允许
-
zoomAccess：设置是否支持手势进行缩放，默认允许执行缩放
-
textZoomAtio：设置页面的文本缩放百分比，默认100，表示100%
事件：
- onConfirm事件，网页调用confirm()告警时触发此回调
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
参数：
- url：当前显示弹窗所在网页的URL
- message：弹窗中显示的信息
- result：通知Web组件用户操作行为
返回值：
- 当回调返回true时，可以调用系统弹窗能力(包括确认和取消)，如自定义弹窗AlertDialog.show
- 返回false时，触发默认弹窗
- onAlert
- onBeforeUnload
- onConsole
总结：
可以通过runJavaScript执行H5方法，H5页面处理完成之后调用confirm方法，原生页面会回调onConfirm事件，在这个回调事件中做一些逻辑处理，这样就完成了原生界面和H5页面的交互
三、Web和JavaScript交互
如果需要加载的网页在Web组件中运行JavaScript，则必须为Web组件启用JavaScript功能，默认情况下是允许JavaScript执行的
Web({ src:'https://www.baidu.com', controller:this.controller })
.javaScriptAccess(true)
Web组件调用JS方法
可以在Web组件中使用runJavaScript方法调用JS方法
this.controller.runJavaScript({
script: 'test()',
callback: (result: string)=> {
this.webResult = result;
}});调用HTML文件中的test方法并将结果返回给Web组件
JS调用Web组件方法
可以使用registerJavaScriptProxy将Web组件中的JavaScript对象注入到window对象中，这样网页中的JS就可以直接调用该对象了
要想registerJavaScriptProxy方法生效，须调用refresh方法
原生调用：
@Entry
@Component
struct WebPage {
@State dataFromHtml: string = ''
controller: WebController = new WebController()
testObj = {
test: (data) => {
this.dataFromHtml = data
return 'ArkUI Web Component';
},
toString: () => {
console.log('Web Component toString');
}
}
build() {
Column() {
Text(this.dataFromHtml).fontSize(20)
Row() {
Button('Register JavaScript To Window').onClick(() => {
this.controller.registerJavaScriptProxy({
object: this.testObj,
name: 'objName',
methodList: ['test', 'toString'],
});
this.controller.refresh();
})
}
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
}
}
}html代码：
四、案例
@Entry
@Component
struct WebPage {
controller: WebController = new WebController();
build() {
Row() {
Row({ space: 10 }) {
Button('前进').onClick(() => {
this.controller.forward()
})
Button('后退').onClick(() => {
this.controller.backward()
})
Button('执行').onClick(() => {
//原生页面调用H5页面 test()：是定义在Html网页中的方法
this.controller.runJavaScript({ script: 'test()', callback: () => {
} })
})
}.width('100%').height(50)
Column() {
Web({ src: 'https://www.baidu.com/', controller: this.controller })
.onConfirm((event) => {
//输入回调函数的参数
let url = event.url
let message = event.message
let result = event.result
//显示自定义弹框
AlertDialog.show({ title: '', message: '--' + message })
return true
})
}
.width('100%')
}
.height('100%')
}
}