jjzjj

HUAWEI DevEco Studio教程四(鸿蒙HarmonyOS)

老刘编程 2024-05-03 原文

目录

低代码开发

HarmonyOS低代码开发方式,具有丰富的UI界面编辑功能,通过可视化界面开发方式快速构建布局,可有效降低用户的上手成本和提升用户构建UI界面的效率。

此功能只在DevEco Studio V2.2
Beta1及更高版本中支持。请在https://contentcenter-vali-drcn.dbankcdn.com/pvt_2/DeveloperAlliance_package_901_9/ce/v3/7f2dVvqvRDq6DoGrzPDgEg/devecostudio-windows-tool-2.2.0.400.zip?HW-CC-KV=V1&HW-CC-Date=20210921T115024Z&HW-CC-Expire=7200&HW-CC-Sign=280BC1073C78F69661E797985FDD5E58F1D3EF93437E6D0EDF5E752A02ECC8C3下载新版本

创建项目

创建一个新工程,模板选择支持Phone的模板,如Empty Ability。

选中模块的pages文件夹,单击鼠标右键,选择New > JS Visual

在弹出的对话框中,输入JS Visual Name,并勾选“Update compileSdkVersion”

然后会在工程中自动生成低代码的目录结构。

文件说明

page.js(pages > page > page.js):逻辑描述文件,定义了页面里用到的逻辑关系,例如数据、事件等待。
page.visual(pages > page > page.visual):存储数据模型,双击即可打开可视化布局设计与开发页面。

打开“page.visual”文件,即可进行页面的可视化布局设计与开发。

点击界面右上角的“设备/模式切换”按钮,进行设备或模式的切换。

界面介绍


1:UI Control:UI控件栏,可以将相应的组件选中并拖动到画布(Canvas)中,实现控件的添加。
2 :Component Tree:组件树,在低代码开发界面中,可以方便开发者直观地看到组件的层级结构、摘要信息以及错误提示。开发者可以通过选中组件树中的组件(画布中对应的组件被同步选中),实现画布内组件的快速定位;点击组件后的 或 图标,可以隐藏/显示相应的组件。
3 :Panel:功能面板,包括常用的画布缩小放大、撤销、显示/隐藏组件虚拟边框、可视化布局界面一键转换为hml和css文件等。
4 :Canvas:画布,开发者可在此区域对组件进行拖拽、拉伸等可视化操作,构建UI界面布局效果。
5 :Attributes & Styles:属性样式栏,选中画布中的相应组件后,在右侧属性样式栏可以对该组件的属性样式进行配置。包括:
• Properties:用于设置组件基本标识和外观显示特征的属性,如组件的ID、If等属性。
• General:用于设置Width、Height、Background、Position、Display等常规样式。
• Feature:用于设置组件的特有样式,如描述Text组件文字大小的FontSize样式等。
• Flex:用于设置Flex布局相关样式。
• Events:为组件绑定相关事件,并设置绑定事件的回调函数。
• Dimension:用于设置Padding、Border、Margin等与盒式模型相关的样式。
• Grid:用于设置Grid网格布局相关样式,该图标只有Div组件的Display样式被设置为grid时才会出现。

UI控件栏控件介绍

  • Div:一个块级元素,可以在其中添加控件
  • Input:输入框
  • List:列表
  • ListItem:列表项
  • Text:文字控件
  • Image:图片控件
  • Button:按钮
  • Chart:图表
  • Span:类似div,组合文档中的行内元素。
  • Dialog:对话框
  • Progress:进度条

通过拖拽的方式即可快速创建一个应用程序

多语言支持

低代码页面支持多语言,而无需开发多个不同语言的版本。可以通过定义资源文件和引用资源两步来使用多语言能力。

  1. 在i18n文件夹创建文件
  2. 低代码页面的属性样式栏中使用$t方法引用资源

需要打开预览器才可预览展示效果。

添加JS Component与JS Page

在JS语言的工程中,支持添加JS Component和JS Page。
• JS Component:在JS工程中,可以存在多个JS Component(例如js目录下的default文件夹就是一个JS Component),一个JS FA对应一个JS Component,可以独立编译、运行和调试。Lite Wearable和Smart Vision设备对应的JS工程,只存在一个JS FA,因此,Lite Wearable和Smart Vision设备的JS工程不允许创建新的JS Component。
• JS Page:Page是表示JS FA的一个前台页面,由JS、HML和CSS文件组成,是Component的最基本单元,构成了JS FA的每一个界面。

添加方法

选中js文件夹,鼠标右键,选择New > JS Component,输入JS Component的名称,点击Finish即可完成添加。

JS Page则需选择要添加Page的pages文件夹,鼠标右键,选择New > JS Page,输入JS Page的名称,点击Finish即可完成添加。

有关HUAWEI DevEco Studio教程四(鸿蒙HarmonyOS)的更多相关文章

  1. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  2. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  3. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

  4. hadoop安装之保姆级教程(二)之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的,针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜,提出了全新的资源管理框架YARN. ApacheYARN(YetanotherResourceNegotiator的缩写)是Hadoop集群的资源管理系统,负责为计算程序提供服务器计算资源,相当于⼀个分布式的操作系统平台,⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现,但是因为具有⾜够的通⽤性,同样可以⽀持其他的分布式计算模

  5. ruby - 在 RUBY 上的 PADRINO 框架上使用 RSPEC 进行测试的教程 - 2

    我是Ruby新手,并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是,我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。 最佳答案 我没用过Pa

  6. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具,用来对区块链系统进行各种管理操作。但是对于初学者来说,还是可视化界面更友好,本节就来介绍WeBASE管理平台,这是一款微众银行开源的自研区块链中间件平台,可以降低区块链使用的门槛,大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行,在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设,一定

  7. HarmonyOS原子化服务开发相关术语 - 2

    术语中文解释Ability原子化服务帮助用户完成任务的原子化服务,和用户的意图进行关联。Fulfillment服务履行通过图标,卡片,语音等形式呈现用户意图。开发者通过接口的方式,处理用户意图,返回内容。Intent意图用于表达用户想要达成的目标或完成的任务。HUAWEIAssistant智能助手“无微不智”的个人助手,通过不断的学习用户的使用习惯,不断的为用户提供贴心的精准的便捷的个性化服务。AISearch全局搜索用户可快速搜索关键词,与之匹配的原子化服务则会出现在搜索结果中。SmartService智慧服务用户订阅原子化服务,在到达特定触发条件(时间、地点、事件)后,卡片推送至用户智能助

  8. ruby-on-rails - rails 教程 : Putting flash messages in partial yields error "undefined method ` each' for nil:NilClass"? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:FlashMessagesinPartials(Rails3)我正在做MichaelHartl的Railstutorial和listing7.26将flash消息添加到应用程序布局:...">...这很好用。但是,我试图通过在我的部分文件夹中创建一个_flash.html.erb来清理这段代码...">-->...并且比使用......在我的应用程序布局中,我的所有Rspec测试开始失败,每个测试都显示以下消息:Failure/Error:before{visitsignup_path}ActionView:

  9. ruby-on-rails - Ruby on Rails 教程 - 5.26 - Sublime Text "Unable to Save"新文件 "spec/support/utilities.rb" - 2

    我正在使用SublimeText2,同时遵循MichaelHartl的RubyonRails教程。可以在http://ruby.railstutorial.org/book/ruby-on-rails-tutorial找到我所指的教程的具体部分。(ctrl+F“list5.26”)。我能够创建规范/支持文件。但是,在尝试创建spec/support/utilities.rb文件时,我收到消息“无法保存~/rails_projects/sample_app/spec/support/utilities.rb”。有人知道为什么会这样吗?SublimeText论坛上有人似乎遇到了完全相同的问

  10. 华为ensp详细安装包、安装教程及所遇问题 - 2

    目录一、安装包链接二、安装详细步骤1.安装Wireshark和WinPcap2.安装OracleVMVirtualBox3.安装ensp三、安装后注册四、启动路由器出现40错误怎么解决一、安装包链接二、安装详细步骤链接:https://pan.baidu.com/s/1QbUUYMOMIV2oeIKHWP1SpA?pwd=xftx提取码:xftx1.安装Wireshark和WinPcap找到Wireshark安装包所在文件夹,双击它,按照以下步骤安装。2.安装OracleVMVirtualBox找到OracleVMVirtualBox安装包所在文件夹,双击它,按照以下步骤安装。注:可自定义安装

随机推荐