鸿蒙开发(四)-低代码开发

鸿蒙开发(四)-低代码开发

本文主要介绍下鸿蒙下的低代码开发。

鸿蒙低代码是指在鸿蒙操作系统进行应用开发时,采用简化开发流程和减少编码量的方式来提高开发效率。

1:开启低代码开发

首先我们打开DevEco Studio .然后创建工程。

如图所示,Enable Super Visual:

2: 目录结构

创建工程成功后,我们切换Project模式,可以看到以下工程目录。

前面的文章我们已经介绍过了,未开启低代码开发开关情况下的工程目录结构,

所以我们这里只介绍下区别。

开启低代码开关后,工程目录中自动多了以下文件:

点击Index.visual, 我们可以看到如下界面:

点击右侧Preview,我们可以看到对应的效果:

另外我们可以打开Index.ets,这是与Index.visual相对应的文件:

复制代码
@Entry
@Component
struct Index {
 
  @State message: string = 'Hello World'
 
  /**
   * In low-code mode, do not add anything to the build function, as it will be
   * overwritten by the content generated by the .visual file in the build phase.
   */
  build() {
 
  }
}

在index.ets文件下,我们可以定义一些数据和方法,如果是在非低代码模式下开发时,我们还需要再build函数中编写组件代码。低代码模式下则需要再index.visual中添加组件

3:组件添加

我们可以通过拖拉来修改组件的大小,以及位置。

如图所示,在右侧中我们可以直接修改button的各种属性。

如button的文案除了直接添加外,我们还可以切换导入资源文件的模式:

点击label右侧的小图标即可切换资源文件模式,点击select a data,弹出下拉框选择对应的资源即可。

我们选择$r('app.string.EntryAbility_desc') 可以看到对应的文案展示成了description.

这里资源文件是放在:

另外,我们还可以看到有个选择也就是this.message:

那这个this.message是在那定义的呢,刚才我们看了index.ets.我们也说了这个文件是跟index.visual相对应的。我们修改index.ets,即可在index.visual中重新引用到this.message2了。


相关推荐
前端不太难1 小时前
从本地到多端:HarmonyOS 分布式数据管理实战详解
分布式·状态模式·harmonyos
流之云低代码平台1 小时前
PHP工作流优化:让软件开发如虎添翼
低代码·php工作流优化方法·php工作流优化案例·php代码复用·php模块化开发·php自动化测试·php性能优化
不法1 小时前
java查看安卓证书信息
android
儿歌八万首1 小时前
Jetpack Compose 动画实战:让你的 UI 动起来
android·kotlin·动画·compose
行者962 小时前
Flutter适配OpenHarmony:国际化i18n实现中的常见陷阱与解决方案
开发语言·javascript·flutter·harmonyos·鸿蒙
千里马学框架2 小时前
如何改进车载三分屏SplitScreen启动交互方式?
android·智能手机·分屏·aaos·安卓framework开发·车载开发·3分屏
cn_mengbei3 小时前
鸿蒙PC开发实战:Qt环境搭建保姆级教程与常见问题避坑指南(HarmonyOS 4.0+DevEco Studio 3.1最新版)
qt·华为·harmonyos
特立独行的猫a3 小时前
[鸿蒙PC命令行程序移植]:移植axel多线程高速下载工具踩坑记
华为·harmonyos·移植·鸿蒙pc·axel
Van_Moonlight3 小时前
RN for OpenHarmony 实战 TodoList 项目:任务完成进度条
javascript·开源·harmonyos
cn_mengbei3 小时前
从零到一:基于Qt on HarmonyOS的鸿蒙PC原生应用开发实战与性能优化指南
qt·性能优化·harmonyos