0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何用低代码实现简单的页面跳转功能

科技绿洲 来源:HarmonyOS 作者:HarmonyOS 2022-05-16 09:47 次阅读

一、介绍

HUAWEI DevEco Studio(后文简称:IDE)自2020年9月首次发布以来,经10次迭代升级,不断为HarmonyOS应用开发增强能力。3月31日,IDE再度升级到DevEco Studio 3.0 Beta3版本。新版本具有一站式信息获取、多设备工程模板、实时动态双向预览、全新构建工具一键编译打包、一键式自动化签名、低代码开发等能力。

其中低代码开发是IDE为开发者提供的可视化界面开发方式,具有丰富的UI界面编辑功能。开发者可自由拖拽组件、快速预览界面效果、所见即所得、有效降低时间成本和提升构建UI界面的效率。接下来就由开发者贾佳豪为大家展示如何用低代码实现一个简单的页面跳转功能,让你一看就会,一做就对!

二、效果预览

首先我们先看一下效果图。如图1所示,效果图主要由两个页面组成,点击第一个页面的“一键入门”按钮即可跳转到第二个页面,再点击第二个页面的“返回”按钮即可返回到第一个页面。

pYYBAGKBq8mAauEEAAAzVRSNUDY584.png

图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,工程的创建就完成啦。

poYBAGKBq9aASOd1AAA-_8_aM64186.png

图2 创建新工程

新工程创建完成后,我们再了解一下低代码工程目录中的index.js和index.visual文件。

pYYBAGKBq96AKVGuAACV_t679Rg674.png

图3 低代码工程目录

index.js是低代码页面的逻辑描述文件(如红框所示),它定义了页面里所用到的所有的逻辑关系,比如数据、事件等,后文预览中实现页面跳转就是在此文件中定义。注:使用低代码页面开发时,其关联js文件的同级目录中不能包含hml和css页面,否则出现编译错误。

index.visual是存储低代码页面的数据模型文件(如蓝框所示),双击该文件即可打开低代码页面,进行可视化开发设计。

如果创建了多个低代码页面,则pages目录下会生成多个页面文件夹及对应的js或visual文件(如黄框所示),后文的“开发第二个页面”部分将会具体介绍。

了解完index.js和index.visual文件,下面我们正式进入低代码开发。

3. 开发第一个页面

我们先开发第一个页面,如图4所示,第一个页面是在容器中展示“低代码入门”文本和“一键入门”按钮,它们分别可以通过Div、Text、和Button组件来实现。下面一起跟随开发步骤完成第一个页面的开发。

poYBAGKBq-aAcowmAAA51WLiGwI586.png

图4 第一个页面

步骤1:删除画布原有模板组件。

如图5所示,新工程创建完成后,第一个页面会默认显示文本(Hello World) ,它是由容器组件和文本组件构成的,可以直接使用,但为了让大家清晰地看到每个组件的使用方法,我们打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件,从零开始。

poYBAGKBq-6Ad85xAACTeHSlhmM316.png

图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,使得其子组件在交叉轴上居中显示。

poYBAGKBrACAfy9tAACL0iu8tHk764.png

图6 设置容器样式和属性

步骤3:添加Text文本组件:

接下来我们在Div容器中加入text组件,以便添加文本。

(1) 如图7所示,选中UI Control中的Text组件,将其拖至Div组件的中央区域。

(2) 点击右侧属性样式栏中的属性图标(Properties),设置Text组件的Content属性为“低代码入门” 。

(3) 点击右侧属性样式栏中的样式图标( Feature),设置组件的FontSize样式为60px, 使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。

(4) 再选中画布上的Text组件,拖动放大。

pYYBAGKBrBOAAeXkAACZYrINVDA151.png

图7 添加文本

步骤4:添加Button按钮组件:

接下来我们在文本下面添加Button组件,为页面增加一个按钮。

(1) 如图8所示,选中UI Control中的Button组件,将其拖至Text组件下面。

(2) 点击右侧属性样式栏中的属性图标(Properties),设Button组件的Value属性为“一键入门”。

(3) 点击右侧属性样式栏中的样式图标 (Feature),设置组件的FontSize样式为40px,使得其文字放大;再选中画布上的Button组件,拖动放大。

pYYBAGKBrCKAB1sQAACudTb726g530.png

图8 添加按钮

步骤5:查看预览效果:

如图9所示,所有步骤完成后,打开预览器查看效果。

poYBAGKBrIKAGeenAABW0K43IOE545.png

图9 第一个预览效果图

简单几步就完成第一个页面开发,是不是超级简单?接下来让我们一起开发第二个页面。

4. 开发第二个页面

在开发第二个页面之前需要先创建第二个页面的second.js和second.visual文件,用于存储 第二个页面的逻辑和数据。如图10所示,右键点击pages文件夹,选择New 》Visual,命名为second,单击Finish,就完成了第二个页面的second.js和second.visual文件的创建。

pYYBAGKBrMmAWimjAAC6w6d_FhE100.png

图10 第二个页面的second.js和second.visual文件

由于第二个页面的第一个页面的开发步骤一模一样,故此处不再赘述,直接为大家展示第二个页面效果(如图11所示):

pYYBAGKBrNiADz5WAAAnemOZP3A107.png

图11 第二个页面效果图

两个页面完成之后,那么如何实现两个页面之间的跳转呢?请继续往下看。

5. 第一个页面的跳转

在第一个页面中,将跳转按钮绑定onclick方法,点击按钮时,即可跳转到第二页。操作如下:

(1) 首先需要在index.viusal中,给画布上的Button组件选择onclick方法。操作如图12所示,打开index.visual,选中画布上的Button组件。点击右侧属性样式栏中的事件图标(Events),鼠标点击Click事件的输入框,选择onclick方法。

pYYBAGKBrOSAbK8sAADPQtuMJMk154.png

图12 onclick设置

(2) 然后在index.js当中绑定onclick方法,并在onclick方法中写入router模块,index.js代码如下:

pYYBAGKBrPuAZ_lnAAAmBMWg9s8027.png

完成上述两步后,即可实现从第一个页面跳转到第二个页面。

6. 第二个页面的返回

接下来我们看下如何从第二个页面返回到第一个页面,和上一个跳转类似,在第二个页面中,返回按钮绑定back方法,点击按钮时,即可返回到第一页。操作如下:

(1) 如图13所示,首先打开second.visual,选中画布上的Button组件,点击右侧属性样式栏中的事件图标(Events),点击Click事件的输入框,选择back。

pYYBAGKBrQSALonUAABd6ZHjcvQ873.png

图13 back设置

(2) 然后在second.js中绑定back方法,并在back方法中写入router模块,second.js 代码如下:

poYBAGKBrRqARO3pAAAcuqhJtME255.png

7. 查看最终效果

至此,我们的两个页面已经开发好,页面跳转也已经设置好,接下来就可以点击预览器查看最终效果啦(如图14所示)。

pYYBAGKBrTeAQbrOAABd6ZHjcvQ099.png

图14 最终效果

四、结语

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

审核编辑:彭静
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 容器
    +关注

    关注

    0

    文章

    473

    浏览量

    21865
  • 代码
    +关注

    关注

    30

    文章

    4536

    浏览量

    66498
  • HarmonyOS
    +关注

    关注

    79

    文章

    1689

    浏览量

    29151
收藏 人收藏

    评论

    相关推荐

    何用代码资源管理器跳转到一个已寻址函数?

    你好,作为PSoC Creator的NeWBEE,我还没有发现,如何用代码资源管理器跳转到一个已寻址函数。在我的程序中,主函数是第一个函数,其他所有函数都在下面。所以我必须把这些功能
    发表于 08-01 08:48

    HarmonyOS实现页面跳转

    实现页面跳转打开第一个页面的“MainAbilitySlice.java”文件,重写onStart()方法添加按钮的响应逻辑,实现点击按钮
    发表于 09-17 14:42

    北向应用:Car页面布局与跳转测试

    本帖最后由 李洋水蛟龙 于 2020-12-30 18:00 编辑 显示效果:点击“点击了解更多”进入下一个页面代码如下:第一个页面的布局 然后绑定布局进行跳转Button
    发表于 12-30 17:52

    跳转到鸿蒙-在HarmonyOS手机应用实现图片文字布局与页面跳转

    一、亮点说明应用页面的图片和文字布局与实现页面跳转,是一个应用开发的最基本的组成部分。特别是刚开始进入鸿蒙应用服务开发领域的开发者,这是最基本的练习,熟练的掌握本部分后,对整体的ID
    发表于 02-08 14:55

    #HarmonyOS征文#—页面之间的跳转

    实现步骤:①:编写第一个页面(文本+按钮) xml编写②:编写第二个页面(文本) java 编写③:给按钮添加一个跳转设计思路:第一步:在第一个界面中把HelloWorld改写为第一个
    发表于 07-20 14:44

    【木棉花】学习笔记--页面跳转

    前言大家好,我又回来啦。这一星期的学习时间又到了。那我们在前几个星期讲的都是harmonyOS里的分布式能力,可能学起来会相对较难一点,那我们这一星期就找了个简单一点的来学,那这就是页面间的跳转
    发表于 09-15 14:43

    HarmonyOS应用开发-ArkUI声明式UI页面布局、跳转与返回的实现

    页面跳转声明式UI范式提供了两种机制来实现页面间的跳转:1. 路由容器组件Navigator,包装了页面
    发表于 12-09 11:42

    entry模块里面的index.ets如何跳转到另外一个xxx.ets页面

    页面?下面的写法跳转失败,提示:can‘t find this page pages/login path  index.ets代码:  router.push({uri: ’pages/login
    发表于 03-14 17:06

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

    四、结语 以上就是使用代码实现一个简单页面跳转功能
    发表于 05-16 17:22

    【PIMF】代码(可视化界面)入门OpenHarmony3.1 Release应用开发

    。高效代码调试:提供TS、JS 、C/C++代码的断点设置,单步执行、变量查看等调试能力,提升应用及服务的问题分析效率。成果(实现一个简单页面
    发表于 05-20 11:54

    哎嘿!我实现页面跳转功能

    实现这个页面跳转真的不难!偷偷告诉你们,以1.5倍速学习,只要半个小时就能学会(此处以小白为衡量标准,如果稍微有点代码基础的,估计10分钟左右即可学会)现在我把一些重要的步骤分享给大
    发表于 06-16 19:24

    小白指南:手把手教你用代码开发一个应用页面

    开发呢?” 代码开发为我们开发者提供了UI界面开箱即用的组件,通过简单拖、拉、拽和可视化数据绑定的操作方式,快速开发用户界面。不仅可以减少键入的代码量,降低开发成本,还提升了
    发表于 02-17 10:07

    HarmonyOS 管理页面跳转及浏览记录导航

    应用跳转 Web组件可以实现点击前端页面超链接跳转到其他应用。 在下面的示例中,点击call.html前端页面中的超连接,
    发表于 09-19 18:31

    何用代码实现一个简单页面跳转功能

    我们先开发第一个页面,如图4所示,第一个页面是在容器中展示“低代码入门”文本和“一键入门”按钮,它们分别可以通过Div、Text、和Button组件来实现。下面一起跟随开发步骤完成第一
    的头像 发表于 05-16 09:45 1186次阅读

    何用BUCK电路简单实现一个可靠的负电源?

    何用BUCK电路简单实现一个可靠的负电源?
    的头像 发表于 12-05 15:12 400次阅读
    如<b class='flag-5'>何用</b>BUCK电路<b class='flag-5'>简单</b><b class='flag-5'>实现</b>一个可靠的负电源?