小白福利！教你用低代码实现一个简单的 HarmonyOS 页面跳转功能

原文：https://mp.weixin.qq.com/s/6_g5qwAe-1w-MvJQymcvYQ，点击链接查看更多技术内容。

本期我们给大家带来的是开发者贾佳豪的分享，希望能给你的 HarmonyOS 开发之旅带来启发~

一、介绍

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.com/cn/develop/deveco-studio#download_beta_openharmony

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 最终效果

四、结语

以上就是使用低代码实现一个简单的页面跳转功能的全部介绍啦，感兴趣的小伙伴赶紧动手尝试一下吧，期待大家用低代码开发出更多精彩、有趣的应用。