网站开发费用一般为多少,论文中引用网站怎么写,保定网站推广公司,免费动图制作app本文介绍如何搭建 HarmonyOS 应用的开发环境#xff0c;介绍下载安装 DevEco Studio 开发工具和 SDK 的详细流程。华为鸿蒙 DevEco Studio 是面向全场景的一站式集成开发环境#xff0c;面向全场景多设备#xff0c;提供一站式的分布式应用开发平台#xff0c;支持分布式多…本文介绍如何搭建 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代码我提供出来给大家参考
{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应用运行成功。
