HarmonyOS DevEco Studio 之低代码语言开发体验

低代码开发方式，即通过可视化界面开发方式快速构建布局、编辑UI界面，可有效降低用户的上手成本并提升用户构建UI界面的效率。

开发使用DevEco Studio 3.0.0.601版本

创建JS工程

1.打开DevEco Studio，创建一个新工程，选择支持Phone/Tablet的模板，如Empty Ability:

2.在工程配置向导中，选择Language为JS，Device Type选择Phone/Tablet，其他参数根据实际需要设置即可，然后点击Finish等待工程同步完成。

创建第一个页面

1.删除工程运行默认的入口文件夹：“entry > src > main > js> default > pages > index”文件夹。操作如下所示：

2.在Project窗口，选择工程中的“entry > src > main > js > default > pages”，单击鼠标右键，选择“New > JS Visual”。操作如下所示：

3.创建完成后，点击提示框中的“Confirm”按钮，可以看到“entry > src > main > supervisual> default > pages > page > page.visual”的文件目录结构如下：

第一个页面内有一个容器、文本和一个按钮，通过Div、Text和Button组件来实现。

• 打开“page.visual”文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有模板组件。操作如下所示：
  

选中UI Control中的Div组件，将其拖至画布。

点击右侧属性样式栏中的样式图标（General），设置Div组件的高度Height为100%，使其占满屏幕；

点击右侧属性样式栏中的样式图标（Flex），设置Div组件的FlexDirection样式为column，使Div的主轴垂直；

设置Div组件的JustifyContent样式为center，使得其子组件在主轴上居中显示；

设置Div组件的AlignItems样式为center，使得其子组件在交叉轴上居中显示。

选中UI Control中的Text组件，将其拖至Div组件的中央区域。

点击右侧属性样式栏中的属性图标（Properties），设置Text组件的Content属性为“Hello World”；

点击右侧属性样式栏中的样式图标（Feature），设置组件的FontSize样式为60px，使得其文字放大；

设置组件的TextAlign样式为center，使得组件文字居中显示。

再选中画布上的Text组件，拖动放大。

选中UI Control中的Button组件，将其拖至Text组件下面。

点击右侧属性样式栏中的属性图标（Properties），设置Button组件的Value属性为“Next”

点击右侧属性样式栏中的样式图标（Feature），设置组件的FontSize样式为39px，使得其文字放大；

再选中画布上的Button组件，拖动放大。

试用预览器预览项目 报错

电脑是win7的  现在里面的node.js Node.js is only supported on Windows 8.1, Windows Server 2012 R2, or higher.

改为使用模拟器运行项目看看

还是报错

可能电脑系统版本太低了

虽然不能预览查看，不过还是继续把后续的操作来一遍

3.复制一下文件夹 重命名为page2

选中Text组件，拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标（Properties），设置Text组件的Content属性为“Hi there”；点击右侧属性样式栏中的样式图标（Feature），设置组件的FontSize样式为60px；设置组件的TextAlign样式为center。再选中画布上的Text组件，拖动放大。

实现页面跳转

在Project窗口，打开工程中的“entry > src > main > js > default > pages > page > page.js”,，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下：

import router from '@system.router';  

export default {     
    launch() {         
        router.push ({             
            uri:'pages/page2/page2', // 指定要跳转的页面         
        })     
    } 
}

打开“page.visual”，选中画布上的Button组件。

点击右侧属性样式栏中的事件图标（Events），鼠标点击Click事件的输入框，选择launch事件，

再次使用模拟器运行项目应该就可以实现跳转了。