Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
9f1c6393
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
9f1c6393
编写于
5月 17, 2022
作者:
O
openharmony_ci
提交者:
Gitee
5月 17, 2022
浏览文件
操作
浏览文件
下载
差异文件
!4028 快速入门DX意见修改:需同步翻译
Merge pull request !4028 from 葛亚芳/master
上级
7bfbaef3
e3734ecf
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
51 addition
and
49 deletion
+51
-49
zh-cn/application-dev/quick-start/start-overview.md
zh-cn/application-dev/quick-start/start-overview.md
+3
-2
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
+13
-13
zh-cn/application-dev/quick-start/start-with-ets.md
zh-cn/application-dev/quick-start/start-with-ets.md
+11
-10
zh-cn/application-dev/quick-start/start-with-js-low-code.md
zh-cn/application-dev/quick-start/start-with-js-low-code.md
+13
-13
zh-cn/application-dev/quick-start/start-with-js.md
zh-cn/application-dev/quick-start/start-with-js.md
+11
-11
未找到文件。
zh-cn/application-dev/quick-start/start-overview.md
浏览文件 @
9f1c6393
...
@@ -23,11 +23,12 @@ OpenHarmony提供了一套UI开发框架,即方舟开发框架(ArkUI框架
...
@@ -23,11 +23,12 @@ OpenHarmony提供了一套UI开发框架,即方舟开发框架(ArkUI框架
| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
| 声明式开发范式 | 扩展的TS语言(eTS) | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
| 声明式开发范式 | 扩展的TS语言(eTS) | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
对于
DevEco Studio V2.2 Beta1及更高版本,在使用JS语言开发时,除传统代码方式外,还支持使用低代码方式
。
对于
JS语言开发时,低代码方式在DevEco Studio V2.2 Beta1及更高版本中支持
。
对于eTS语言开发,
除传统代码方式外,低代码方式则
在DevEco Studio V3.0 Beta3及更高版本中支持。
对于eTS语言开发,
低代码方式
在DevEco Studio V3.0 Beta3及更高版本中支持。
OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,遵循JS开发规范,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,遵循JS开发规范,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
更多UI框架的开发内容及指导,请参见
[
UI开发
](
../ui/arkui-overview.md
)
。
### Ability
### Ability
...
...
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
浏览文件 @
9f1c6393
...
@@ -50,43 +50,43 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -50,43 +50,43 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
第一个页面内有一个容器、文本和一个按钮,通过Column、Text和Button组件来实现。其中,Column为沿垂直方向布局的容器组件,具体使用请见
[
Column
](
../reference/arkui-ts/ts-container-column.md
)
。
第一个页面内有一个容器、文本和一个按钮,通过Column、Text和Button组件来实现。其中,Column为沿垂直方向布局的容器组件,具体使用请见
[
Column
](
../reference/arkui-ts/ts-container-column.md
)
。
1.
**删除画布原有模板组件。**
<a
name=
"delete_origin_content"
></a>
1.
删除画布原有模板组件。
<a
name=
"delete_origin_content"
></a>
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
!
[
zh-cn_image_0000001233208980
](
figures/zh-cn_image_0000001233208980.gif
)
!
[
zh-cn_image_0000001233208980
](
figures/zh-cn_image_0000001233208980.gif
)
2.
**添加容器,设置Column容器的样式和属性。**
<a
name=
"add_container"
></a>
2.
添加容器,设置Column容器的样式和属性。
<a
name=
"add_container"
></a>
选中UI Control中的Column组件,将其拖至画布。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001233048996
](
figures/zh-cn_image_0000001233048996.png
)
(General),设置Column组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001233368860
](
figures/zh-cn_image_0000001233368860.png
)
(Feature),设置Column组件的AlignItems样式为center,使得其子组件在水平轴上居中显示。操作如下所示:
选中UI Control中的Column组件,将其拖至画布。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001233048996
](
figures/zh-cn_image_0000001233048996.png
)
(General),设置Column组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001233368860
](
figures/zh-cn_image_0000001233368860.png
)
(Feature),设置Column组件的AlignItems样式为center,使得其子组件在水平轴上居中显示。操作如下所示:
!
[
zh-cn_image_0000001277488977
](
figures/zh-cn_image_0000001277488977.gif
)
!
[
zh-cn_image_0000001277488977
](
figures/zh-cn_image_0000001277488977.gif
)
3.
**添加文本。**
3.
添加文本。
选中UI Control中的Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277608813
](
figures/zh-cn_image_0000001277608813.png
)
(Feature),设置Text组件的Content属性为“this.message”(即“Hello World”);设置组件的FontSize样式为30fp,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示:
选中UI Control中的Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277608813
](
figures/zh-cn_image_0000001277608813.png
)
(Feature),设置Text组件的Content属性为“this.message”(即“Hello World”);设置组件的FontSize样式为30fp,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示:
!
[
zh-cn_image_0000001235731706
](
figures/zh-cn_image_0000001233528156.gif
)
!
[
zh-cn_image_0000001235731706
](
figures/zh-cn_image_0000001233528156.gif
)
4.
**添加按钮。**
4.
添加按钮。
选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277728577
](
figures/zh-cn_image_0000001277728577.png
)
(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277809337
](
figures/zh-cn_image_0000001277809337.png
)
(Feature),设置Button组件的Label属性为“Next”;设置Button组件的FontSize样式为25fp,使得其文字放大。操作如下所示:
选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277728577
](
figures/zh-cn_image_0000001277728577.png
)
(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277809337
](
figures/zh-cn_image_0000001277809337.png
)
(Feature),设置Button组件的Label属性为“Next”;设置Button组件的FontSize样式为25fp,使得其文字放大。操作如下所示:
!
[
zh-cn_image_0000001235732402
](
figures/zh-cn_image_0000001233208988.gif
)
!
[
zh-cn_image_0000001235732402
](
figures/zh-cn_image_0000001233208988.gif
)
5.
**在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。**
第一个页面效果如下图所示:
5.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。
第一个页面效果如下图所示:
!
[
zh-cn_image_0000001235892798
](
figures/zh-cn_image_0000001233049004.png
)
!
[
zh-cn_image_0000001235892798
](
figures/zh-cn_image_0000001233049004.png
)
## 构建第二个页面
## 构建第二个页面
1.
**创建第二个页面。**
1.
创建第二个页面。
在“
**Project**
”窗口,打开“
**entry > src > main > ets > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Visual**
”,命名为“
**second**
”,单击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
在“
**Project**
”窗口,打开“
**entry > src > main > ets > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Visual**
”,命名为“
**second**
”,单击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
!
[
zh-cn_image_0000001233368868
](
figures/zh-cn_image_0000001233368868.png
)
!
[
zh-cn_image_0000001233368868
](
figures/zh-cn_image_0000001233368868.png
)
2.
**[删除画布原有模板组件。](#delete_origin_content)**
2.
[
删除画布原有模板组件。
](
#delete_origin_content
)
3.
**[添加容器,设置Column容器的样式和属性。](#add_container)**
3.
[
添加容器,设置Column容器的样式和属性。
](
#add_container
)
4.
**添加文本。**
4.
添加文本。
-
在second.ets文件中,将本页面的message文本内容设置为“Hi there”,示例如下:
-
在second.ets文件中,将本页面的message文本内容设置为“Hi there”,示例如下:
...
@@ -109,7 +109,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -109,7 +109,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif)
![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif)
5.
**添加按钮。**
5.
添加按钮。
选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001233528160
](
figures/zh-cn_image_0000001233528160.png
)
(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277728597
](
figures/zh-cn_image_0000001277728597.png
)
(Feature),设置Button组件的Value属性为“Back”;设置组件的FontSize样式为25fp,使得其文字放大。操作如下所示:
选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001233528160
](
figures/zh-cn_image_0000001233528160.png
)
(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277728597
](
figures/zh-cn_image_0000001277728597.png
)
(Feature),设置Button组件的Value属性为“Back”;设置组件的FontSize样式为25fp,使得其文字放大。操作如下所示:
!
[
zh-cn_image_0000001280383937
](
figures/zh-cn_image_0000001277809361.gif
)
!
[
zh-cn_image_0000001280383937
](
figures/zh-cn_image_0000001277809361.gif
)
...
@@ -119,7 +119,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -119,7 +119,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
**第一个页面跳转到第二个页面。**
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
-
“
**index.ets**
”示例如下:
-
“
**index.ets**
”示例如下:
...
@@ -150,7 +150,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -150,7 +150,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png)
![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png)
2.
**第二个页面返回到第一个页面。**
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。需同时处理ets文件及visual文件。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。需同时处理ets文件及visual文件。
-
“
**second.ets**
”示例如下:
-
“
**second.ets**
”示例如下:
...
@@ -180,7 +180,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -180,7 +180,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png)
![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png)
3.
**打开index.visual或index.ets文件,点击预览器中的**
!
[
zh-cn_image_0000001277608849
](
figures/zh-cn_image_0000001277608849.png
)
**按钮进行刷新。**
效果如下图所示:
3.
打开index.visual或index.ets文件,点击预览器中的 !
[
zh-cn_image_0000001277608849
](
figures/zh-cn_image_0000001277608849.png
)
按钮进行刷新。
效果如下图所示:
!
[
zh-cn_image_0000001233528192
](
figures/zh-cn_image_0000001233528192.png
)
!
[
zh-cn_image_0000001233528192
](
figures/zh-cn_image_0000001233528192.png
)
...
...
zh-cn/application-dev/quick-start/start-with-ets.md
浏览文件 @
9f1c6393
...
@@ -25,9 +25,10 @@
...
@@ -25,9 +25,10 @@
-
**src > main > ets**
:用于存放ets源码。
-
**src > main > ets**
:用于存放ets源码。
-
**src > main > ets > MainAbility**
:应用/服务的入口。
-
**src > main > ets > MainAbility**
:应用/服务的入口。
-
**src > main > ets > MainAbility > pages**
:MainAbility包含的页面。
-
**src > main > ets > MainAbility > pages**
:MainAbility包含的页面。
-
**src > main > ets > MainAbility > pages > index.ets**
:pages列表中的第一个页面,即应用的首页入口。
-
**src > main > ets > MainAbility > app.ets**
:承载Ability生命周期。
-
**src > main > ets > MainAbility > app.ets**
:承载Ability生命周期。
-
**src > main > resources**
:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
-
**src > main > resources**
:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
-
**src > main > config.json**
:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
-
**src > main > config.json**
:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
具体的配置文件说明,详见
[
应用包结构配置文件的说明
](
package-structure.md
)
。
-
**build-profile.json5**
:当前的模块信息 、编译信息配置项,包括 buildOption target配置等。
-
**build-profile.json5**
:当前的模块信息 、编译信息配置项,包括 buildOption target配置等。
-
**hvigorfile.js**
:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
-
**hvigorfile.js**
:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
...
@@ -38,8 +39,8 @@
...
@@ -38,8 +39,8 @@
## 构建第一个页面
## 构建第一个页面
1.
**使用文本组件。**
1.
使用文本组件。
工程同步完成后,在“
**Project**
”窗口,点击“
**entry > src > main > ets > MainAbility > pages**
”,打开“
**index.ets**
”文件,可以看到页面由Text组件组成。“
**index.ets**
”文件的示例如下:
工程同步完成后,在“
**Project**
”窗口,点击“
**entry > src > main > ets > MainAbility > pages**
”,打开“
**index.ets**
”文件,可以看到页面由Text组件组成。“
**index.ets**
”文件的示例如下:
```
```
...
@@ -62,7 +63,7 @@
...
@@ -62,7 +63,7 @@
}
}
```
```
2.
**添加按钮。**
2.
添加按钮。
在默认页面基础上,我们添加一个Button组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“
**index.ets**
”文件的示例如下:
在默认页面基础上,我们添加一个Button组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“
**index.ets**
”文件的示例如下:
...
@@ -99,19 +100,19 @@
...
@@ -99,19 +100,19 @@
}
}
```
```
3.
**在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。**
第一个页面效果如下图所示:
3.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。
第一个页面效果如下图所示:
!
[
zh-cn_image_0000001216239356
](
figures/zh-cn_image_0000001216239356.png
)
!
[
zh-cn_image_0000001216239356
](
figures/zh-cn_image_0000001216239356.png
)
## 构建第二个页面
## 构建第二个页面
1.
**创建第二个页面。**
1.
创建第二个页面。
在“
**Project**
”窗口,打开“
**entry > src > main > ets > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Page**
”,命名为“
**second**
”,点击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
在“
**Project**
”窗口,打开“
**entry > src > main > ets > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Page**
”,命名为“
**second**
”,点击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
!
[
zh-cn_image_0000001223397122
](
figures/zh-cn_image_0000001223397122.png
)
!
[
zh-cn_image_0000001223397122
](
figures/zh-cn_image_0000001223397122.png
)
2.
**添加文本及按钮。**
2.
添加文本及按钮。
参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“
**second.ets**
”文件的示例如下:
参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“
**second.ets**
”文件的示例如下:
...
@@ -152,7 +153,7 @@
...
@@ -152,7 +153,7 @@
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
**第一个页面跳转到第二个页面。**
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“
**index.ets**
”文件的示例如下:
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“
**index.ets**
”文件的示例如下:
...
@@ -195,7 +196,7 @@
...
@@ -195,7 +196,7 @@
}
}
```
```
2.
**第二个页面返回到第一个页面。**
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“
**second.ets**
”文件的示例如下:
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“
**second.ets**
”文件的示例如下:
...
@@ -237,7 +238,7 @@
...
@@ -237,7 +238,7 @@
}
}
```
```
3.
**打开index.ets文件,点击预览器中的**
!
[
zh-cn_image_0000001262219043
](
figures/zh-cn_image_0000001262219043.png
)
**按钮进行刷新。**
效果如下图所示:
3.
打开index.ets文件,点击预览器中的 !
[
zh-cn_image_0000001262219043
](
figures/zh-cn_image_0000001262219043.png
)
按钮进行刷新。
效果如下图所示:
!
[
zh-cn_image_0000001260684127
](
figures/zh-cn_image_0000001260684127.png
)
!
[
zh-cn_image_0000001260684127
](
figures/zh-cn_image_0000001260684127.png
)
...
...
zh-cn/application-dev/quick-start/start-with-js-low-code.md
浏览文件 @
9f1c6393
...
@@ -54,48 +54,48 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -54,48 +54,48 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
第一个页面内有一个容器、文本和一个按钮,通过Div、Text和Button组件来实现。
第一个页面内有一个容器、文本和一个按钮,通过Div、Text和Button组件来实现。
1.
**删除画布原有模板组件。**
<a
name=
delete_origin_content
></a>
1.
删除画布原有模板组件。
<a
name=
delete_origin_content
></a>
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
!
[
zh-cn_image_0000001216600980
](
figures/zh-cn_image_0000001216600980.gif
)
!
[
zh-cn_image_0000001216600980
](
figures/zh-cn_image_0000001216600980.gif
)
2.
**添加容器,设置Div容器的样式和属性。**
<a
name =
add_container
></a>
2.
添加容器,设置Div容器的样式和属性。
<a
name =
add_container
></a>
选中UI Control中的Div组件,将其拖至画布。点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001260226691
](
figures/zh-cn_image_0000001260226691.png
)
(General),设置Div组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001215226858
](
figures/zh-cn_image_0000001215226858.png
)
(Flex),设置Div组件的FlexDirection样式为column,使Div的主轴垂直;设置Div组件的JustifyContent样式为center,使得其子组件在主轴上居中显示;设置Div组件的AlignItems样式为center,使得其子组件在交叉轴上居中显示。操作如下所示:
选中UI Control中的Div组件,将其拖至画布。点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001260226691
](
figures/zh-cn_image_0000001260226691.png
)
(General),设置Div组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001215226858
](
figures/zh-cn_image_0000001215226858.png
)
(Flex),设置Div组件的FlexDirection样式为column,使Div的主轴垂直;设置Div组件的JustifyContent样式为center,使得其子组件在主轴上居中显示;设置Div组件的AlignItems样式为center,使得其子组件在交叉轴上居中显示。操作如下所示:
!
[
zh-cn_image_0000001216448880
](
figures/zh-cn_image_0000001216448880.gif
)
!
[
zh-cn_image_0000001216448880
](
figures/zh-cn_image_0000001216448880.gif
)
3.
**添加文本。**
3.
添加文本。
选中UI Control中的Text组件,将其拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001215066868
](
figures/zh-cn_image_0000001215066868.png
)
(Properties),设置Text组件的Content属性为“Hello World”;点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001215386842
](
figures/zh-cn_image_0000001215386842.png
)
(Feature),设置组件的FontSize样式为60px,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示:
选中UI Control中的Text组件,将其拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001215066868
](
figures/zh-cn_image_0000001215066868.png
)
(Properties),设置Text组件的Content属性为“Hello World”;点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001215386842
](
figures/zh-cn_image_0000001215386842.png
)
(Feature),设置组件的FontSize样式为60px,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示:
!
[
zh-cn_image_0000001216446670
](
figures/zh-cn_image_0000001216446670.gif
)
!
[
zh-cn_image_0000001216446670
](
figures/zh-cn_image_0000001216446670.gif
)
4.
**添加按钮。**
4.
添加按钮。
选中UI Control中的Button组件,将其拖至Text组件下面。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001260106745
](
figures/zh-cn_image_0000001260106745.png
)
(Properties),设置Button组件的Value属性为“Next”,点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001259866741
](
figures/zh-cn_image_0000001259866741.png
)
(Feature),设置组件的FontSize样式为40px,使得其文字放大;再选中画布上的Button组件,拖动放大。操作如下所示:
选中UI Control中的Button组件,将其拖至Text组件下面。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001260106745
](
figures/zh-cn_image_0000001260106745.png
)
(Properties),设置Button组件的Value属性为“Next”,点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001259866741
](
figures/zh-cn_image_0000001259866741.png
)
(Feature),设置组件的FontSize样式为40px,使得其文字放大;再选中画布上的Button组件,拖动放大。操作如下所示:
!
[
zh-cn_image_0000001260928361
](
figures/zh-cn_image_0000001260928361.gif
)
!
[
zh-cn_image_0000001260928361
](
figures/zh-cn_image_0000001260928361.gif
)
5.
**在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。**
第一个页面效果如下图所示:
5.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。
第一个页面效果如下图所示:
!
[
zh-cn_image_0000001216288558
](
figures/zh-cn_image_0000001216288558.png
)
!
[
zh-cn_image_0000001216288558
](
figures/zh-cn_image_0000001216288558.png
)
## 构建第二个页面
## 构建第二个页面
1.
**创建第二个页面。**
1.
创建第二个页面。
在“
**Project**
”窗口,打开“
**entry > src > main > js > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Visual**
”,命名为“
**second**
”,单击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
在“
**Project**
”窗口,打开“
**entry > src > main > js > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Visual**
”,命名为“
**second**
”,单击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
!
[
zh-cn_image_0000001223882030
](
figures/zh-cn_image_0000001223882030.png
)
!
[
zh-cn_image_0000001223882030
](
figures/zh-cn_image_0000001223882030.png
)
2.
**[删除画布原有模板组件。](#delete_origin_content)**
2.
[
删除画布原有模板组件。
](
#delete_origin_content
)
3.
**[添加容器,设置Div容器的样式和属性。](#add_container)**
3.
[
添加容器,设置Div容器的样式和属性。
](
#add_container
)
4.
**添加文本。**
4.
添加文本。
选中Text组件,拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001260227453
](
figures/zh-cn_image_0000001260227453.png
)
(Properties),设置Text组件的Content属性为“Hi there”;点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001260107497
](
figures/zh-cn_image_0000001260107497.png
)
(Feature),设置组件的FontSize样式为60px;设置组件的TextAlign样式为center。再选中画布上的Text组件,拖动放大。操作如下所示:
选中Text组件,拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001260227453
](
figures/zh-cn_image_0000001260227453.png
)
(Properties),设置Text组件的Content属性为“Hi there”;点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001260107497
](
figures/zh-cn_image_0000001260107497.png
)
(Feature),设置组件的FontSize样式为60px;设置组件的TextAlign样式为center。再选中画布上的Text组件,拖动放大。操作如下所示:
!
[
zh-cn_image_0000001216614132
](
figures/zh-cn_image_0000001216614132.gif
)
!
[
zh-cn_image_0000001216614132
](
figures/zh-cn_image_0000001216614132.gif
)
5.
**添加按钮。**
5.
添加按钮。
选中UI Control中的Button组件,将其拖至Text组件下面。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001215227618
](
figures/zh-cn_image_0000001215227618.png
)
(Properties),设置Button组件的Value属性为“Back”,点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001259987441
](
figures/zh-cn_image_0000001259987441.png
)
(Feature),设置组件的FontSize样式为40px,使得其文字放大;再选中画布上的Button组件,拖动放大。操作如下所示:
选中UI Control中的Button组件,将其拖至Text组件下面。点击右侧属性样式栏中的属性图标!
[
zh-cn_image_0000001215227618
](
figures/zh-cn_image_0000001215227618.png
)
(Properties),设置Button组件的Value属性为“Back”,点击右侧属性样式栏中的样式图标!
[
zh-cn_image_0000001259987441
](
figures/zh-cn_image_0000001259987441.png
)
(Feature),设置组件的FontSize样式为40px,使得其文字放大;再选中画布上的Button组件,拖动放大。操作如下所示:
!
[
zh-cn_image_0000001261017331
](
figures/zh-cn_image_0000001261017331.gif
)
!
[
zh-cn_image_0000001261017331
](
figures/zh-cn_image_0000001261017331.gif
)
...
@@ -105,7 +105,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -105,7 +105,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
页面间的导航可以通过
[
页面路由router
](
../ui/ui-js-building-ui-routes.md
)
来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
页面间的导航可以通过
[
页面路由router
](
../ui/ui-js-building-ui-routes.md
)
来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
**第一个页面跳转到第二个页面。**
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理js文件及visual文件。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理js文件及visual文件。
-
“
**index.js**
”示例如下:
-
“
**index.js**
”示例如下:
...
@@ -125,7 +125,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -125,7 +125,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001223722586](figures/zh-cn_image_0000001223722586.png)
![zh-cn_image_0000001223722586](figures/zh-cn_image_0000001223722586.png)
2.
**第二个页面返回到第一个页面。**
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。
需同时处理js文件及visual文件。
需同时处理js文件及visual文件。
...
@@ -145,7 +145,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -145,7 +145,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png)
![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png)
3.
**打开index.visual或index.js文件,点击预览器中的**
!
[
zh-cn_image_0000001261979271
](
figures/zh-cn_image_0000001261979271.png
)
**按钮进行刷新。**
效果如下图所示:
3.
打开index.visual或index.js文件,点击预览器中的 !
[
zh-cn_image_0000001261979271
](
figures/zh-cn_image_0000001261979271.png
)
按钮进行刷新。
效果如下图所示:
!
[
zh-cn_image_0000001261142799
](
figures/zh-cn_image_0000001261142799.png
)
!
[
zh-cn_image_0000001261142799
](
figures/zh-cn_image_0000001261142799.png
)
...
...
zh-cn/application-dev/quick-start/start-with-js.md
浏览文件 @
9f1c6393
...
@@ -28,7 +28,7 @@
...
@@ -28,7 +28,7 @@
-
**src > main > js > MainAbility > app.js**
:承载Ability生命周期。
-
**src > main > js > MainAbility > app.js**
:承载Ability生命周期。
-
**src > main > resources**
:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
-
**src > main > resources**
:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
-
**src > main > config.json**
:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
-
**src > main > config.json**
:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
具体的配置文件说明,详见
[
应用包结构配置文件的说明
](
package-structure.md
)
。
-
**build-profile.json5**
:当前的模块信息 、编译信息配置项,包括 buildOption target配置等。
-
**build-profile.json5**
:当前的模块信息 、编译信息配置项,包括 buildOption target配置等。
-
**hvigorfile.js**
:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
-
**hvigorfile.js**
:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
...
@@ -39,7 +39,7 @@
...
@@ -39,7 +39,7 @@
## 构建第一个页面
## 构建第一个页面
1.
**使用文本组件。**
1.
使用文本组件。
工程同步完成后,在“
**Project**
”窗口,点击“
**entry > src > main > js > MainAbility > pages> index**
”,打开“
**index.hml**
”文件,设置Text组件内容。“
**index.hml**
”文件的示例如下:
工程同步完成后,在“
**Project**
”窗口,点击“
**entry > src > main > js > MainAbility > pages> index**
”,打开“
**index.hml**
”文件,设置Text组件内容。“
**index.hml**
”文件的示例如下:
...
@@ -51,7 +51,7 @@
...
@@ -51,7 +51,7 @@
</div>
</div>
```
```
2.
**添加按钮,并绑定onclick方法。**
2.
添加按钮,并绑定onclick方法。
在默认页面基础上,我们添加一个button类型的input组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“
**index.hml**
”文件的示例代码如下:
在默认页面基础上,我们添加一个button类型的input组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“
**index.hml**
”文件的示例代码如下:
...
@@ -66,7 +66,7 @@
...
@@ -66,7 +66,7 @@
</div>
</div>
```
```
3.
**设置页面样式。**
3.
设置页面样式。
在“
**Project**
”窗口,点击“
**entry > src > main > js > MainAbility > pages> index**
”,打开“
**index.css**
”文件,可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“
**index.css**
”文件的示例如下:
在“
**Project**
”窗口,点击“
**entry > src > main > js > MainAbility > pages> index**
”,打开“
**index.css**
”文件,可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“
**index.css**
”文件的示例如下:
...
@@ -100,7 +100,7 @@
...
@@ -100,7 +100,7 @@
}
}
```
```
4.
**在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。**
第一个页面效果如下图所示:
4.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。
第一个页面效果如下图所示:
!
[
zh-cn_image_0000001216084724
](
figures/zh-cn_image_0000001216084724.png
)
!
[
zh-cn_image_0000001216084724
](
figures/zh-cn_image_0000001216084724.png
)
...
@@ -108,12 +108,12 @@
...
@@ -108,12 +108,12 @@
## 构建第二个页面
## 构建第二个页面
1.
**创建第二个页面。**
1.
创建第二个页面。
在“
**Project**
”窗口,打开“
**entry > src > main > js > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Page**
”,命名为“
**second**
”,点击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
在“
**Project**
”窗口,打开“
**entry > src > main > js > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Page**
”,命名为“
**second**
”,点击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
!
[
zh-cn_image_0000001223877210
](
figures/zh-cn_image_0000001223877210.png
)
!
[
zh-cn_image_0000001223877210
](
figures/zh-cn_image_0000001223877210.png
)
2.
**添加文本及按钮。**
2.
添加文本及按钮。
参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“
**second.hml**
”文件的示例如下:
参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“
**second.hml**
”文件的示例如下:
...
@@ -128,7 +128,7 @@
...
@@ -128,7 +128,7 @@
</div>
</div>
```
```
3.
**设置页面样式**
。“
**second.css**
”文件的示例如下:
3.
设置页面样式
。“
**second.css**
”文件的示例如下:
```
```
.container {
.container {
...
@@ -165,7 +165,7 @@
...
@@ -165,7 +165,7 @@
页面间的导航可以通过
[
页面路由router
](
../ui/ui-js-building-ui-routes.md
)
来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
页面间的导航可以通过
[
页面路由router
](
../ui/ui-js-building-ui-routes.md
)
来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
**第一个页面跳转到第二个页面。**
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。“
**index.js**
”示例如下:
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。“
**index.js**
”示例如下:
...
@@ -181,7 +181,7 @@
...
@@ -181,7 +181,7 @@
}
}
```
```
2.
**第二个页面返回到第一个页面。**
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。“
**second.js**
”示例如下:
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。“
**second.js**
”示例如下:
...
@@ -195,7 +195,7 @@
...
@@ -195,7 +195,7 @@
}
}
```
```
3.
**打开index文件夹下的任意一个文件,点击预览器中的**
!
[
zh-cn_image_0000001262339067
](
figures/zh-cn_image_0000001262339067.png
)
**按钮进行刷新。**
效果如下图所示:
3.
打开index文件夹下的任意一个文件,点击预览器中的 !
[
zh-cn_image_0000001262339067
](
figures/zh-cn_image_0000001262339067.png
)
按钮进行刷新。
效果如下图所示:
!
[
zh-cn_image_0000001216269940
](
figures/zh-cn_image_0000001216269940.png
)
!
[
zh-cn_image_0000001216269940
](
figures/zh-cn_image_0000001216269940.png
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录