From 4d1e120abed0fa79d674bc3f0456b96e2809f384 Mon Sep 17 00:00:00 2001
From: liwenzhen <liwenzhen3@huawei.com>
Date: Mon, 28 Feb 2022 11:06:26 +0800
Subject: [PATCH] add web component reference for web-like Paradigm

Signed-off-by: liwenzhen <liwenzhen3@huawei.com>
Change-Id: I65da67e833dee4acfb460bb556515222d239bb33
---
 .../arkui-js/js-components-basic-web.md       | 70 +++++++++++++++++++
 .../reference/arkui-ts/Readme-CN.md           |  2 +-
 ...ents-web.md => ts-basic-components-web.md} |  0
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md
 rename zh-cn/application-dev/reference/arkui-ts/{ts-media-components-web.md => ts-basic-components-web.md} (100%)

diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md
new file mode 100644
index 0000000000..83fb9c4f41
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md
@@ -0,0 +1,70 @@
+# web
+展示网页内容的组件。
+>![](../../public_sys-resources/icon-note.gif) **说明：** 
+>   该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 权限列表
+ohos.permission.INTERNET
+
+## 约束
+web组件不跟随转场动画。一个页面仅支持一个web组件。
+
+## 子组件
+不支持。
+
+## 属性
+
+| 名称 | 参数类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| src      | string |   -    |   否     |设置需要显示网页的地址，网址的域名必须为https协议且经过ICP备案。|
+| id  | string | -  | 否  |  组件的唯一标识。  |
+
+
+## 样式
+仅支持通用样式中的width<sup>8+</sup>、height<sup>8+</sup>、padding<sup>8+</sup>、margin<sup>8+</sup>、border<sup>8+</sup>。
+
+## 事件
+仅支持如下事件：
+| 名称 | 参数 | 描述 |
+| -------- |  -------- | -------- |
+| pagestart      | {url: string} | 加载网页时触发。 |
+| pagefinish  | {url: string} |  网页加载结束时触发。  |
+| error  | {url: string, errorCode: number, description: string} |  加载网页出现错误时触发或打开网页出错时触发。  |
+
+## 方法
+仅支持如下方法：
+| 名称 | 参数 | 描述 |
+| -------- |  -------- | -------- |
+| reload      | - | 重新加载页面。 |
+
+## 示例
+```
+<!-- xxx.hml -->
+<div style="height: 500px; width: 500px; flex-direction: column;">
+    <button onclick="reloadWeb">click to reload</button>
+    <web src="www.example.com" id="web" onpagestart="pageStart" onpagefinish="pageFinish" on:error="pageError"></web>
+</div>
+```
+
+```
+<!-- xxx.js -->
+export default {
+    reloadWeb() {
+        this.$element('web').reload()
+    },
+
+    pageStart: function(e) {
+        console.info('web pageStart: ' + e.url)
+    },
+
+    pageFinish: function(e) {
+        console.info('web pageFinish: ' + e.url)
+    },
+
+    pageError: function(e) {
+        console.info('web pageError url: ' + e.url)
+        console.info('web pageError errorCode: ' + e.errorCode)
+        console.info('web pageError description: ' + e.description)
+    }
+}
+```
\ No newline at end of file
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 1179c54560..f61a6db107 100644
--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
@@ -48,6 +48,7 @@
                 - [SwipeGesture](ts-basic-gestures-swipegesture.md)
             - [组合手势](ts-combined-gestures.md)
     - 基础组件
+        - [Web](ts-basic-components-web.md)
         - [Blank](ts-basic-components-blank.md)
         - [Button](ts-basic-components-button.md)
         - [DataPanel](ts-basic-components-datapanel.md)
@@ -94,7 +95,6 @@
         - [TabContent](ts-container-tabcontent.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 100%
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
-- 
GitLab