未验证 提交 f4f450f8 编写于 作者: O openharmony_ci 提交者: Gitee

!9431 VOD修改+名称调整

Merge pull request !9431 from LiAn/master
# 开发参考 # 开发参考
- [组件参考(基于TS扩展的声明式开发范式)](arkui-ts/Readme-CN.md) - [组件参考(基于eTS的声明式开发范式)](arkui-ts/Readme-CN.md)
- [组件参考(基于JS扩展的类Web开发范式)](arkui-js/Readme-CN.md) - [组件参考(兼容JS的类Web开发范式)](arkui-js/Readme-CN.md)
- [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md) - [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md)
- [接口参考(JS及TS API)](apis/Readme-CN.md) - [接口参考(JS及TS API)](apis/Readme-CN.md)
- 接口参考(Native API) - 接口参考(Native API)
......
# 基于JS扩展的类Web开发范式 # 兼容JS的类Web开发范式
- 组件通用信息 - 组件通用信息
- [通用属性](js-components-common-attributes.md) - [通用属性](js-components-common-attributes.md)
......
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
</option> </option>
</select> </select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange" <picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext" "></picker> oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true" <picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker> onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
......
# 基于TS扩展的声明式开发范式 # 基于eTS的声明式开发范式
- 组件通用信息 - 组件通用信息
- 通用事件 - 通用事件
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。 组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。
> **说明:** > **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
## 事件 ## 事件
| 名称 | 支持冒泡 | 功能描述 | | 名称 | 支持冒泡 | 功能描述 |
| -------- | -------- | -------- | | ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 | | onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型描述见[Area](../../ui/ts-types.md#area8)。 |
## 示例 ## 示例
......
# UI开发 # UI开发
- [方舟开发框架(ArkUI)概述](arkui-overview.md) - [方舟开发框架(ArkUI)概述](arkui-overview.md)
- 基于TS扩展的声明式开发范式 - UI开发(基于eTS的声明式开发范式)
- [概述](ui-ts-overview.md) - [概述](ui-ts-overview.md)
- 框架说明 - 框架说明
- 文件组织 - 文件组织
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
- [页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md) - [页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md)
- [性能提升的推荐方法](ts-performance-improvement-recommendation.md) - [性能提升的推荐方法](ts-performance-improvement-recommendation.md)
- 基于JS扩展的类Web开发范式 - UI开发(兼容JS的类Web开发范式)
- [概述](ui-js-overview.md) - [概述](ui-js-overview.md)
- 框架说明 - 框架说明
- [文件组织](js-framework-file.md) - [文件组织](js-framework-file.md)
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
- 平台API通道:方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。 - 平台API通道:方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。
- 两种开发范式:方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于TS扩展的声明式开发范式(简称“声明式开发范式”)和基于JS扩展的类Web开发范式(简称“类Web开发范式”)。 - 两种开发范式:方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于eTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。
| 开发范式名称 | 简介 | 适用场景 | 适用人群 | | 开发范式名称 | 简介 | 适用场景 | 适用人群 |
| -------- | ---------------------------------------- | ---------------- | ------------------- | | -------- | ---------------------------------------- | ---------------- | ------------------- |
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
应用代码文件可通过如下方式访问: 应用代码文件可通过如下方式访问:
- 使用相对路径引用代码文件,比如:上一级目录:../common/utils/utils.ets,当前目录:./common/utils/utils.ets。 - 使用相对路径引用代码文件,比如:上一级目录:../common/utils/utils,当前目录:./common/utils/utils。
- 使用当前模块根路径引用代码文件,比如:common/utils/utils.ets - 使用当前模块根路径引用代码文件,比如:common/utils/utils。
- 公共代码文件推荐放在**common**目录下。 - 公共代码文件推荐放在**common**目录下。
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
```ts ```ts
// xxx.ets // xxx.ets
import { FoodData, FoodList } from "../common/utils/utils.ets"; import { FoodData, FoodList } from "../common/utils/utils";
@Entry @Entry
@Component @Component
......
...@@ -9,20 +9,21 @@ tabs是一种常见的界面导航结构。通过页签容器,用户可以快 ...@@ -9,20 +9,21 @@ tabs是一种常见的界面导航结构。通过页签容器,用户可以快
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" > <div class="container">
<tabs> <tab-bar> <tabs>
<text>item1</text> <tab-bar>
<text>item2</text> <text>item1</text>
</tab-bar> <text>item2</text>
<tab-content> </tab-bar>
<div class="text"> <tab-content>
<text>content1</text> <div class="text">
</div> <text>content1</text>
<div class="text"> </div>
<text>content2</text> <div class="text">
</div> <text>content2</text>
</tab-content> </div>
</tabs> </tab-content>
</tabs>
</div> </div>
``` ```
......
# 概述 # 概述
基于JS扩展的类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 兼容JS的类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
请参考[基于JS扩展的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档,全面地了解组件,更好地开发应用。 请参考[兼容JS的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档,全面地了解组件,更好地开发应用。
## 整体架构 ## 整体架构
使用基于JS扩展的类Web开发范式的方舟开发框架,包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。 使用兼容JS的类Web开发范式的方舟开发框架,包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
## 相关实例 ## 相关实例
基于JS扩展的类Web开发范式的方舟开发框架,有以下相关实例可供参考: 兼容JS的类Web开发范式的方舟开发框架,有以下相关实例可供参考:
- [`AtomicLayout`:原子布局(JS)(API8)](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/AtomicLayout) - [`AtomicLayout`:原子布局(JS)(API8)](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/AtomicLayout)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册