鸿蒙操作系统应用开发实践
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4　创建第一个HarmonyOS项目

至此，HarmonyOS的开发环境全部搭建完成了。接下来我们创建第一个Harmony项目。

DevEco Studio支持包括手机、车载、智慧屏、智能穿戴、轻量级智能穿戴等多设备下的HarmonyOS应用开发，提供了包括Java、JS、C/C++等多种编程语言，并支持多种语言的混合开发场景。在新建工程时，可以在DevEco Studio中选择并创建适用于各种设备的工程，并自动生成对应的工程模板和代码。具体的设备类型和支持的工程模板及开发语言的对应关系如表1.1所示。

表1.1　各设备类型和支持的工程模板及开发语言

同时，除上述所示，手机也包含7个应用模板，其中覆盖了新闻、购物等场景，有相应开发需求的开发者可以直接使用应用模板。

下面以TV为例，创建一个Java项目并在模拟器上运行。

1.4.1　创建第一个项目

首先，打开工程创建向导界面。如果当前没有打开任何工程，则在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　工程创建成功

1.4.2　模拟器运行及预览

创建完上述项目后，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　跨设备实时预览

上一章目录下一章