Skip to content

D
Docs

OpenHarmony / Docs
接近 2 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 ff6c39cc 编写于 作者: L lixingchi1
浏览文件
操作

add the web. 

Signed-off-by: Nlixingchi1 <lixingchi1@huawei.com>
上级 acc2687f
隐藏空白更改
内联 并排
Showing with 213 addition and 17 deletion
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @ ff6c39cc
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
- [Select](ts-basic-components-select.md) - [Select](ts-basic-components-select.md)
- [TextClock](ts-basic-components-textclock.md) - [TextClock](ts-basic-components-textclock.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md) - [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Web](ts-media-components-web.md)
- 容器组件 - 容器组件
- [AlphabetIndexer](ts-container-alphabet-indexer.md) - [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md) - [Badge](ts-container-badge.md)
...@@ -100,7 +101,6 @@ ...@@ -100,7 +101,6 @@
- [Refresh](ts-container-refresh.md) - [Refresh](ts-container-refresh.md)
- 媒体组件 - 媒体组件
- [Video](ts-media-components-video.md) - [Video](ts-media-components-video.md)
- [Web](ts-media-components-web.md)
- 绘制组件 - 绘制组件
- [Circle](ts-drawing-components-circle.md) - [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md) - [Ellipse](ts-drawing-components-ellipse.md)
......
zh-cn/application-dev/reference/arkui-ts/ts-media-components-web.md → zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ ff6c39cc
...@@ -34,16 +34,17 @@ ohos.permission.READ_USER_STORAGE ...@@ -34,16 +34,17 @@ ohos.permission.READ_USER_STORAGE
> - 不支持横竖屏事件。 > - 不支持横竖屏事件。
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| ----------------- | --------- | -------------- | ---------------------------------------- | | ----------------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------ |
| domStorageAccess | boolean | false | 设置是否开启DOM Storage API权限，默认未开启。 | | domStorageAccess | boolean | false | 设置是否开启DOM Storage API权限，默认未开启。 |
| fileAccess | boolean | true | 设置是否开启Web中通过FILE方式访问应用中的本地文件， 默认启用。 | | fileAccess | boolean | true | 设置是否开启Web中通过FILE方式访问应用中的本地文件， 默认启用。 |
| geolocationAccess | boolean | true | 设置是否允许访问地理位置， 默认允许访问。 | | geolocationAccess | boolean | true | 设置是否允许访问地理位置， 默认允许访问。 |
| imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 | | imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 |
| javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 | | javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 |
| mixedMode | MixedMode | MixedMode.None | 设置是否允许加载HTTP和HTTPS混合内容，默认不允许加载HTTP和HTTPS混合内容。 | | mixedMode | MixedMode | MixedMode.None | 设置是否允许加载HTTP和HTTPS混合内容，默认不允许加载HTTP和HTTPS混合内容。 |
| onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 | | onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 |
| zoomAccess | boolean | true | 设置是否支持使用屏幕控件或手势进行缩放，默认允许执行缩放。 | | zoomAccess | boolean | true | 设置是否支持使用屏幕控件或手势进行缩放，默认允许执行缩放。 |
| javaScriptProxy | { <br> obj: object, <br/> name: string, <br/> methodList: Array<string>, <br/> controller: [WebController](#WebController) <br>} | - | 注入ArkUI对象到HTML中，并在HTML中调用该对象的方法，参数不支持更新。 <br> -obj: 参与注册的对象。 <br> -name: 注册对象的名称，与HTML中调用的对象名一致。<br> -methodList: 参与注册的方法。<br> -controller: 控制器。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> >
...@@ -116,11 +117,11 @@ accessStep(step: number): boolean ...@@ -116,11 +117,11 @@ accessStep(step: number): boolean
### deleteJavaScriptRegister ### deleteJavaScriptRegister
deleteJavaScriptRegister(options: { name: string }): void deleteJavaScriptRegister(name: string): void
清空指定对象已注册的JavaScript方法。 清空指定对象已注册的JavaScript方法。
- options参数说明 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | ----------------------- | | ---- | ------ | ---- | ---- | ----------------------- |
...@@ -175,11 +176,11 @@ loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: ...@@ -175,11 +176,11 @@ loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?:
### loadUrl ### loadUrl
loadUrl(url: string, additionalHttpHeaders?: Array<{ key: string, value: string }>): void loadUrl(options:{ url: string, headers?: Array<{ key: string, value: string }> }): void
加载URL。 加载URL。
- 参数 - options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------------------- | ------------------------------------- | ---- | ---- | ---------- | | --------------------- | ------------------------------------- | ---- | ---- | ---------- |
...@@ -220,11 +221,11 @@ registerJavaScriptProxy(options: { obj: object, name: string, methodList: string ...@@ -220,11 +221,11 @@ registerJavaScriptProxy(options: { obj: object, name: string, methodList: string
### runJavaScript ### runJavaScript
runJavaScript(script: string, callback?: (result: string) => void): void runJavaScript(options: { script: string, callback?: (result: string) => void }): void
执行JavaScript脚本。 执行JavaScript脚本。
- 参数 - options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------------------------ | ---- | ---- | ------------------------------------ | | -------- | ------------------------ | ---- | ---- | ------------------------------------ |
......
zh-cn/application-dev/ui/ui-ts-components-web.md 0 → 100644
浏览文件 @ ff6c39cc
# 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文件。
```
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
</body>
<script type="text/javascript">
function test() {
console.info('Ark Web Component');
}
</script>
</html>
```
## 场景示例
​该场景实现了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();
}
}
```
```
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<video width="320" height="240" controls="controls" muted="muted" autoplay="autoplay">
<!-- test.mp4视频文件放在main/resources/rawfile目录下 -->
<source src="test.mp4" type="video/mp4">
</video>
</body>
</html>
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或