HarmonyOS应用开发-搭建开发环境

本文介绍如何搭建 HarmonyOS 应用的开发环境,介绍下载安装 DevEco Studio 开发工具和 SDK 的详细流程。华为鸿蒙 DevEco Studio 是面向全场景的一站式集成开发环境,面向全场景多设备,提供一站式的分布式应用开发平台,支持分布式多端开发、分布式多端调测、多端模拟仿真,提供全方位的质量与安全保障。

一、下载安装 DevEco Studio

1、官网下载 DevEco Studio

官网:HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

下载 DevEco Studio 3.1.1 Release 最新版本。

下载完成后我们解压压缩包,点击启动exe安装程序。


2、安装 DevEco Studio

启动安装exe程序,进入安装界面欢迎页。

我们点击Next下一步。

选择安装路径,这里根据大家自己的喜好选择路径安装即可,需要2GB的存储空间。

下一步,我们勾选 "生成快捷方式" 和 "添加到path环境变量" 。

这里默认文件夹名,点击安装。

完成安装,需要对电脑重启。


二、启动 DevEco Studio

1、安装 Node.js 和 ohpm

首次运行 DevEco Studio 会来到这个页面。

HarmonyOS应用开发需要我们的电脑上安装 Node.js 和 ohpm (鸿蒙生态三方库的包管理工具)

这里华为官方提供了镜像,如果本机上之前没有装过,直接勾选 install 然后下一步即可。


2、安装HarmonyOS SDK

基础组件安装后,我们需要安装HarmonyOS的SDK。HarmonyOS SDK提供应用及服务开发所需的一系列系统开放能力,包括框架、Ability、分布式服务、安全、方舟编译器、HMS Core、基础软件服务、硬件服务等。

这里选择安装路径即可,我直接默认路径,点击下一步。

这个页面展示了所有需要安装的包,点击下一步安装。

几分钟后安装完成。


三、新建测试项目

1、通过模板创建项目

我们选择 Empty Ability 模板新建一个测试项目。

Empty Ability 模板是一个空白模板,它支持手机、平板、手表等多种鸿蒙终端运行。

2、勾选Stage模式

勾选Stage模式。Satge模式已经是 API 9 之后的默认勾选模式。

这里科普一下FA模型和Stage模型的区别:

API 8及以前的接口基于FA模型提供;从API 9开始,OpenHarmony主推Stage模型。 FA模型与Stage模型是两套不同的应用模型,他们拥有各自的组件。

  • FA模型:OpenHarmony API 7开始支持的模型,提供三种应用组件,分别是PageAbility、ServiceAbility和DataAbility。
  • Stage模型:OpenHarmony API 9开始新增的模型,是目前主推且会长期演进的模型。在该模型中,由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的"舞台",因此称这种应用模型为Stage模型。提供了两种应用组件,分别是UIAbility和ExtensionAbility。

3、勾选低代码开发选项

开启Super Visual低代码模式,这可以帮助我们快速建立起一个应用。

低代码开发是DevEco Studio为HarmonyOS开发者提供的可视化页面的开发方式,具备丰富的UI页面编辑能力,开发者可以在图形化的用户界面上自由拖拽组件、完成数据的参数化配置,还能实时预览开发页面的效果,所见即所得。

低代码开发效果示例:

低代码开发为我们开发者提供了UI界面开箱即用的组件,通过简单拖、拉、拽和可视化数据绑定的操作方式,快速开发用户界面。不仅可以减少键入的代码量,降低开发成本,还提升了页面开发效率,助力高效开发。


四、运行测试项目

1、创建测试页面

这里我通过低代码组件随便做了一个登录页。我们低代码组件的改动体现在index.visual上。

index.visual代码我提供出来给大家参考:

javascript 复制代码
{
    "document": {
        "VisualVersion": "12",
        "type": "ETS",
        "custom": false,
        "path": "/entry/src/main/supervisual/pages/Index"
    },
    "visualModel": {
        "dataType": "VisualModel",
        "value": {
            "propertyStorage": {
                "dataType": "Map",
                "value": {}
            },
            "dynamicPropertyStorage": {
                "dataType": "Map",
                "value": {}
            },
            "mediaPropertyStorage": {
                "dataType": "Map",
                "value": {}
            },
            "dynamicMediaPropertyStorage": {
                "dataType": "Map",
                "value": {}
            },
            "property": {
                "dataType": "Map",
                "value": {
                    "width": "100%",
                    "height": "100%"
                }
            },
            "dynamicProperty": {
                "dataType": "Map",
                "value": {}
            },
            "children": [
                {
                    "dataType": "VisualModel",
                    "value": {
                        "propertyStorage": {
                            "dataType": "Map",
                            "value": {}
                        },
                        "dynamicPropertyStorage": {
                            "dataType": "Map",
                            "value": {}
                        },
                        "mediaPropertyStorage": {
                            "dataType": "Map",
                            "value": {}
                        },
                        "dynamicMediaPropertyStorage": {
                            "dataType": "Map",
                            "value": {}
                        },
                        "property": {
                            "dataType": "Map",
                            "value": {
                                "width": "100%",
                                "height": "100%",
                                "justify-content-rc": "center",
                                "position": "absolute",
                                "top": "0vp",
                                "left": "0vp",
                                "border-bottom-color": "#4a4a4a",
                                "border-bottom-width": "1vp"
                            }
                        },
                        "dynamicProperty": {
                            "dataType": "Map",
                            "value": {}
                        },
                        "children": [
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "position": "absolute",
                                            "top": "95vp",
                                            "width": "100%",
                                            "height": "100vp",
                                            "display-priority": "0",
                                            "align-items-row": "center",
                                            "justify-content-rc": "center"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [
                                        {
                                            "dataType": "VisualModel",
                                            "value": {
                                                "propertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "mediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicMediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "property": {
                                                    "dataType": "Map",
                                                    "value": {
                                                        "width": "100vp",
                                                        "height": "100vp",
                                                        "align": "center",
                                                        "top": "0vp",
                                                        "background-image-size": "auto",
                                                        "position": "relative",
                                                        "src": "$r('app.media.icon')",
                                                        "left": "0%"
                                                    }
                                                },
                                                "dynamicProperty": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "children": [],
                                                "id": "image1",
                                                "type": "image"
                                            }
                                        }
                                    ],
                                    "id": "row3",
                                    "type": "row"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "height": "50vp",
                                            "width": "100%",
                                            "left": "0vp",
                                            "top": "200vp",
                                            "border-top-right-radius": "0vp",
                                            "content": "登录界面",
                                            "font-size": "26fp",
                                            "font-weight": "medium",
                                            "font-family": "sans-serif",
                                            "text-align": "center",
                                            "text-overflow": "clip",
                                            "position": "absolute"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [],
                                    "id": "text1",
                                    "type": "text"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "height": "30vp",
                                            "width": "100%",
                                            "left": "0vp",
                                            "top": "250vp",
                                            "content": "登录帐号以使用更多服务",
                                            "font-size": "14fp",
                                            "text-align": "center",
                                            "font-color": "#8c8c8c",
                                            "position": "absolute"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [],
                                    "id": "text2",
                                    "type": "text"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "height": "50vp",
                                            "width": "100%",
                                            "left": "0vp",
                                            "top": "328vp",
                                            "position": "absolute",
                                            "placeholder": "邮箱/手机号/用户名",
                                            "margin-bottom": "0vp",
                                            "padding-top": "0vp",
                                            "border-bottom-width": "1vp",
                                            "border-bottom-color": "#4a4a4a",
                                            "background-color": "#ffffff"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [],
                                    "id": "text-input1",
                                    "type": "text-input"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "height": "50vp",
                                            "width": "100%",
                                            "left": "0vp",
                                            "top": "380vp",
                                            "position": "absolute",
                                            "placeholder": "密码",
                                            "textInput-type": "Password",
                                            "background-color": "#ffffff",
                                            "border-bottom-width": "1vp",
                                            "border-bottom-color": "#4a4a4a"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [],
                                    "id": "text-input2",
                                    "type": "text-input"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "position": "absolute",
                                            "top": "430vp",
                                            "left": "5%",
                                            "width": "90%",
                                            "height": "30vp"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [
                                        {
                                            "dataType": "VisualModel",
                                            "value": {
                                                "propertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "mediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicMediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "property": {
                                                    "dataType": "Map",
                                                    "value": {
                                                        "height": "30vp",
                                                        "width": "50%",
                                                        "position": "absolute",
                                                        "top": "0px",
                                                        "left": "50%",
                                                        "text-align": "end",
                                                        "content": "忘记密码",
                                                        "font-size": "14fp"
                                                    }
                                                },
                                                "dynamicProperty": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "children": [],
                                                "id": "text3",
                                                "type": "text"
                                            }
                                        },
                                        {
                                            "dataType": "VisualModel",
                                            "value": {
                                                "propertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "mediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicMediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "property": {
                                                    "dataType": "Map",
                                                    "value": {
                                                        "height": "30vp",
                                                        "width": "50%",
                                                        "text-align": "start",
                                                        "position": "absolute",
                                                        "content": "短信验证码登录",
                                                        "font-size": "14fp",
                                                        "top": "0vp",
                                                        "left": "0%"
                                                    }
                                                },
                                                "dynamicProperty": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "children": [],
                                                "id": "text4",
                                                "type": "text"
                                            }
                                        }
                                    ],
                                    "id": "row1",
                                    "type": "row"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "position": "absolute",
                                            "top": "92%",
                                            "left": "5%",
                                            "height": "8%",
                                            "width": "90%"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [
                                        {
                                            "dataType": "VisualModel",
                                            "value": {
                                                "propertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "mediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicMediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "property": {
                                                    "dataType": "Map",
                                                    "value": {
                                                        "height": "100%",
                                                        "width": "33.3%",
                                                        "position": "absolute"
                                                    }
                                                },
                                                "dynamicProperty": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "children": [],
                                                "id": "text7",
                                                "type": "text"
                                            }
                                        },
                                        {
                                            "dataType": "VisualModel",
                                            "value": {
                                                "propertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "mediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicMediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "property": {
                                                    "dataType": "Map",
                                                    "value": {
                                                        "height": "100%",
                                                        "width": "33.4%",
                                                        "position": "absolute"
                                                    }
                                                },
                                                "dynamicProperty": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "children": [],
                                                "id": "text9",
                                                "type": "text"
                                            }
                                        },
                                        {
                                            "dataType": "VisualModel",
                                            "value": {
                                                "propertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "mediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "dynamicMediaPropertyStorage": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "property": {
                                                    "dataType": "Map",
                                                    "value": {
                                                        "height": "100%",
                                                        "width": "33.3%",
                                                        "text-align": "end",
                                                        "position": "absolute"
                                                    }
                                                },
                                                "dynamicProperty": {
                                                    "dataType": "Map",
                                                    "value": {}
                                                },
                                                "children": [],
                                                "id": "text8",
                                                "type": "text"
                                            }
                                        }
                                    ],
                                    "id": "row2",
                                    "type": "row"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "width": "90%",
                                            "height": "40vp",
                                            "label": "登录",
                                            "font-size": "20fp",
                                            "position": "absolute",
                                            "top": "530vp",
                                            "left": "5%"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [],
                                    "id": "button1",
                                    "type": "button"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "height": "30vp",
                                            "width": "100%",
                                            "content": "注册账号",
                                            "text-align": "center",
                                            "font-size": "14fp",
                                            "position": "absolute",
                                            "top": "570vp",
                                            "left": "0vp"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [],
                                    "id": "text5",
                                    "type": "text"
                                }
                            },
                            {
                                "dataType": "VisualModel",
                                "value": {
                                    "propertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "mediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "dynamicMediaPropertyStorage": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "property": {
                                        "dataType": "Map",
                                        "value": {
                                            "height": "4%",
                                            "width": "100%",
                                            "text-align": "center",
                                            "font-size": "14fp",
                                            "position": "absolute",
                                            "top": "88%",
                                            "left": "0vp",
                                            "content": "其他方式登录",
                                            "align": "center"
                                        }
                                    },
                                    "dynamicProperty": {
                                        "dataType": "Map",
                                        "value": {}
                                    },
                                    "children": [],
                                    "id": "text6",
                                    "type": "text"
                                }
                            }
                        ],
                        "id": "column1",
                        "type": "column"
                    }
                }
            ],
            "id": "wrapper",
            "type": "column"
        }
    },
    "formData": {
        "data": {
            "dataType": "Map",
            "value": {}
        },
        "actions": {
            "dataType": "Map",
            "value": {}
        }
    },
    "customData": {
        "property": {
            "dataType": "Map",
            "value": {}
        },
        "event": {
            "dataType": "Map",
            "value": {}
        }
    }
}

我们点击运行按钮,会让我们选择运行设备,这里的设备都是模拟器,需要安装,我们先进入设备管理器安装设备。

以上是纯前端,业务逻辑写在在index.ets文件中,这里我们只是测试开发环境可以运行简单应用,所以业务逻辑我们就不写了,具体的应用实战我会在后面的章节给出。


2、安装设备仿真器

这个模板支持手机、电视、手表三种终端模拟,我们先安装emulator(仿真器)。

安装好之后,我们再点击每一个硬件设备单独安装。这里我选择的手机。

我选择的API9版本。

要安装个几分钟。

安装完成。


3、开启设备仿真器

点击我们刚刚新建的设备,启动它。

仿真终端被立刻启动。

完全启动大概需要个一分钟,开机后如下:


4、运行项目

我们运行项目。

我们制作的应用会在仿真设备里打开。

测试我们登录界面是否可以正常输入和点击。

测试没有问题,标志着我们新建的HarmonyOS应用运行成功。

相关推荐
Andy醒13 分钟前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
yuwinter18 分钟前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
ZZZCY200337 分钟前
华为ENSP--IP编址及静态路由配置
网络·华为
jikuaidi6yuan2 小时前
鸿蒙系统(HarmonyOS)分布式任务调度
分布式·华为·harmonyos
️ 邪神8 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
智慧化智能化数字化方案8 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY20039 小时前
华为VER系统及CLI命令熟悉
华为
SameX10 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX10 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index17 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos