下载掌阅APP，畅读海量书库
立即打开
至此，HarmonyOS的开发环境全部搭建完成了。接下来我们创建第一个Harmony项目。
DevEco Studio支持包括手机、车载、智慧屏、智能穿戴、轻量级智能穿戴等多设备下的HarmonyOS应用开发，提供了包括Java、JS、C/C++等多种编程语言，并支持多种语言的混合开发场景。在新建工程时，可以在DevEco Studio中选择并创建适用于各种设备的工程，并自动生成对应的工程模板和代码。具体的设备类型和支持的工程模板及开发语言的对应关系如表1.1所示。
表1.1 各设备类型和支持的工程模板及开发语言
同时，除上述所示，手机也包含7个应用模板，其中覆盖了新闻、购物等场景，有相应开发需求的开发者可以直接使用应用模板。
下面以TV为例，创建一个Java项目并在模拟器上运行。
首先，打开工程创建向导界面。如果当前没有打开任何工程，则在DevEco Studio欢迎页选择Create HarmonyOS Project。若已经打开了工程，则在上方菜单栏选择File→New→New Project。工程创建向导界面如图1.27所示。
图1.27 工程创建向导
其中，Device包含各种设备类型，Template包含各种模板及支持的语言。首先选择需要进行开发的设备类型，然后选择对应的Ability模板类型。这里以智慧屏TV为例，选择一个空的Ability模板Empty Feature Ability（Java），其支持Java语言。单击Next按钮对工程进行配置，如图1.28所示。
图1.28 工程配置
其中，Project Name表示工程的名称，可以自定义，此应用安装到设备之后也会在设备上显示该名称。Package Name表示软件包的名称，默认情况下应用的ID也会使用该名称，应用发布时，软件包名需要保持唯一性。Save Location表示工程文件的本地存储路径，无特殊要求则保持默认即可，注意存储路径中不能包含中文字符。Compatible SDK指兼容的SDK版本。配置完成后单击Finish按钮，工程即创建完成，如图1.29所示。
图1.29 工程创建成功
创建完上述项目后，DevEco Studio会自动生成Hello World项目中所需的代码，因此该项目不用自行编写代码，就可以正常运行Hello World程序。应用程序的运行需要基于设备，可以使用搭载HarmonyOS的设备，也可以使用DevEco Studio内置的模拟器。这里通过内置模拟器来运行该程序。
首先在DevEco Studio上方的菜单栏选择Tools→HVD Manager，首次使用模拟器时，需要下载相关资源。弹出下方提示框后，单击OK按钮，如图1.30所示。
图1.30 下载模拟器资源
随后浏览器会弹出华为账号的登录界面，如图1.31所示。需要先登录已完成实名认证的华为账号。这里官方推荐使用Chrome浏览器，如果使用Safari或360等其他浏览器，则需要取消“阻止跨站跟踪”和“阻止所有Cookie”功能。
图1.31 实名认证华为账号登录
返回DevEco Studio，单击Virtual Device Manager界面左下方的Refresh按钮进行授权登录，并完成下载。下载完成后会显示设备列表，如图1.32所示。
图1.32 模拟器设备列表
在设备列表中，选择TV设备，单击右侧的
按钮运行模拟器，并返回DevEco Studio主界面，单击右上角工具栏中的
按钮或按快捷键Shift+F10运行工程，在弹出的Select Deployment Target界面中选择相应的Connected Devices，并单击OK按钮，即可看到Hello World程序成功运行在TV模拟器上，如图1.33所示。
图1.33 Hello World程序运行在TV模拟器上
同时，DevEco Studio还支持多设备预览器和模拟器，在预览器中，可以实时查看应用的布局效果，同时还支持多设备的同时预览，查看同一个布局文件在不同设备上的呈现效果。这里新建一个JS工程，选择Phone设备下的Empty Feature Ability（JS），如图1.34所示。
图1.34 创建Phone设备下的JS工程
打开工程目录entry→src→main下的config.json文件，在module配置标签下的deviceType字段中，增加需要支持的设备类型，如增加TV、Wearable设备，代码如下：
{
……
"module":{
"package":"com.example.myapplication",
"name":".MyApplication",
"deviceType":[
"phone",
"tv",
"wearable"
],
……
}
}
在创建的工程目录下，打开一个entry→src→main→js→pages下的HML、CSS或者JS文件，然后在编辑窗口右上角的侧边工具栏中单击Previewer，打开预览器，如图1.35所示。或者也可以通过菜单栏选择View→Tool Windows→Previewer，打开预览器。
图1.35 单击Previewer，打开预览器
打开index.css文件，将.title下的font-size由100px变为200px，即让Hello World的文字变大，代码如下：
/*index.css*/
.container{
flex-direction:column;
justify-content:center;
align-items:center;
}
.title {
font-size:200px;
}
修改完成后，可以立即在Previewer窗口的预览器中看到界面中“您好世界”的文字实时改变，从而可以实时查看界面的布局效果。实时变化后预览器的效果如图1.36所示。
图1.36 预览器实时变化效果
在预览器窗口中，可以通过预览器顶部的设备图标切换当前设备，打开Multi-Preview开关，可以同时查看多设备上的应用的运行效果。打开Multi-Preview开关，多设备预览效果如图1.37所示。
图1.37 跨设备实时预览