十分钟完成实战

开发环境配置完成后，请参考创建和运行Hello World创建工程。设备类型以“Phone”为例：

• 使用JS语言开发（传统代码方式），模板选择“Empty Ability”，Language选择JS。
• 使用JS语言开发（低代码方式），模板选择“Empty Ability”，Language选择JS。
• 使用eTS语言开发，模板选择“Empty Ability”，Language选择eTS。
• 使用Java语言开发，模板选择“Empty Ability”，Language选择Java。

创建工程

DevEco Studio开发环境配置完成后，可以通过运行HelloWorld工程来验证环境设置是否正确。以Phone工程为例，在Phone的远程模拟器中运行该工程。

1. 打开DevEco Studio，在欢迎页点击Create Project，创建一个新工程。
2. 根据工程创建向导，选择需要的Ability工程模板，然后点击Next。关于工程模板的介绍和支持的设备类型，请参考工程模板和开发语言介绍。

3. 填写工程相关信息，Device Type选择Phone，Language选择Java ，其他保持默认值即可，点击Finish。关于各个参数的详细介绍，请参考创建一个新的工程。

4. 工程创建完成后，DevEco Studio会自动进行工程的同步，同步成功如下图所示。
   

使用模拟器运行HelloWorld

DevEco Studio提供远程模拟器和本地模拟器，本示例以远程模拟器为例进行说明。关于本地模拟器的使用请参考1.6.1-使用Local Emulator运行应用。

DevEco Studio提供模拟器供开发者运行和调试HarmonyOS应用/服务。

1. 在DevEco Studio菜单栏，点击Tools > Device Manager。
2. 在Remote Emulator页签中点击Login，在浏览器中弹出华为开发者联盟帐号登录界面，请输入已实名认证的华为开发者联盟帐号的用户名和password进行登录（查看远程模拟器登录常见问题）。
   说明

推荐使用最新版本Chrome浏览器，如果使用Safari、360等其他浏览器，要取消阻止跨站跟踪和阻止所有Cookie功能。

3. 登录后，请点击界面的允许按钮进行授权。
   

4. 在设备列表中，选择Phone设备P40，并点击按钮，运行模拟器。
   

5. 点击DevEco Studio工具栏中的按钮运行工程，或使用默认快捷键Shift+F10（Mac为Control+R）运行工程。
   

6. DevEco Studio会启动应用/服务的编译构建，完成后应用/服务即可运行在模拟器上。
   

已成功运行了第一个HarmonyOS应用/服务.

是不是很简单，是不学会啦！～

工程创建完成后，使用预览器或Phone模拟器运行该工程。

完成上述操作后，请参考使用JS语言开发（传统代码方式）、使用JS语言开发（低代码方式）、使用eTS语言开发、使用Java语言开发继续下一步的学习。

使用预览器查看应用/服务效果

在HarmonyOS应用/服务开发过程中，DevEco Studio为开发者提供了预览器的功能，可以查看应用/服务的UI界面效果，支持Java和JS应用/服务的预览。预览器支持布局代码的实时预览，只需要将开发的源代码进行保存，就可以通过预览器实时查看应用/服务运行效果，方便开发者随时调整代码。需要注意的是，由于Windows系统和真机设备的字体库存在差异，可能会出现预览器界面中的字体与真机运行效果的字体存在差异。

JS预览器同时支持Phone、Tablet、TV、Wearable、Lite Wearable和Smart Vision设备的JS应用/服务“实时预览”和“动态预览”。

• 实时预览：只要在布局文件中保存了修改的源代码，在预览器中就可以实时查看布局效果。

• 动态预览：在预览器界面，可以在预览器中操作应用/服务的交互动作，如点击事件、跳转、滑动等，与应用/服务运行在真机设备上的交互体验一致。
  

查看eTS组件预览效果

Phone、Tablet、Car的eTS应用/服务支持组件预览，要求compileSdkVersion为8或以上。组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用@Preview装饰10个自定义组件。

@Preview的使用参考如下：

@Preview
@Component
struct Component1 {
    build() {
        Column() {
            Row() {
                Text('Hello Component1')
                    .fontSize("50lpx")
                    .fontWeight(FontWeight.Bold)
            }
        }
    }
}

以上示例的组件预览效果如下图所示：

请注意，如果被预览的组件是依赖参数注入的组件，建议的预览方式是：定义一个组件片段，在该片段中声明将要预览的组件，以及该组件依赖的入参，并在组件片段上标注@Preview注解，以表明将预览该片段中的内容。例如，要预览如下组件：

@Component
struct Title {
  context: string
  build() {
    Text(this.context)
  }
}

建议按如下方式预览：

@Preview
@Component    //定义组件片段TitlePreview
struct TitlePreview {
  build() {
    Title({ context: 'MyTitle' })    //在该片段中声明将要预览的组件Title，以及该组件依赖的入参 {context: ’MyTitle’}
  }
}

学到这里差不多已经入门了哟，小伙伴们！～

加油

好了，今天就到这儿啦！