首页 > 其他分享 >鸿蒙开发(四)-低代码开发

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

时间:2024-03-14 16:58:21浏览次数:19  
标签:index 鸿蒙 代码 visual 开发 我们

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

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

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

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了。

在这里插入图片描述
在这里插入图片描述

标签:index,鸿蒙,代码,visual,开发,我们
From: https://blog.csdn.net/qq_23025319/article/details/136635916

相关文章

  • 买房掌握这9大妙招 认清开发商的套路!
    相对于开发商来说,购房者往往属于弱势群体。由于很多购房者缺乏对房产知识以及法律知识的了解,很容易被开发商所“忽悠”。更有甚者发生纠纷时,购房者不知如何处理,导致自己的合法权益受到损害。那么想要明明白白买房,认清开发商的套路需要掌握哪些知识一、看五证了解开发商实力鉴别......
  • nuxt3前端开发教程
    源码请移步:springboot+vue3+nuxt3+ts+minio开发的dsblog3.0前后端博客-java大师(javaman.cn)目录结构如下:一、nuxt3配置文件这段代码是一个Nuxt.js的配置文件,用于定义Nuxt.js项目的配置选项。Nuxt.js是一个基于Vue.js的通用应用框架,它简化了Vue.js项目的创建和开发过程。......
  • WanAndroid(鸿蒙版)开发的第二篇
    前言DevEcoStudio版本:4.0.0.600WanAndroid的API链接:玩Android开放API-玩Android-wanandroid.com1、WanAndroid(鸿蒙版)开发的第一篇2、WanAndroid(鸿蒙版)开发的第二篇3、WanAndroid(鸿蒙版)开发的第三篇4、WanAndroid(鸿蒙版)开发的第四篇5、WanAndroid(鸿蒙版)开......
  • #微信小程序(轮播图以及开发方法)
    1.IDE:微信开发者工具2.实验:轮播图以及正确的开发方法(1)有HTML,CSS,javascript基础即可(2)写界面一定要查看开发手册,这是微信小程序比较好的地方,由于是国内软件有中文开发手册。手册地址,直接搜---->微信小程序----->开发文档。网址:视图容器/swiper(qq.com)https://developers......
  • odoo17开发教程(7):用户界面UI的交互-菜单
    声明菜单menuitem为了减少声明菜单(ir.ui.menu)并将其连接到相应操作的复杂性,我们可以使用<menuitem>快捷方式。 还是拿 test_model_action举例,一个最简单的菜单如下:<menuitemid="test_model_menu_action"action="test_model_action"/>菜单test_model_menu_action......
  • 迅为iTOP-RK3588开发板Buildroot系统功能测试
     第三章Buildroot系统功能测试烧写buildroot系统镜像,buildroot系统镜像在网盘资料“iTOP-3588开发板\01_【iTOP-RK3588开发板】基础资料\06_iTOP-RK3588开发板Linux镜像\01_Buildroot镜像”目录下,本小节测试buildroot系统。 3.1系统启动Buildroot系统启动后,串口如下图所示......
  • odoo17开发教程(5):权限的简单介绍
    在之前的文章中,我们创建了第一个用于存储业务数据的表。在Odoo这样的商业应用程序中,首先要考虑的问题之一是谁可以访问数据。Odoo提供了一种安全机制,允许特定用户组访问数据。本章旨在对权限有个最低要求对了解数据文件(CSV)Odoo是一个高度数据驱动的系统。虽然行为是通过......
  • OCS2 例程代码解析- Quadrotor
    一、ocs2_quadrotorSTATE_DIM=12;INPUT_DIM=4;state:位置、角度、位置导数、角速度、input:Fz,Mx.My,Mz1、QuadrotorInterface.h定义一个类QuadrotorInterface,作用:QuadrotorInterface(conststd::string&taskFile,conststd::string&libraryFolder);构造函数,接受......
  • 用JavaSocket编程开发聊天室
    1.设计内容1.用Java图形用户界面编写聊天室服务器端和客户端,支持多个客户端连接到一个服务器。每个客户端能够输入账号。2.可以实现群聊(聊天记录显示在所有客户端界面)。3.完成好友列表在各个客户端上显示。4.可以实现私人聊天,用户可以选择某个其他用户,单独发送信息。......
  • HarmonyOS 鸿蒙 arkts 自定义组件插槽
    HarmonyOS鸿蒙arkts中自定义组件中要传入其他组件的时候就可以使用自定义组件插槽。Container组件添加child属性后,表示该组件具备了额外添加子组件的能力,接下来在需要添加子组件的地方使用child属性做占位即可。自定义组件@ComponentexportstructContainer{@Bu......