鸿蒙支持低代码开发,无需HTML知识,就可以设计复杂界面

鸿蒙的最新IDE支持可视化开发。几乎不需要编写一行代码,就可以设计非常复杂的界面。当然,如果要实现业务逻辑,还是需要编写代码的。所以我们把这些功能称为低代码开发,也就是说,可以让我们少编写一些代码。
本文将详细介绍如何使用鸿蒙最新的IDE来设计一个复杂的界面。首先启动IDE,并创建一个JS工程。
由于可视化开发目前只支持JS,所以我们只能用JS工程。
创建完工程后,找到js中的pages配置,然后在右键菜单中点击New -> JS Visual菜单项,如下图所示。
这时会弹出一个对话框,如下图所示。
输出可视化文件名字,并选中下面的复选框,然后点击Finish按钮创建可视化设计器文件。在创建完可视化设计器后,会看到工程树中多了一个supervisual节点,该节点与pages节点的目录结构类似,如下图所示:
如果使用Web相关技术设计界面,有两种方式。第1种就是传统的方式,通过hml文件和css文件设计界面,这种方式需要编写UI代码。而第2种方式就是本文要讲的可视化设计器,也就是page.visual文件。其实该文件是JSON格式的,只是鸿蒙IDE将其解析成可视化形态。
如果采用第1种方式设计界面,必须包含3个文件:index.js、index.hml和index.css。而如果使用第2种设计界面的方式,就不再有index.hml和index.css文件,取而代之的是page.visual文件。也就是说,如果采用可视化的方式设计界面,只有两个文件:page.js和page.visual。分别位于pages和supervisual目录的相应子目录。
现在双击page.visual文件,会看到如下的可视化设计区域:
在这个区域共分为4部分:左上角的组件面板、左下角的组件结构树、中间的可视化设计器以及右侧的属性面板。
现在我们就用这个可视化设计器设计一个列表。首先删除原有的组件。要想绘制一个列表,需要使用列表组件(List)和列表项组件(ListItem)。现在首先将列表组件放到设计区域,将列表组件拉动到与设计界面同样尺寸,然后拖动一个列表项组件放到列表组件上面。现在点击列表项组件,在右侧的属性面板中切换到第2个属性页,然后设置列表项的高度为100,设置后的效果如下图所示:
接下来拖动一个图像组件(Image)和一个文本显示组件(Text)的列表项组件上。现在点击文本显示组件,在右侧的属性面板中切换到第3个属性页,设置文本显示组件的字体尺寸为20,并让文本组件显示一个静态的文本,效果由下图所示:
到现在为止,所有的可视化设计工作全部完成。下一步需要往这个列表里边添加数据。数据来源可以有多种方式。本例将采用JS数组定义在列表中显示的数据。
现在切换到index.js文件,并编写如下代码:
export default { data: { data:[ { title:'鸿蒙编程思想', image:'common/images/a.png' }, { title:'Python从菜鸟到高手', image:'common/images/b.png' } ] }
其中data数组就是我们要显示的列表组件中的数据。在data数组中有两个对象,那一个对象定义了两个属性:title和image。分别用于将文本和图像显示在Text组件与Image组件中。
最后一步就是需要将data数组与列表组件绑定,现在切换到可视化设计器,点击列表项组件。在右侧的属性面板中切换到第1个属性页,然后将itemData属性值设置为{{data}},如下图所示。其中{{data}}就是在index.js中定义的data数组。现代数据已经和列表项绑定了。最后需要指定在不同的组件显示不同的数据。
现在点击图像组件,然后在右侧的属性面板中切换到第1个属性页,并设置Src属性的值为{{$item.image}},如下图所示:
用同样的方法设置文本显示组件的content属性的值为{{$item.title}},如下图所示:
到显示为止,列表组件已经可以显示数据了,如下图所示。
不过图像组件没有完整显示图像,所以可以在右侧的属性面板中切换到第3个属性页,设置ObjectFit属性的值为contain。这时图像就可以完整显示了,有下图所示。
在手机中运行程序,会看到如下的效果,完美地所见即所得,而且无需编写一行UI代码。

- EOF -

(0)

相关推荐

  • Vue.js权威指南

    一.遇见Vue.js 1.MVP,从MVC演化而来,Controller/Presenter负责逻辑的处理,完全把View和Model进行了分享,主要的程序逻辑在Presenter里实现,与具体的Vi ...

  • Vue.js--Vue.js搬砖基础

    Vue做为当今三大流行框架,如果不懂点,似乎没办法跟别人说做过前端,好吧,三个月的时间内断断续续的把基础内容熟悉并基本上敲了一遍.简单的做下笔记,方便记忆和查询: MVVM模式是由经典的软件架构MVC ...

  • 终极疑问 | 最理想的埋点方式是什么?

    在这一个大数据的时代,凭经验拍脑门的决策方式已成过去,数据的重要性不言而喻,数据分析的第一步就是从数据源头做好采集工作,我们今天的主题:数据埋点. 本文提要: 1.埋点:数据分析的第一步 2.&quo ...

  • 前端开发之Vue学习笔记分享

    Vue.js的发展 前端发展的行业非常快,大部分学习者赶不上发展的速度,每天都在学习Google的AngularJS,Fackbook的ReactJS,这些前端MVC(MVVM)框架和组件化学习,加上 ...

  • 学会这个神器和技巧,低代码开发高端可视化大屏

    随着企业数字化建设的发展,领导对数据价值的利用意识越来越高,数据分析和展现需求日益增长.对于管理层来说,可视化大屏和驾驶舱项目尤其受欢迎,这两年我遇到的BI项目有半数会有开发管理驾驶舱.大屏的需求. ...

  • 华为鸿蒙系统界面如何

    鸿蒙系统最近非常火,备受关注小伙伴的关注,华为鸿蒙系统界面是什么样的,大家肯定都非常好奇,今天小编给大家带来华为鸿蒙系统界面分享步骤,希望可以帮到大家. 此次鸿蒙系统为大家带来了全新的桌面展示,采用分 ...

  • 前端开发之React开发框架的介绍与使用

    React简介 facebook开源的前端JS结构化框架 一个用于动态构建用户界面的JS框架 React特点 声明式编码Declarative 组件化编码Component_Based 双端(客户端. ...

  • High&NewTech:低代码(0代码/无代码,无需代码)开发的简介以及如何选择最合适的低代码开发工具

    High&NewTech:低代码(0代码/无代码,无需代码)开发的简介以及如何选择最合适的低代码开发工具 导读:在互联网时代,博主经常反思一个问题,如何跟进这个快速发展的时代才能不会被淘汰?博 ...

  • 低代码开发平台从哪些方面帮助企业?

    低代码开发平台对于企业,可以说是当今企业数字化转型的得力助手.低代码开发平台意味着企业可以用最低的成本.以最快的速度来实现数字化转型,为企业节省更多成本,从而大大提升利润空间.有非常多的企业通过低代码 ...

  • 低代码开发到底有什么应用价值?

    1999年,前甲骨文副总裁Marc Benioff创立Sales force,提出"软件终结"口号,开启了低代码应用开发的全新旅. Mendix低代码领域开发平台成立于2001年, ...

  • 实战Spring Cloud、Vue构建基于微服务的SaaS低代码开发平台2

    大角云低代码开发2019-10-07 20:28:08 一.低代码开发平台不是快速开发平台 1. 低代码开发平台定义 最近,阿里巴巴发布了自己的低代码开发平台"宜搭",网址是:ht ...

  • 实战Spring Cloud和Vue构建基于微服务的SaaS低代码开发平台

    打算写一写低代码开发平台的文章,大纲如下: 一.低代码开发平台不是快速开发平台 低代码开发平台定义 快速开发平台定义 低代码开发平台特征 低代码开发整体架构图 二.视图层的选择 低代码开发需要的视图层 ...

  • 微软低代码平台是一种方向,但真正的低代码开发一定开放,开源的

    前两天我发布了一篇文章,关于低代码的发展方向,没想到网友的反馈非常积极,也有很多深刻的留言.大家对低代码发展的方式有不同意见,微软的低代码并不被认可是符合真正低代码的发展方向,更像是一种店大欺客的感觉 ...

  • 2020中国低代码开发平台十大趋势

    近日,中国软件行业协会.中国软件网联合全球领先的开发工具厂商葡萄城发布了<2020 中国低代码开发平台十大发展趋势>,对低代码开发平台的发展表示乐观,并提出了若干技术演进方向.该报告的内容 ...

  • 低代码开发平台

    今天准备再谈下对低代码开发平台的扩展思考,最近2到3年,低代码开发平台可以算作一个小热点,不论是传统的BPM厂家,还是原来的快速开发平台厂家,包括还有一些中台建设厂家都逐步推出自己的低代码开发平台. ...