提供网页显示能力的组件
接口：
Web(options: { src: string, controller?: WebController })
参数：
加载在线网页：
只需要给src指定引用的网页路径
?Web({ src: 'https://www.baidu.com/', controller: this.controller })
加载本地网页
首先在main/resources/rawfile目录下创建一个HTML文件，然后通过$rawfile引用本地网页资源
Web({ src: $rawfile('index.html'), controller: this.controller })
controller：
属性：
fileAccess：设置是否开启通过$rawfile(filepath/filename)访问应用中rawfile路径的文件， 默认启用
javaScriptAccess：设置是否允许执行JavaScript脚本，默认允许执行
imageAccess：设置是否允许自动加载图片资源，默认允许
zoomAccess：设置是否支持手势进行缩放，默认允许执行缩放
textZoomAtio：设置页面的文本缩放百分比，默认100，表示100%
事件：
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
参数：
- url：当前显示弹窗所在网页的URL
- message：弹窗中显示的信息
- result：通知Web组件用户操作行为
返回值：
- 当回调返回true时，可以调用系统弹窗能力(包括确认和取消)，如自定义弹窗AlertDialog.show
- 返回false时，触发默认弹窗
总结：
????????可以通过runJavaScript执行H5方法，H5页面处理完成之后调用confirm方法，原生页面会回调onConfirm事件，在这个回调事件中做一些逻辑处理，这样就完成了原生界面和H5页面的交互
如果需要加载的网页在Web组件中运行JavaScript，则必须为Web组件启用JavaScript功能，默认情况下是允许JavaScript执行的
Web({ src:'https://www.baidu.com', controller:this.controller })
? ? .javaScriptAccess(true)
可以在Web组件中使用runJavaScript方法调用JS方法
this.controller.runJavaScript({
script: 'test()',
callback: (result: string)=> {
this.webResult = result;
}});调用HTML文件中的test方法并将结果返回给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代码：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<button onclick="htmlTest()">调用Web组件里面的方法</button>
</body>
<script type="text/javascript">
function htmlTest() {
str = objName.test("param from Html");
}
</script>
</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%')
}
}