一、介绍

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 最终成果$$

四、结语

以上就是应用低代码实现一个简略的页面跳转性能的全副介绍啦，感兴趣的小伙伴连忙入手尝试一下吧，期待大家用低代码开发出更多精彩、乏味的利用。