更多内容请访问：与华为官方共建的鸿蒙技术社区https://ost.51cto.com本文来自OpenHarmonyGrowthPlanThesisClubGroup11的PIMF（PreeminentInputMethodFramework）。PIMF是一个优秀的输入法框架。笔者阅读文档，尝试使用DevEcoStudio3.0Beta3forOpenHarmony开发低代码的OpenHarmony应用。前言继2022年3月30日OpenHarmony3.1Release发布后，华为于3月31日发布了OpenHarmony的最新IDE工具DevEcoStudio3.0Beta3。（DevEcoStudio3.0Beta3是第一个支持OpenHarmony应用和服务开发的版本，改变了之前HarmonyOS和OpenHarmony共享IDE的情况）。DevEcoStudio3.0Beta3作为支持OpenHarmony应用和服务开发的IDE，具有以下能力和特点：智能代码编辑：代码高亮、代码智能补全、代码错误检查、代码自动跳转、代码格式化、代码搜索、代码改进编写效率。低代码开发：丰富的UI界面编辑能力，支持组件自由拖放和可视化数据绑定，可快速预览效果，所见即所得，支持卡片零代码开发，提高界面开发效率。多端双向实时预览：支持UI界面代码的双向预览、实时预览、动态预览、组件预览、多端设备预览，方便快速查看运行效果代码。全新构建系统：借助Hvigor构建工具，一键编译打包应用和服务，更好的支持eTS/JS开发。一站式信息获取：DevEcoStudio基于开发者了解、学习、开发、寻求帮助的用户旅程，提供一站式信息获取平台，高效支持开发者活动。高效的代码调试：提供TS、JS、C/C++代码断点设置、单步执行、变量查看等调试能力，提高应用和业务问题分析效率。结果（实现简单的页面跳转）搭建开发环境1.官方文档指导??????????????????????????????????????????????????以下两种开发方式：直接新建一个支持低代码开发的项目进行开发。本文以此方法为例。在现有项目中，创建用于开发的Visual文件。下面我们以创建一个新项目进行低代码开发为例。创建一个支持低代码开发的新项目1.打开项目创建向导（File>New>CreateProject）并创建一个新项目。2、项目模板选择“清空能力”，然后点击下一步进行下一步。3、填写项目配置信息，打开“EnableSuperVisual”开关，UISyntax选择“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：可视化文件存放低代码页面的数据模型。双击文件打开可视化开发设计的低代码页面。如果创建了多个低代码页面，pages目录下会生成多个页面文件夹和对应的可视化文件。写好第一页项目同步完成后，第一页有容器和文本（HelloWorld）显示。为了更详细的了解低代码开发，我们删除了画布原有的模板组件，从头开始完成页面的添加和设置。第一页有容器、文本和按钮，分别由Div、Text和Button组件实现。1.删??除画布原有的模板组件。打开“index.visual”文件，选中画布中的组件，点击鼠标右键，选择删除，即可删除画布原有的模板组件。2、添加容器，设置Div容器的样式和属性。在UIControl中选择Div组件并将其拖到画布上。点击右侧属性样式栏中的样式图标（General），将Div组件的高度设置为100%，使其充满屏幕。点击右侧属性样式栏中的样式图标（Flex），将Div组件的FlexDirection样式设置为column，使Div的主轴垂直；将Div组件的JustifyContent样式设置为居中，使其子组件在主轴上居中；设置Div组件的AlignItems样式为居中，使其子组件在横轴上居中显示。3.添加文字。在UIControl中选中Text组件，将其拖到Div组件的中心区域。点击右侧属性样式栏中的属性图标（Properties），将Text组件的Content属性设置为“Low-codeentry”。单击右侧属性样式栏中的样式图标。(Feature)，将组件的FontSize样式设置为60px，放大文字；将组件的TextAlign样式设置为居中，使组件的文本居中。然后选择画布上的文本组件并拖动以放大它。4.添加按钮。在UIControl中选择Button组件并将其拖到Text组件下。单击右侧属性样式栏中的属性图标（Properties），将Button组件的Value属性设置为“一键输入”。点击右侧属性样式栏中的样式图标（Feature），将组件的FontSize样式设置为40px，放大其文字。然后在画布上选择Button组件并拖动以放大它。5.打开预览器查看效果。编写第二页1.创建第二页。在“Project”窗口，打开“entry>src>main>js>MainAbility”，右击pages文件夹，选择“New>Visual”，命名为“second”，点击Finish完成第二页2、接下来的操作步骤和第一页完全一样，操作稍微省略，第二页效果如下：实现页面跳转，页面间导航可以通过页面路由，页面路由路由器根据页面uri找到目标页面，从而实现跳转。要使用页面路由，请导入路由模块。1.第一页跳转到第二页。在第一页，跳转按钮绑定onclick方法，当点击按钮时，跳转到第二页。JS文件和可视化文件需要同时处理。index.js示例如下：exportdefault{onclick(){router.push({uri:'pages/second/second',})}}"index.viusal":打开"index.visual"，选择画布上的Button组件。点击右侧属性样式栏中的事件图标（Events），用鼠标点击Click事件的输入框，选择onclick，如下图：2、第二页返回第一页。在第二页中，返回按钮绑定了back方法，当点击该按钮时，返回到第一页。js文件和visua文件需要同时处理。second.js示例如下：exportdefault{back(){router.back()}}"second.viusal":打开"second.visual"，选中画布上的Button组件。点击右侧属性样式栏中的事件图标（Events），用鼠标点击Click事件的输入框，选择返回。预览查看效果打开index.visual或index.js文件，点击预览器。更多信息请访问：与华为官方共建的鸿蒙技术社区https://ost.51cto.com
