乐趣区

关于openharmony:PIMF低代码可视化界面入门OpenHarmony31-Release应用开发

本文来自 OpenHarmony 成长打算啃论文俱乐部 11 组 PIMF(Preeminent Input Method Framework)PIMF 即卓越的输入法框架 。笔者浏览文档尝试应用 DevEco Studio 3.0 Beta3 for OpenHarmony 进行 低代码 开发 OpenHarmony 利用。

前言


OpenHarmony 3.1 Release 于 2022 年 3 月 30 日公布后,3 月 31 日华为公布了最新的 IDE 工具 DevEco Studio 3.0 Beta3 for OpenHarmony。(DevEco Studio 3.0 Beta3 是撑持 OpenHarmony 利用及服务开发的第一个版本,扭转了之前 HarmonyOS 和 OpenHarmony 共用 IDE 的场面)

DevEco Studio 3.0 Beta3 作为撑持 OpenHarmony 利用及服务开发的 IDE,具备以下能力特点:

智能代码编辑 :代码高亮、代码智能补齐、代码谬误查看、代码主动跳转、代码格式化、代码查找,晋升代码编写效率。
低代码开发 :丰盛的 UI 界面编辑能力,反对自在拖拽组件和可视化数据绑定,可疾速预览成果,所见即所得,同时反对卡片零码化开发,晋升界面开发效率。
多端双向实时预览 :反对 UI 界面代码的双向预览、实时预览,动静预览、组件预览以及多端设施预览,便于疾速查看代码运行成果。
全新构建体系 :通过 Hvigor 编译构建工具,一键实现利用及服务的编译和打包,更好地反对 eTS/JS 开发。
一站式信息获取 :基于开发者理解、学习、开发、求助的用户旅程,在 DevEco Studio 中提供一站式的信息获取平台,高效撑持开发者流动。
高效代码调试:提供 TS、JS、C/C++ 代码的断点设置,单步执行、变量查看等调试能力,晋升利用及服务的问题剖析效率。

成绩(实现一个简略的页面跳转)

搭建开发环境


1. 官网文档领导华为官网
2. 应用低代码开发利用或服务有以下两种开发方式:

  • 间接创立一个反对低代码开发的新工程以进行开发。本文以此形式为例进行阐明。
  • 在已有工程中,创立 Visual 文件来进行开发。
    接下来咱们以创立一个低代码开发的新工程为例进行阐明。

创立反对低代码开发的新工程

1. 关上工程创立向导(File > New >Create Project) , 创立一个新工程。
2. 工程模板抉择 ”Empty Ability”, 而后点击 Next 进行下一步。
3. 填写工程配置信息,关上 ”Enable Super Visual” 开关,UI Syntax 抉择 ”JS”,其余配置放弃默认即可。
4. 最初在工程配置信息界面,点 Fish, 实现工程创立。

对于低代码工程的目录介绍如下:

  • entry > src > main > js > MainAbility > pages > index > index.js: 低代码页面的逻辑形容文件,定义了页面里所用到的所有的逻辑关系,比方数据、事件等。如果创立了多个低代码页面,则 pages 目录下会生成多个页面文件夹及对应的 js 文件。

    应用低代码页面开发时,其关联 js 文件的同级目录中不能蕴含 hml 和 css 页面, 否则呈现编译谬误。
  • entry > src > main > supervisual > MainAbility > pages > index > index.visual: visual 文件存储低代码页面的数据模型,双击该文件即可关上低代码页面,进行可视化开发设计。如果创立了多个低代码页面,则 pages 目录下会生成多个页面文件夹及对应的 visual 文件。

编写第一个页面

工程同步实现后,第个页面已有一个容器、文本 (Hello World) 显示。
为了更具体地理解低代码开发,咱们删除画布原有模板组件,从零开始实现页面的增加、设置。
第一个页面内有一个容器、文本和一个按钮,通过 Div、Text 和 Button 组件来实现。

1. 删除画布原有模板组件。

  • 关上 ”index.visual” 文件,选中画布中的组件,单击鼠标右键, 抉择 Delete 删除画布原有模板组件。

2. 增加容器,设置 Div 容器的款式和属性。

  • 选中 UI Control 中的 Div 组件,将其拖至画布。
  • 点击右侧属性款式栏中的款式图标(General),设置 Div 组件的高度 Height 为 100%,使其占满屏幕;
  • 点击右侧属性款式栏中的款式图标(Flex),设置 Div 组件的 FlexDirection 款式为 column, 使 Div 的主轴垂直; 设置 Div 组件的 JustifyContent 款式为 center, 使得其子组件在主轴上居中显示; 设置 Div 组件的 Alignltems 款式为 center, 使得其子组件在穿插轴上居中显示。

3. 增加文本。

  • 选中 UI Control 中的 Text 组件,将其拖至 Div 组件的地方区域。
  • 点击右侧属性款式栏中的属性图标(Properties), 设置 Text 组件的 Content 属性为“低代码入门”;
  • 点击右侧属性款式栏中的款式图标。(Feature) , 设置组件的 FontSize 款式为 60px, 使得其文字放大; 设置组件的 TextAlign 款式为 center, 使得组件文字居中显示。
  • 再选中画布上的 Text 组件,拖动放大。

4. 增加按钮。

  • 选中 UI Control 中的 Button 组件,将其拖至 Text 组件上面。
  • 点击右侧属性款式栏中的属性图标(Properties), 设 Button 组件的 Value 属性为 ” 一键入门 ”;
  • 点击右侧属性款式栏中的款式图标 (Feature) , 设置组件的 FontSize 款式为 40px, 使得其文字放大;
    再选中画布上的 Button 组件,拖动放大。

5. 关上预览器查看成果

编写第二个页面

1. 创立第二个页面。
在 ”Project” 窗口,关上 ”entry > src > main > js > MainAbility”, 右键点击 pages” 文件夹,抉择 ”New >Visual”, 命名为 ”second”, 单击 Finish”, 即实现第二个页面的创立。

2.接下来操作步骤和编写第一个的页面截然不同,操作略,第二个页面成果如下:

实现页面跳转

页面间的导航能够通过页面路由 router 来实现。页面路由 router 依据页面 uri 找到指标页面,从而实现跳转。应用页面路由请导入 router 模块。
1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定 onclick 办法,点击按钮时,跳转到第二页。需同时解决 js 文件及 visual 文件

  • index.js 示例如下:

    import router from '@system.router'
    
    export default {onclick (){router.push({uri:'pages/second/second',})
      }
    }
  • “index.viusal”: 关上 ”index.visual”, 选中画布上的 Button 组件。点击右侧属性款式栏中的事件图标(Events) , 鼠标点击 Click 事件的输入框,抉择 onclick, 如下所示:

2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定 back 办法,点击按钮时,返回到第一页。
需同时解决 js 文件及 visua 文件。

  • second.js 示例如下:

    import router from '@system.router'
    export default {back() {router.back()
     }
    }
  • “second.viusal”: 关上 ”second.visual”, 选中画布上的 Button 组件。点击右侧属性款式栏中的事件图标(Events), 鼠标点击 Click 事件的输入框,抉择 back。

预览查看成果

关上 index.visual 或 index.js 文件,点击预览器

关上肥宅高兴水庆贺一下

因为自己程度无限以及知识面的狭窄,文章中有疏漏和不足之处敬请各位老师和读者批评指正。

参考链接:DevEco Studio 3.0 Beta3 for OpenHarmony 工具简介

退出移动版