搭建鸿蒙开发环境、运行第一个鸿蒙项目、鸿蒙组件与安卓组件的简单对比 (1)

淩亂°似流年 2023-01-02 02:19 376阅读 0赞

### 搭建鸿蒙开发环境、运行第一个鸿蒙项目、鸿蒙组件与安卓组件的简单对比 ###

*  安装node.js
 *  安装DevEco Studio
 *   *  配置开发语言
     *  配置模拟器
 *  第一个鸿蒙程序
 *   *  可能出现的错误
 *  常用布局
 *   *  DirectionalLayout
     *  DependentLayout
     *   *  相对与同级组件的位置关系属性
         *  相对与父组件的位置关系属性
     *  StackLayout
 *  总结

# 安装node.js #

首先我们先在[node.js官网][node.js]下载node.js并安装![node.js][node.js 1]  
  
  
下载完成后一路next，其中可以选择安装路径，到最后点击finsh安装node.js

# 安装DevEco Studio #

鸿蒙开发的IDE的下载地址:[DevEco Studio][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center]  
  
下载完成后运行进入DevEco Studio安装向导，在如下安装选项界面勾选**DevEco Studio launcher**后，点击Next，直至安装完成。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 1]

## 配置开发语言 ##

在菜单栏中**tools->SDK Manager**中配置SDK，鸿蒙安装会自动勾选Java的SDK,若想使用C/C++或JS语言需自行勾选![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 2]

## 配置模拟器 ##

相比于安卓的模拟器，鸿蒙的模拟器是安装在云端的，对与本地的性能消耗会变小极多，对于我这种机械硬盘的渣渣机子简直友好的不行（安卓我只能通过真机调试）  
在菜单栏**tools->HVD Manager**中就可以下载他的模拟器，其中可以选择各个平台的模拟器，手机，手表，电视等等等等，而且我们程序是可以无缝的在这些设备转换的  
**(需要注意的是:想要下载鸿蒙的模拟器需要注册鸿蒙的开发者并且通过开发者的实名认证，不然是无法下载他们的模拟器的)**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 3]  
至此我们鸿蒙的开发环境已经全部配置完成了，接下来我来运行我的第一个鸿蒙程序吧

# 第一个鸿蒙程序 #

在菜单栏file->new->new project新建一个鸿蒙程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 4]

然后我们在选择手机的模拟器然后运行就可以了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 5]

## 可能出现的错误 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 6]  
若出现上图的错误，那就是你的模拟器设备和你的项目规定运行的设备不一致  
在config.json中可查找到项目该运行的平台设备  
查看规定的设备是否跟模拟器设备相同  
只需要改变deviceType的类型和模拟器相同即可运行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 7]  
按住shilt键点击deviceType即可查看到deviceType的值有多少种  
![在这里插入图片描述][2021010221073138.png]

# 常用布局 #

鸿蒙不仅是在系统UI上与安卓颇为一致，即使是代码实现上也是极为相似的  
这也有利于我们开发者可以快速的学习开发以及方向转移

## DirectionalLayout ##

这与安卓中的线性布局对标  
**在这个布局下子组件的特有属性：**  
**ohos:layout\_alignment**属性规范组件位置  
**ohos:weight**规范组件权重

**例子**

<?xml version="1.0" encoding="utf-8"?>
    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical">
    
        <Text
            ohos:id="$+id:text_helloworld"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_ability_main"
            ohos:layout_alignment="horizontal_center"
            ohos:text="Hello World"
            ohos:text_size="50"
        />
        <Text
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:layout_alignment="horizontal_center"
            ohos:text_size="50"/>
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="text1"
            ohos:background_element="$graphic:background_ability_main"
            ohos:layout_alignment="horizontal_center"
            ohos:text_size="50"
            />
    </DirectionalLayout>

Demo  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 8]

## DependentLayout ##

这与安卓中的约束布局相似  
在这个布局中可通过两种属性来规范组件位置

### 相对与同级组件的位置关系属性 ###

**ohos:above**：处于指定组件之上  
**ohos:below**：处于指定组件之下  
**ohos:left\_of**：处于指定组件之左  
**ohos:right\_of**：处于指定组件之右  
**ohos:right\_of**：处于指定组件之右  
**ohos:start\_of**：处于指定组件之前  
**ohos:end\_of**：处于指定组件之后

### 相对与父组件的位置关系属性 ###

**ohos:align\_parent\_left**：处于父组件左侧  
**ohos:align\_parent\_right**：处于父组件右侧  
**ohos:align\_parent\_start**：处于父组件开始侧  
**ohos:align\_parent\_end**：处于父组件结束侧  
**ohos:align\_parent\_top**：处于父组件上侧  
**ohos:align\_parent\_bottom**：处于父组件下侧  
**ohos:center\_in\_parent**：处于父组件中间

**例子**

<?xml version="1.0" encoding="utf-8"?>
    <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent">
        <Text
            ohos:id="$+id:top"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_parent_top="true"
            ohos:center_in_parent="true"
            ohos:background_element="$graphic:background_ability_main"
            ohos:text="top"
            ohos:text_size="50"
        />
        <Text
            ohos:id="$+id:text_helloworld"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:below="$id:top"
            ohos:center_in_parent="true"
            ohos:background_element="$graphic:background_ability_main"
            ohos:text="below"
            ohos:text_size="50"
            />
        <Text
            ohos:id="$+id:text_helloworld"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_ability_main"
            ohos:align_parent_bottom="true"
            ohos:center_in_parent="true"
            ohos:text="bottom"
            ohos:text_size="50"
            />
    </DependentLayout>

**Demo**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70]

## StackLayout ##

层叠布局，在层叠布局中先创建的组件会显示在后创建组件的下层，后创建的组件会覆盖先创建的组件，这样就可以实现一种悬浮的样式，类似于悬浮按钮

在这个布局下的可以通过**ohos:layout\_alignment**属性来规范组件位置

**例子**

<?xml version="1.0" encoding="utf-8"?>
    <StackLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:id="$+id:stack_layout"
        ohos:height="match_parent"
        ohos:width="match_parent">
    
        <Text
            ohos:id="$+id:text_blue"
            ohos:text_alignment="bottom|horizontal_center"
            ohos:text_size="24fp"
            ohos:text="txet1"
            ohos:height="400vp"
            ohos:width="400vp"
            ohos:background_element="#40FF00" />
    
        <Text
            ohos:id="$+id:text_light_purple"
            ohos:text_alignment="bottom|horizontal_center"
            ohos:text_size="24fp"
            ohos:text="text2"
            ohos:height="200vp"
            ohos:width="200vp"
            ohos:background_element="#2EFEF7" />
        <Text
            ohos:id="$+id:text_orange"
            ohos:text_alignment="center"
            ohos:text_size="24fp"
            ohos:text="text2"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:background_element="#FF0080" />
        <Button
            ohos:id="$+id:button"
            ohos:height="40vp"
            ohos:text="button"
            ohos:width="80vp"
            ohos:layout_alignment="right"
            ohos:background_element="#3399FF"/>
    </StackLayout>

**Demo**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70 1]

# 总结 #

1.鸿蒙所采用的开发模式与安卓的开发模式是类似的，这有利于我们这些安卓开发者向鸿蒙开发转移  
2.相较于安卓应用，鸿蒙开发的应用可以实现多平台共同开发及无缝的衔接，节省开发者对多平台的适配时间，有利多平台的开发

作者：张森  
[原文地址][Link 1]

[node.js]: https://nodejs.org/en/download/
[node.js 1]: /images/20221120/0ab4c57d63e14508b51f2b39b37d4270.png
[DevEco Studio]: https://developer.harmonyos.com/cn/develop/deveco-studio#download
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/59988386509442dfacedd07603079c86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/2ad2566ef4a7475eb236470699e7d767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/9b95b82b085a41af8aa79252c999246d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/d588624d7ab4409fbc4af2a7dd853439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/9badb7fb7f0f4722a2a71d2145284451.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/6f8fc0cb3351401b8b9e8eb448036a3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/4fc7ef0cc4fb444da0e0a9a996507b0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/d186cdc5a83d4255abcc07f7dd8e70b1.png
[2021010221073138.png]: /images/20221120/3dd31ceadd244af9bb6660eb5e8ead38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/ad5330d917fd425dbca149fae8766555.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70]: /images/20221120/a013572393144300baabd490f7e814f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNzAyODU3_size_16_color_FFFFFF_t_70 1]: /images/20221120/36c2bc063610482495d09a258198aad6.png
[Link 1]: https://editor.csdn.net/md/?articleId=112062620