鸿蒙系列--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 = datareturn '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.urllet message = event.messagelet result = event.result//显示自定义弹框AlertDialog.show({ title: '', message: '--' + message })return true})}.width('100%')}.height('100%')}
}