共计 3610 个字符，预计需要花费 10 分钟才能阅读完成。
一、介绍
HUAWEI DevEco Studio（后文简称：IDE）自 2020 年 9 月首次公布以来，经 10 次迭代降级，一直为 HarmonyOS 利用开发加强能力。3 月 31 日，IDE 再度降级到 DevEco Studio 3.0 Beta3 版本。新版本具备一站式信息获取、多设施工程模板、实时动静双向预览、全新构建工具一键编译打包、一键式自动化签名、低代码开发等能力。
其中低代码开发是 IDE 为开发者提供的可视化界面开发方式，具备丰盛的 UI 界面编辑性能。开发者可自在拖拽组件、疾速预览界面成果、所见即所得、无效升高工夫老本和晋升构建 UI 界面的效率。
接下来就由开发者贾佳豪为大家展现如何用低代码实现一个简略的页面跳转性能，让你一看就会，一做就对！
二、成果预览
首先咱们先看一下效果图。如图 1 所示，效果图次要由两个页面组成，点击第一个页面的“一键入门”按钮即可跳转到第二个页面，再点击第二个页面的“返回”按钮即可返回到第一个页面。
$$
图 1 效果图
$$
上面让咱们追随贾佳豪的开发领导，一起入手尝试一下吧。
三、开发过程
1. 装置 DevEco Studio
依据 HarmonyOS 利用开发官网文档装置 DevEco Studio 3.0 Beta3 for OpenHarmony。
DevEco Studio 3.0 Beta3 for OpenHarmony 地址：
https://developer.harmonyos.c…
2. 创立新工程
工具下载实现后，咱们就能够开始创立反对低代码开发的新工程了，操作如下：
(1) 关上 DevEco Studio 创立一个新工程 (File > New >Create Project)。
(2) 如图 2 所示，在工程模板抉择 Empty Ability，而后点击 Next 进行下一步。
(3) 填写工程配置信息，关上 Enable Super Visual 开关，UI Syntax 抉择 JS，其余配置放弃默认即可。
(4) 最初在工程配置信息界面，点 Finish，工程的创立就实现啦。
$$
图 2 创立新工程
$$
新工程创立实现后，咱们再理解一下低代码工程目录中的 index.js 和 index.visual 文件。
$$
图 3 低代码工程目录
$$
index.js 是低代码页面的逻辑形容文件（如红框所示），它定义了页面里所用到的所有的逻辑关系，比方数据、事件等，后文预览中实现页面跳转就是在此文件中定义。
注：应用低代码页面开发时，其关联 js 文件的同级目录中不能蕴含 hml 和 css 页面，否则呈现编译谬误。
index.visual 是存储低代码页面的数据模型文件（如蓝框所示），双击该文件即可关上低代码页面，进行可视化开发设计。
如果创立了多个低代码页面，则 pages 目录下会生成多个页面文件夹及对应的 js 或 visual 文件（如黄框所示），后文的“开发第二个页面”局部将会具体介绍。
理解完 index.js 和 index.visual 文件，上面咱们正式进入低代码开发。
3. 开发第一个页面
咱们先开发第一个页面，如图 4 所示，第一个页面是在容器中展现“低代码入门”文本和“一键入门”按钮，它们别离能够通过 Div、Text、和 Button 组件来实现。上面一起追随开发步骤实现第一个页面的开发。
$$
图 4 第一个页面
$$
步骤 1：删除画布原有模板组件。
如图 5 所示，新工程创立实现后，第一个页面会默认显示文本（Hello World），它是由容器组件和文本组件形成的，能够间接应用，但为了让大家清晰地看到每个组件的应用办法，咱们关上 index.visual 文件，选中画布中的组件，单击鼠标右键，抉择 Delete 删除画布原有模板组件，从零开始。
$$
图 5 删除画布原有模板组件
$$
步骤 2：增加 Div 容器组件：
删除画布原有模板组件后，咱们从新给画布增加 Div 容器，并设置 Div 容器的款式和属性。
(1) 如图 6 所示，选中 UI Control 中的 Div 组件，将其拖至画布。
(2) 点击右侧属性款式栏中的款式图标 (General)，设置 Div 组件的高度 Height 为 100%，使其占满屏幕。
(3) 点击右侧属性款式栏中的款式图标 (Flex)，设置 Div 组件的 FlexDirection 款式为 column，使 Div 的主轴垂直；设置 Div 组件的 JustifyContent 款式为 center，使得其子组件在主轴上居中显示；设置 Div 组件的 Alignltems 款式为 center，使得其子组件在穿插轴上居中显示。
$$
图 6 设置容器款式和属性
$$
步骤 3：增加 Text 文本组件：
接下来咱们在 Div 容器中退出 text 组件，以便增加文本。
(1) 如图 7 所示，选中 UI Control 中的 Text 组件，将其拖至 Div 组件的地方区域。
(2) 点击右侧属性款式栏中的属性图标（Properties），设置 Text 组件的 Content 属性为“低代码入门”。
(3) 点击右侧属性款式栏中的款式图标（Feature），设置组件的 FontSize 款式为 60px, 使得其文字放大；设置组件的 TextAlign 款式为 center，使得组件文字居中显示。
(4) 再选中画布上的 Text 组件，拖动放大。
$$
图 7 增加文本
$$
步骤 4：增加 Button 按钮组件：
接下来咱们在文本上面增加 Button 组件，为页面减少一个按钮。
(1) 如图 8 所示，选中 UI Control 中的 Button 组件，将其拖至 Text 组件上面。
(2) 点击右侧属性款式栏中的属性图标（Properties），设 Button 组件的 Value 属性为 ” 一键入门 ”。
(3) 点击右侧属性款式栏中的款式图标（Feature），设置组件的 FontSize 款式为 40px，使得其文字放大；再选中画布上的 Button 组件，拖动放大。
$$
图 8 增加按钮
$$
步骤 5：查看预览成果：
如图 9 所示，所有步骤实现后，关上预览器查看成果。
$$
图 9 第一个预览效果图
$$
简略几步就实现第一个页面开发，是不是超级简略？接下来让咱们一起开发第二个页面。
4. 开发第二个页面
在开发第二个页面之前须要先创立第二个页面的 second.js 和 second.visual 文件，用于存储 第二个页面的逻辑和数据。如图 10 所示，右键点击 pages 文件夹，抉择 New >Visual，命名为 second，单击 Finish，就实现了第二个页面的 second.js 和 second.visual 文件的创立。
$$
图 10 第二个页面的 second.js 和 second.visual 文件
$$
因为第二个页面的第一个页面的开发步骤截然不同，故此处不再赘述，间接为大家展现第二个页面成果（如图 11 所示）：
$$
图 11 第二个页面效果图
$$
两个页面实现之后，那么如何实现两个页面之间的跳转呢？请持续往下看。
5. 第一个页面的跳转
在第一个页面中，将跳转按钮绑定 onclick 办法，点击按钮时，即可跳转到第二页。操作如下：
(1) 首先须要在 index.viusal 中，给画布上的 Button 组件抉择 onclick 办法。操作如图 12 所示，关上 index.visual，选中画布上的 Button 组件。点击右侧属性款式栏中的事件图标（Events），鼠标点击 Click 事件的输入框，抉择 onclick 办法。
$$
图 12 onclick 设置
$$
(2) 而后在 index.js 当中绑定 onclick 办法，并在 onclick 办法中写入 router 模块，index.js 代码如下：
import router from '@system.router';
export default {
// 绑定 onclick 办法
onclick () {
// 写入 router 模块
router.push({uri: 'pages/second/second', // 指定要跳转的页面})
}
}实现上述两步后，即可实现从第一个页面跳转到第二个页面。
6. 第二个页面的返回
接下来咱们看下如何从第二个页面返回到第一个页面，和上一个跳转相似，在第二个页面中，返回按钮绑定 back 办法，点击按钮时，即可返回到第一页。操作如下：
(1) 如图 13 所示，首先关上 second.visual，选中画布上的 Button 组件，点击右侧属性款式栏中的事件图标（Events），点击 Click 事件的输入框，抉择 back。
$$
图 13 back 设置
$$
(2) 而后在 second.js 中绑定 back 办法，并在 back 办法中写入 router 模块，second.js 代码如下：
import router from '@system.router';
export default {
// 绑定 back 办法
back(){
// 写入 router 模块
router.back()}
}7. 查看最终成果
至此，咱们的两个页面曾经开发好，页面跳转也曾经设置好，接下来就能够点击预览器查看最终成果啦（如图 14 所示）。
$$
图 14 最终成果
$$
四、结语
以上就是应用低代码实现一个简略的页面跳转性能的全副介绍啦，感兴趣的小伙伴连忙入手尝试一下吧，期待大家用低代码开发出更多精彩、乏味的利用。
