本文来自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 工具简介
发表回复