鸿蒙初体验（一）：从安装到第一个程序Hello HarmonyOS

小嵌

鸿蒙初体验（一）：从安装到第一个程序Hello HarmonyOS, 华为鸿蒙OS 2.0就不多介绍了

更多关于JS API的写法可以参考：

鸿蒙初体验（二）：使用JS FA应用的chart组件画一个简单线性图

鸿蒙初体验（三）：使用JS FA应用写一个简单的猜数字游戏




一、源码和应用下载地址 鸿蒙的源码地址： https://openharmony.gitee.com

华为开发者联盟： https://developer.huawei.com/consumer/cn

官方文档： https://developer.harmonyos.com/ ... ut-0000001050729536

开发应用下载： https://developer.harmonyos.com/cn/develop/deveco-studio#download


二、安装与运行

1.运行环境要求 DevEco Studio只支持Windows版本，为保证DevEco Studio正常运行，建议您的电脑配置满足如下要求：

• 操作系统：Windows10 64位
  
• 内存：8GB及以上
  
• 硬盘：100gB及以上
  
• 分辨率：1280*800像素及以上
    
  

目前DevEco Studio 2.0才支持HarmonyOS开发，DevEco Studio 1.0暂不支持


2.下载和安装Node.js Node.js软件仅在使用到JS语言开发HarmonyOS应用时才需要安装。使用其它语言开发，不用安装Node.js，请跳过此章节。 登录Node.js官方网站，下载Node.js软件包。请选择LTS版本，Windows 64位对应的软件包。



点击下载后的软件包进行安装，全部按照默认设置点击Next，直至Finish。安装过程中，Node.js会自动在系统的path环境变量中配置node.exe的目录路径。
3.安装和运行DevEco Studio 2.0 开发应用下载：https://developer.harmonyos.com/cn/develop/deveco-studio#download DevEco Studio的编译构建依赖JDK，DevEco Studio预置了Open JDK，版本为1.8，安装过程中会自动安装JDK。
安装完成启动会提示下载SDK，点击取消，搜索SDK，重新自定义SDK路径。




三、第一个项目 Hello HarmonyOS

• 打开DevEco Studio，在欢迎页点击Create HarmonyOS Project，创建一个新工程。
    
  

• 可以看到这里有三种类型选择，我们选择TV版的Empty Feature Ability（Java），点击Next。
  
• 填写项目相关信息，保持默认值即可，点击Finish。
  首次创建工程时，会自动下载Gradle工具（Gradle下载失败如何解决?），时间较长，请耐心等待。
    
  
• 在DevEco Studio菜单栏，点击Tools > HVD Manager。首次使用模拟器，需下载模拟器相关资源，请点击OK，等待资源下载完成后，点击模拟器界面左下角的Refresh按钮。（查看使用远程模拟器的常见问题）
    
  

• 在浏览器中弹出华为帐号登录界面，请输入已实名认证的华为帐号的用户名和密码进行登录。
  
    
  

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

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

运行成功如上图所示
三、我的第一个页面 下面我们用XML的方式编写了一个包含文本和按钮的页面。

• 在“Project”窗口，打开“entry > src > main > resources > base”，右键点击“base”文件夹，选择“New > Directory”，命名为“layout”。
  
• 右键点击“layout”文件夹，选择“New > File”，命名为“main_layout.xml”。
  
• 打开“main_layout.xml”文件，添加一个文本和一个按钮，示例代码如下：
    
  

• <?xml version=“1.0“ encoding=“utf-8“?>
    
  
• <DependentLayout
    
  
•         xmlns:ohos=“http://schemas.huawei.com/res/ohos“
    
  
•         ohos:width=“match_parent“
    
  
•         ohos:height=“match_parent“
    
  
•         ohos:background_element=“#ffffff“>
    
  
•     <Text
    
  
•             ohos:id=“$+id:text“
    
  
•             ohos:width=“match_content“
    
  
•             ohos:height=“match_content“
    
  
•             ohos:center_in_parent=“true“
    
  
•             ohos:text=“Hello HarmonyOS“
    
  
•             ohos:text_color=“#000000“
    
  
•             ohos:text_size=“32fp“/>
    
  
•     <Button
    
  
•             ohos:id=“$+id:button“
    
  
•             ohos:width=“match_content“
    
  
•             ohos:height=“match_content“
    
  
•             ohos:text_size=“19fp“
    
  
•             ohos:text=“进入“
    
  
•             ohos:top_padding=“8vp“
    
  
•             ohos:bottom_padding=“8vp“
    
  
•             ohos:right_padding=“80vp“
    
  
•             ohos:left_padding=“80vp“
    
  
•             ohos:text_color=“white“
    
  
•             ohos:background_element=“$graphic:button_element“
    
  
•             ohos:center_in_parent=“true“
    
  
•             ohos:align_parent_bottom=“true“/>
    
  
• </DependentLayout>
    
  
• 
  

复制代码

• 上述按钮的背景是通过“button_element”来显示的，需要在“base”目录下创建“graphic”文件夹，在“graphic”文件夹中新建一个“button_element.xml”文件。
  
     
    
  

• <?xml version=“1.0“ encoding=“utf-8“?>
    
  
• <shape
    
  
•         xmlns:ohos=“http://schemas.huawei.com/res/ohos“
    
  
•         ohos:shape=“oval“>
    
  
•     <solid
    
  
•             ohos:color=“#007DFF“/>
    
  
• </shape>
    
  
• 
  

复制代码


如果DevEco Studio提示xmlns字段错误，请忽略，不影响后续操作。

• 在“Project”窗口中，选择“entry > src > main > java > com.example.helloworld > slice” ，打开“MainAbilitySlice.java”文件。重写onStart（）方法加载XML布局，示例代码如下：
    
  

• package com.example.myapplication.slice;
    
  
• 
    
  
• import com.example.myapplication.ResourceTable;
    
  
• import ohos.aafwk.ability.AbilitySlice;
    
  
• import ohos.aafwk.content.Intent;
    
  
• 
    
  
• public class MainAbilitySlice extends AbilitySlice {
    
  
• 
    
  
•     @Override
    
  
•     public void onStart（Intent intent） {
    
  
•         super.onStart（intent）;
    
  
•         super.setUIContent（ResourceTable.Layout_main_layout）; // 加载XML布局
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onActive（） {
    
  
•         super.onActive（）;
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onForeground（Intent intent） {
    
  
•         super.onForeground（intent）;
    
  
•     }
    
  
• }
    
  
• 
  

复制代码

效果图如下




四、我的第二个页面 这里用创建布局的方式，来编写我的第二个页面。

• 在“Project”窗口，打开“entry > src > main > java”，右键点击“com.example.myapplication”文件夹，选择“New > Ability > Empty Feature Ability（Java）”。
    
  

配置Ability时，将“Page Name”设置为“SecondAbility”，点击“Finish”。创建完成后，可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。



   

• 编写SecondAbilitySlice文件
    
  

• package com.example.myapplication.slice;
    
  
• 
    
  
• import ohos.aafwk.ability.AbilitySlice;
    
  
• import ohos.aafwk.content.Intent;
    
  
• import ohos.agp.colors.RgbColor;
    
  
• import ohos.agp.components.DependentLayout;
    
  
• import ohos.agp.components.DependentLayout.LayoutConfig;
    
  
• import ohos.agp.components.Text;
    
  
• import ohos.agp.components.element.ShapeElement;
    
  
• import ohos.agp.utils.Color;
    
  
• 
    
  
• import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;
    
  
• import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;
    
  
• 
    
  
• public class SecondAbilitySlice extends AbilitySlice {
    
  
• 
    
  
•     @Override
    
  
•     public void onStart（Intent intent） {
    
  
•         super.onStart（intent）;
    
  
•         // 声明布局
    
  
•         DependentLayout myLayout = new DependentLayout（this）;
    
  
•         // 设置布局大小
    
  
•         myLayout.setWidth（MATCH_PARENT）;
    
  
•         myLayout.setHeight（MATCH_PARENT）;
    
  
•         ShapeElement element = new ShapeElement（）;
    
  
•         element.setRgbColor（new RgbColor（255, 255, 255））;
    
  
•         myLayout.setBackground（element）;
    
  
• 
    
  
•         // 创建一个文本
    
  
•         Text text = new Text（this）;
    
  
•         text.setText（“页面跳转成功“）;
    
  
•         text.setTextColor（Color.BLUE）;
    
  
•         text.setWidth（MATCH_PARENT）;
    
  
•         text.setTextSize（55）;
    
  
•         // 设置文本的布局
    
  
•         DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig（MATCH_CONTENT,MATCH_CONTENT）;
    
  
•         textConfig.addRule（LayoutConfig.CENTER_IN_PARENT）;
    
  
•         text.setLayoutConfig（textConfig）;
    
  
•         myLayout.addComponent（text）;
    
  
• 
    
  
•         super.setUIContent（myLayout）;
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onActive（） {
    
  
•         super.onActive（）;
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onForeground（Intent intent） {
    
  
•         super.onForeground（intent）;
    
  
•     }
    
  
• }
    
  
• 
  

复制代码


五、实现页面跳转 打开第一个页面的“MainAbilitySlice.java”文件，重写onStart（）方法添加按钮的响应逻辑，实现点击按钮跳转到下一页，示例代码如下：

• package com.example.myapplication.slice;
    
  
• 
    
  
• import com.example.myapplication.ResourceTable;
    
  
• import ohos.aafwk.ability.AbilitySlice;
    
  
• import ohos.aafwk.content.Intent;
    
  
• import ohos.aafwk.content.Operation;
    
  
• import ohos.agp.components.*;
    
  
• 
    
  
• public class MainAbilitySlice extends AbilitySlice {
    
  
• 
    
  
•     @Override
    
  
•     public void onStart（Intent intent） {
    
  
•         super.onStart（intent）;
    
  
•         super.setUIContent（ResourceTable.Layout_main_layout）;
    
  
•         Button button = （Button） findComponentById（ResourceTable.Id_button）;
    
  
• 
    
  
•         if （button != null） {
    
  
•             // 为按钮设置点击回调
    
  
•             button.setClickedListener（new Component.ClickedListener（） {
    
  
•                 @Override
    
  
•                 public void onClick（Component component） {
    
  
•                 Intent secondIntent = new Intent（）;
    
  
•                 // 指定待启动FA的bundleName和abilityName
    
  
•                 Operation operation = new Intent.OperationBuilder（）
    
  
•                         .withDeviceId（““）
    
  
•                         .withBundleName（“com.example.myapplication“）
    
  
•                         .withAbilityName（“com.example.myapplication.SecondAbility“）
    
  
•                         .build（）;
    
  
•                 secondIntent.setOperation（operation）;
    
  
•                 startAbility（secondIntent）; // 通过AbilitySlice的startAbility接口实现启动另一个页面
    
  
•                 }
    
  
•             }）;
    
  
•         }
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onActive（） {
    
  
•         super.onActive（）;
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onForeground（Intent intent） {
    
  
•         super.onForeground（intent）;
    
  
•     }
    
  
• }
    
  
• 
  

复制代码

就可以通过点击第一个页面的“进入”来到第二个页面了
六、文档学习 我们可以通过HarmonyOS的API文档进行学习和高效开发

这里以Java API为例，修改一下我的第二个页面SecondAbilitySlice 进入文档，我们打开“Java API> ohos.agp.components> class> TickTimer” TickTimer顾名思义也就是计时器啦



往下滑可以看到他已经实现的方法



修改SecondAbilitySlice

• package com.example.myapplication.slice;
    
  
• 
    
  
• import ohos.aafwk.ability.AbilitySlice;
    
  
• import ohos.aafwk.content.Intent;
    
  
• import ohos.agp.colors.RgbColor;
    
  
• import ohos.agp.components.DependentLayout;
    
  
• import ohos.agp.components.DependentLayout.LayoutConfig;
    
  
• import ohos.agp.components.Text;
    
  
• import ohos.agp.components.element.ShapeElement;
    
  
• import ohos.agp.utils.Color;
    
  
• 
    
  
• import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;
    
  
• import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;
    
  
• 
    
  
• public class SecondAbilitySlice extends AbilitySlice {
    
  
• 
    
  
•     @Override
    
  
•     public void onStart（Intent intent） {
    
  
•         super.onStart（intent）;
    
  
•         // 声明布局
    
  
•         DependentLayout myLayout = new DependentLayout（this）;
    
  
•         // 设置布局大小
    
  
•         myLayout.setWidth（MATCH_PARENT）;
    
  
•         myLayout.setHeight（MATCH_PARENT）;
    
  
•         ShapeElement element = new ShapeElement（）;
    
  
•         element.setRgbColor（new RgbColor（255, 255, 255））;
    
  
•         myLayout.setBackground（element）;
    
  
• 
    
  
•         // 创建一个文本
    
  
•         Text text = new Text（this）;
    
  
•         text.setText（“页面跳转成功“）;
    
  
•         text.setTextColor（Color.BLACK）;
    
  
•         text.setWidth（MATCH_PARENT）;
    
  
•         text.setTextSize（55）;
    
  
•         // 创建一个计时器
    
  
•         TickTimer tickTimer = new TickTimer（this）;
    
  
•         tickTimer.start（）;
    
  
•         // 设置文本的布局
    
  
•         DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig（MATCH_CONTENT,MATCH_CONTENT）;
    
  
•         textConfig.addRule（LayoutConfig.ALIGN_PARENT_BOTTOM）;
    
  
•         text.setLayoutConfig（textConfig）;
    
  
•         myLayout.addComponent（text）;
    
  
•         // 设置计时器的布局
    
  
•         textConfig.addRule（LayoutConfig.CENTER_IN_PARENT）;
    
  
•         tickTimer.setLayoutConfig（textConfig）;
    
  
•         myLayout.addComponent（tickTimer）;
    
  
• 
    
  
•         super.setUIContent（myLayout）;
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onActive（） {
    
  
•         super.onActive（）;
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onForeground（Intent intent） {
    
  
•         super.onForeground（intent）;
    
  
•     }
    
  
• }
    
  
• 
  

复制代码



如果不熟悉Java写法的可以从JS API开始 更多关于JS API的写法可以参考：

鸿蒙初体验（二）：使用JS FA应用的chart组件画一个简单线性图

鸿蒙初体验（三）：使用JS FA应用写一个简单的猜数字游戏

官方文档写得很清楚，而且是中文的，学起来也很方便


七、总结 HarmonyOS总体语法还是和安卓相似的，学习安卓的同学可以了解一下。

目前HarmonyOS应用的领域还是TV端和Wearable端，听过明年有希望安装在华为手机上成为手机系统。

HarmonyOS2.0发布会指出HarmonyOS2.0拥有跨设备、服务流转、极速直达、可视可说等特性。

发展趋势毋庸置疑，还是5G和物联网。

虽然目前鸿蒙OS2.0对比苹果iOS和谷歌安卓还是略低一筹，也还没应用在手机端不过据说HarmonyOS2.0已经达到安卓的70%到80%水平。

鸿蒙系统并不是基于安卓系统开发，而是一个全新、基于5G物联网技术构建独立操作系统，并且还能兼容安卓，对安卓开发者也十分的和谐。

同时，谷歌正在开发自己的 fuchsia的新系统，也是应用于5G和物联网。

换言之，安卓是4G时代的产物，鸿蒙要对标的不是安卓，而是同样基于5G应用和物联网时代开发的谷歌 fuchsia系统。

1+8+n，万物互联，指日可待！

以上就是我这段时间的摸索过程，和所思所想，希望能帮助你了解HarmonyOS2.0，也欢迎感兴趣的小伙伴一起交流学习。

文章转自：文化沙漠麦七