创建JS工程
说明
请使用DevEco Studio V2.2 Beta1及更高版本。

低代码开发功能仅适用于Phone设备的JS工程，且compileSdkVersion必须为6及以上。

打开DevEco Studio，创建一个新工程，选择支持Phone的JS模板，如Empty Ability(JS):
点击放大

在工程配置向导中，Device Type只能选择Phone，其他参数根据实际需要设置即可，然后点击Finish等待工程同步完成。
点击放大

创建第一个页面
在Project窗口，选择工程中的“entry > src > main > js > default > pages.index”，单击鼠标右键，选择“New > JS Visual”。
点击放大

勾选“Update compileSdkVersion”（若compilesSdk版本已升级，则不会出现该选项）。创建完成后，可以看到“entry > src > main > supervisual> default > pages > page > page.visual”的文件目录结构如下：

删除工程运行默认的入口文件夹：删除“entry > src > main > js> default > pages > index”文件夹。操作后的工程结构目录如下：

第一个页面内有一个文本和一个按钮，通过Text和Button组件来实现。
打开“page.visual”文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有组件。选中画布，点击右侧属性样式栏中的样式图标（Flex），设置画布的JustifyContent样式为center，使得其子组件在主轴上居中显示；设置画布的AlignItems样式为center，使得其子组件在交叉轴上居中显示。操作如下所示：
点击放大

选中UI Control中的Text组件，将其拖至中央画布区域。点击右侧属性样式栏中的属性图标（Properties），设置Text组件的Content属性为“Hello World”；点击右侧属性样式栏中的样式图标（Feature），设置组件的FontSize样式为60px，使得其文字放大；设置组件的TextAlign样式为center，使得组件文字居中显示。再选中画布上的Text组件，拖动放大。操作如下所示：
点击放大

选中UI Control中的Button组件，将其拖至Text组件下面。点击右侧属性样式栏中的属性图标（Properties），设置Button组件的Value属性为“Next”，点击右侧属性样式栏中的样式图标（Feature），设置组件的FontSize样式为39px，使得其文字放大；再选中画布上Button组件，拖动放大。操作如下所示：
点击放大

使用预览器或模拟器运行项目，效果如下图所示：
点击放大

创建另一个页面
在Project窗口，选择工程中的“entry > src > main > js > default > pages.page”，单击鼠标右键，选择“New > JS Visual”。创建后的page2.visual文件结构如下：

第二个页面上有一个文本，通过Text组件来实现。
打开“page2.visual”文件，删除画布原有组件。选中画布，设置画布的JustifyContent样式为center，设置画布的AlignItems样式为center。操作如下所示：
点击放大

选中Text组件拖至画布，设置Text组件的Content属性为“Hi there”，设置组件的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事件，操作示例如下图：
点击放大

再次使用预览器或模拟器运行项目，效果如下图所示：
点击放大

想要深入了解可视化开发的更多内容，请参见低代码开发。

恭喜你，至此已成功完成HarmonyOS快速入门-使用可视化开发。