diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 61d0b41a286338e50499afa987dfdee14afcbac0..90d2c4d709352205a623615629f773ab6f453284 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -72,6 +72,7 @@ - [Select](ts-basic-components-select.md) - [TextClock](ts-basic-components-textclock.md) - [LoadingProgress](ts-basic-components-loadingprogress.md) + - [Web](ts-media-components-web.md) - 容器组件 - [AlphabetIndexer](ts-container-alphabet-indexer.md) - [Badge](ts-container-badge.md) @@ -100,7 +101,6 @@ - [Refresh](ts-container-refresh.md) - 媒体组件 - [Video](ts-media-components-video.md) - - [Web](ts-media-components-web.md) - 绘制组件 - [Circle](ts-drawing-components-circle.md) - [Ellipse](ts-drawing-components-ellipse.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md similarity index 78% rename from zh-cn/application-dev/reference/arkui-ts/ts-media-components-web.md rename to zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index c729b54fb4eace90c68b489443cc6e7ca2ebd6da..566d3b60124edd5c1f2dcf691892250d320746ca 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -34,16 +34,17 @@ ohos.permission.READ_USER_STORAGE > - 不支持横竖屏事件。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ----------------- | --------- | -------------- | ---------------------------------------- | -| domStorageAccess | boolean | false | 设置是否开启DOM Storage API权限，默认未开启。 | -| fileAccess | boolean | true | 设置是否开启Web中通过FILE方式访问应用中的本地文件， 默认启用。 | -| geolocationAccess | boolean | true | 设置是否允许访问地理位置， 默认允许访问。 | -| imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 | -| javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 | -| mixedMode | MixedMode | MixedMode.None | 设置是否允许加载HTTP和HTTPS混合内容，默认不允许加载HTTP和HTTPS混合内容。 | -| onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 | -| zoomAccess | boolean | true | 设置是否支持使用屏幕控件或手势进行缩放，默认允许执行缩放。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| ----------------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------ | +| domStorageAccess | boolean | false | 设置是否开启DOM Storage API权限，默认未开启。 | +| fileAccess | boolean | true | 设置是否开启Web中通过FILE方式访问应用中的本地文件， 默认启用。 | +| geolocationAccess | boolean | true | 设置是否允许访问地理位置， 默认允许访问。 | +| imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 | +| javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 | +| mixedMode | MixedMode | MixedMode.None | 设置是否允许加载HTTP和HTTPS混合内容，默认不允许加载HTTP和HTTPS混合内容。 | +| onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 | +| zoomAccess | boolean | true | 设置是否支持使用屏幕控件或手势进行缩放，默认允许执行缩放。 | +| javaScriptProxy | {
obj: object,
name: string,
methodList: Array,
controller: [WebController](#WebController)
} | - | 注入ArkUI对象到HTML中，并在HTML中调用该对象的方法，参数不支持更新。
-obj: 参与注册的对象。
-name: 注册对象的名称，与HTML中调用的对象名一致。
-methodList: 参与注册的方法。
-controller: 控制器。 | > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > @@ -116,11 +117,11 @@ accessStep(step: number): boolean ### deleteJavaScriptRegister -deleteJavaScriptRegister(options: { name: string }): void +deleteJavaScriptRegister(name: string): void 清空指定对象已注册的JavaScript方法。 -- options参数说明 +- 参数 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ---- | ------ | ---- | ---- | ----------------------- | @@ -175,11 +176,11 @@ loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: ### loadUrl -loadUrl(url: string, additionalHttpHeaders?: Array<{ key: string, value: string }>): void +loadUrl(options:{ url: string, headers?: Array<{ key: string, value: string }> }): void 加载URL。 -- 参数 +- options参数说明 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | --------------------- | ------------------------------------- | ---- | ---- | ---------- | @@ -220,11 +221,11 @@ registerJavaScriptProxy(options: { obj: object, name: string, methodList: string ### runJavaScript -runJavaScript(script: string, callback?: (result: string) => void): void +runJavaScript(options: { script: string, callback?: (result: string) => void }): void 执行JavaScript脚本。 -- 参数 +- options参数说明 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | ------------------------ | ---- | ---- | ------------------------------------ | diff --git a/zh-cn/application-dev/ui/ui-ts-components-web.md b/zh-cn/application-dev/ui/ui-ts-components-web.md new file mode 100644 index 0000000000000000000000000000000000000000..f17a05c89d7a1d5388af9ac57b8d6868186d633e --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-components-web.md @@ -0,0 +1,195 @@ +# Web + +Web是提供网页显示能力的组件，具体用法请参考 [Web API](../reference/arkui-ts/ts-basic-components-web.md)。 + +## 创建组件 + +在main/ets/MainAbility/pages目录下的ets文件中创建一个Web组件。在web组件中通过src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于调用Web组件的方法。 + + ``` + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + build() { + Column() { + Web({ src: 'https://www.example.com', controller: this.controller }) + } + } + } + ``` + +## 设置样式和属性 + +Web组件的使用需要添加丰富的页面样式和功能属性。设置height、padding样式可为Web组件添加高和内边距，设置fileAccess属性可为Web组件添加文件访问权限，设置javaScriptAccess属性为true使Web组件具有执行JavaScript代码的能力。 + +``` +// xxx.ets +@Entry +@Component +struct WebComponent { + fileAccess: boolean = true; + controller: WebController = new WebController(); + build() { + Column() { + Text('Hello world!') + .fontSize(20) + Web({ src: 'https://www.example.com', controller: this.controller }) + // 设置高和内边距 + .height(500) + .padding(20) + // 设置文件访问权限和脚本执行权限 + .fileAccess(this.fileAccess) + .javaScriptAccess(true) + Text('End') + .fontSize(20) + } + } +} +``` +## 添加事件和方法 + +为Web组件添加onProgressChange事件，该事件回调Web引擎加载页面的进度值。将该进度值赋值给Progress组件的value，控制Progress组件的状态。当进度为100%时隐藏Progress组件，Web页面加载完成。 + +``` +// xxx.ets +@Entry +@Component +struct WebComponent { + @State progress: number = 0; + @State hideProgress: boolean = true; + fileAccess: boolean = true; + controller: WebController = new WebController(); + build() { + Column() { + Text('Hello world!') + .fontSize(20) + Progress({value: this.progress, total: 100}) + .color('#0000ff') + .visibility(this.hideProgress ? Visibility.None : Visibility.Visible) + Web({ src: 'https://www.example.com', controller: this.controller }) + .fileAccess(this.fileAccess) + .javaScriptAccess(true) + .height(500) + .padding(20) + // 添加onProgressChange事件 + .onProgressChange(e => { + this.progress = e.newProgress; + // 当进度100%时，进度条消失 + if (this.progress === 100) { + this.hideProgress = true; + } else { + this.hideProgress = false; + } + }) + Text('End') + .fontSize(20) + } + } +} +``` +在onPageEnd事件中添加runJavaScript方法。onPageEnd事件是网页加载完成时的回调，runJavaScript方法可以执行HTML中的JavaScript脚本。当页面加载完成时，触发onPageEnd事件，调用HTML文件中的test方法，在控制台打印信息。 + +``` +// xxx.ets +@Entry +@Component +struct WebComponent { + @State progress: number = 0; + @State hideProgress: boolean = true; + fileAccess: boolean = true; + // 定义Web组件的控制器controller + controller: WebController = new WebController(); + build() { + Column() { + Text('Hello world!') + .fontSize(20) + Progress({value: this.progress, total: 100}) + .color('#0000ff') + .visibility(this.hideProgress ? Visibility.None : Visibility.Visible) + // 初始化Web组件，并绑定controller + Web({ src: $rawfile('index.html'), controller: this.controller }) + .fileAccess(this.fileAccess) + .javaScriptAccess(true) + .height(500) + .padding(20) + .onProgressChange(e => { + this.progress = e.newProgress; + if (this.progress === 100) { + this.hideProgress = true; + } else { + this.hideProgress = false; + } + }) + .onPageEnd(e => { + // test()在index.html中定义 + this.controller.runJavaScript({ script: 'test()' }); + console.info('url: ', e.url); + }) + Text('End') + .fontSize(20) + } + } +} +``` + +在main/resources/rawfile目录下创建一个HTML文件。 + +``` + + + + + + Hello world! + + + +``` +## 场景示例 + +​该场景实现了Web组件中视频的动态播放。首先在HTML页面内嵌入视频资源，再使用Web组件的控制器调用onActive和onInactive方法激活和暂停页面渲染。页面消失时，Web组件停止渲染，视频暂停播放；页面显示时，激活Web组件，视频继续播放。 + + ``` + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + build() { + Column() { + Web({ src: $rawfile('index.html'), controller: this.controller }) + .fileAccess(true) + } + } + + onPageHide() { + // 页面消失时调用 + this.controller.onInactive(); + } + + onPageShow() { + // 页面显示时调用 + this.controller.onActive(); + } + } + ``` + + ``` + + + + + + + + + ```