Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
79e31b12
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看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
79e31b12
编写于
4月 25, 2022
作者:
葛
葛亚芳
提交者:
Gitee
4月 25, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/quick-start/start-with-ets-low-code.md.
Signed-off-by:
N
@ge-yafang
<
geyafang@huawei.com
>
上级
dbaffdc5
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
10 addition
and
1 deletion
+10
-1
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
+10
-1
未找到文件。
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
浏览文件 @
79e31b12
...
...
@@ -23,9 +23,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
## 创建新工程支持低代码开发
1.
打开
**DevEco Studio**
,点击
**File**
>
**New**
>
**Create Project**
,选择模板“
**Empty Ability**
”,点击
**Next**
进行下一步配置。
!
[
zh-cn_image_0000001233528152
](
figures/zh-cn_image_0000001233528152.png
)
2.
进入配置工程界面,打开“
**Enable Super Visual**
”开关,
**UI Syntax**
选择“
**eTS**
”,其他参数保持默认设置即可。
!
[
zh-cn_image_0000001277728569
](
figures/zh-cn_image_0000001277728569.png
)
3.
点击
**Finish**
,工具会自动生成示例代码和相关资源,等待工程创建完成。
...
...
@@ -69,6 +71,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
!
[
zh-cn_image_0000001235732402
](
figures/zh-cn_image_0000001233208988.gif
)
5.
**在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。**
第一个页面效果如下图所示:
!
[
zh-cn_image_0000001235892798
](
figures/zh-cn_image_0000001233049004.png
)
...
...
@@ -103,6 +106,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
}
```
-
选中Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标!
[
zh-cn_image_0000001277488985
](
figures/zh-cn_image_0000001277488985.png
)
(Feature),设置Text组件的Content属性为“this.message”(即“Hi there”);设置Text组件的FontSize样式为30fp;设置组件的TextAlign样式为center。再选中画布上的Text组件,拖动放大。操作如下所示:
![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif)
5.
**添加按钮。**
...
...
@@ -143,6 +147,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
```
-
“
**index.visual**
”: 打开index.visual,选中画布上的Button组件。点击右侧属性样式栏中的事件图标!
[
zh-cn_image_0000001233209020
](
figures/zh-cn_image_0000001233209020.png
)
(Events),鼠标点击OnClick事件的输入框,选择this.onclick,如下所示:
![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png)
2.
**第二个页面返回到第一个页面。**
...
...
@@ -172,9 +177,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
}
```
-
“
**second.visual**
”: 打开second.visual,选中画布上的Button组件。点击右侧属性样式栏中的事件图标!
[
zh-cn_image_0000001233368900
](
figures/zh-cn_image_0000001233368900.png
)
(Events),鼠标点击OnClick事件的输入框,选择this.back,如下所示:
![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
)
**按钮进行刷新。**
效果如下图所示:
!
[
zh-cn_image_0000001233528192
](
figures/zh-cn_image_0000001233528192.png
)
...
...
@@ -183,9 +190,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
1.
将搭载OpenHarmony标准系统的开发板与电脑连接。
2.
点击
**File**
>
**Project Structure**
>
**Project**
>
**Signing Configs**
界面勾选“
**Automatically generate signing**
”,等待自动签名完成即可,点击“
**OK**
”。如下图所示:
!
[
zh-cn_image_0000001277728613
](
figures/zh-cn_image_0000001277728613.png
)
3.
在编辑窗口右上角的工具栏,点击!
[
zh-cn_image_0000001277809373
](
figures/zh-cn_image_0000001277809373.png
)
按钮运行。效果如下图所示:
!
[
zh-cn_image_0000001233209024
](
figures/zh-cn_image_0000001233209024.png
)
恭喜您已经使用eTS语言开发(低代码方式)完成了第一个OpenHarmony应用,快来
[
探索更多的OpenHarmony功能
](
../application-dev-guide.md
)
吧。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录