Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
e3734ecf
D
Docs
项目概览
OpenHarmony
/
Docs
接近 2 年 前同步成功
通知
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看板
未验证
提交
e3734ecf
编写于
5月 16, 2022
作者:
葛
葛亚芳
提交者:
Gitee
5月 16, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/quick-start/start-with-js-low-code.md.
Signed-off-by:
N
@ge-yafang
<
geyafang@huawei.com
>
上级
f7496f54
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
13 addition
and
13 deletion
+13
-13
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-low-code.md
浏览文件 @
e3734ecf
...
...
@@ -54,48 +54,48 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
第一个页面内有一个容器、文本和一个按钮,通过Div、Text和Button组件来实现。
1.
**删除画布原有模板组件。**
<a
name=
delete_origin_content
></a>
1.
删除画布原有模板组件。
<a
name=
delete_origin_content
></a>
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
!
[
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,使得其子组件在交叉轴上居中显示。操作如下所示:
!
[
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组件,拖动放大。操作如下所示:
!
[
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组件,拖动放大。操作如下所示:
!
[
zh-cn_image_0000001260928361
](
figures/zh-cn_image_0000001260928361.gif
)
5.
**在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。**
第一个页面效果如下图所示:
5.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。
第一个页面效果如下图所示:
!
[
zh-cn_image_0000001216288558
](
figures/zh-cn_image_0000001216288558.png
)
## 构建第二个页面
1.
**创建第二个页面。**
1.
创建第二个页面。
在“
**Project**
”窗口,打开“
**entry > src > main > js > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Visual**
”,命名为“
**second**
”,单击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
!
[
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组件,拖动放大。操作如下所示:
!
[
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组件,拖动放大。操作如下所示:
!
[
zh-cn_image_0000001261017331
](
figures/zh-cn_image_0000001261017331.gif
)
...
...
@@ -105,7 +105,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
页面间的导航可以通过
[
页面路由router
](
../ui/ui-js-building-ui-routes.md
)
来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
**第一个页面跳转到第二个页面。**
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理js文件及visual文件。
-
“
**index.js**
”示例如下:
...
...
@@ -125,7 +125,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可

2.
**第二个页面返回到第一个页面。**
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。
需同时处理js文件及visual文件。
...
...
@@ -145,7 +145,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可

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
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录