当前位置:   article > 正文

HarmonyOS应用开发环境搭建_deveco hvigor 环境变量

deveco hvigor 环境变量

一、工具简介

HUAWEI DevEco Studio是基于IntelliJ IDEA Community开源版本打造,为运行在HarmonyOS和OpenHarmony系统上的应用和服务(以下简称应用/服务)提供一站式的开发平台。

作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点:

  • 高效智能代码编辑:支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。
  • 低代码可视化开发:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果,所见即所得;同时支持卡片的零代码开发,降低开发门槛和提升界面开发效率。
  • 多端双向实时预览:支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览,便于快速查看代码运行效果。
  • 多端设备模拟仿真:提供HarmonyOS本地模拟器,支持手机等设备的模拟仿真,便捷获取调试环境。

二、应用/服务开发流程

使用DevEco Studio,只需要按照如下几步,即可轻松开发并上架一个应用/服务到华为应用市场。

2.1 开发准备

下载HUAWEI DevEco Studio,完成开发工具的安装。开发工具安装完成后,还需要设置开发环境,对于绝大多数开发者来说,直接下载SDK即可启动开发;只有少部分开发者,如在企业内部访问Internet受限,需要设置对应的代理服务器才能下载SDK。具体操作请参考配置开发环境

2.2 开发应用/服务

DevEco Studio集成了手机、智慧屏、智能穿戴等设备的典型场景模板,可以通过工程向导轻松的创建一个新的工程

接下来还需要定义应用/服务的UI、开发业务功能等编码工作,可以根据HarmonyOS应用开发概述来查看具体的开发过程,通过查看API接口文档查阅需要调用的API接口。

在开发代码的过程中,可以使用预览器查看应用/服务效果,支持实时预览、动态预览、双向预览等功能,使编码的过程更高效。

2.3 运行、调试和测试应用/服务

应用/服务开发完成后,可以使用真机进行调试(需要申请调测证书进行签名)或者使用模拟器进行调试,支持单步调试、跨设备调试、跨语言调试、变量可视化等调试手段,使得应用/服务调试更加高效。

HarmonyOS应用/服务开发完成后,在发布到应用/服务市场前,还需要对应用进行测试,主要包括漏洞、隐私、兼容性、稳定性、性能等进行测试,确保HarmonyOS应用/服务纯净、安全,给用户带来更好的使用体验。

2.4 发布应用/服务

HarmonyOS应用/服务开发、测试完成后,需要将应用/服务发布至应用市场,以便应用市场对应用/服务进行分发,普通消费者可以通过应用市场或服务中心获取到对应的HarmonyOS应用/服务。需要注意的是,发布到华为应用市场或服务中心的HarmonyOS应用/服务,必须使用应用市场颁发的发布证书进行签名。

三、搭建开发环境流程

DevEco Studio支持Windows系统和macOS系统,在开发应用/服务前,需要配置应用/服务的开发环境。环境配置流程如下所示:

如上图所示,搭建HarmonyOS应用/服务开发的环境包括软件安装、配置开发环境和运行Hello World三个环节,详细的指导请参考:

步骤

操作步骤

操作指导

说明

1

软件安装

Windows环境

安装DevEco Studio。

macOS环境

2

配置开发环境

(可选)配置Proxy

网络不能直接访问Internet,可通过设置代理服务器进行访问。

如果无需代理即可访问Internet,将跳过该步骤。

5

安装Node.js和ohpm

指定本地已安装的Node.js/ohpm,或在线下载。

6

下载HarmonyOS SDK

-

7

运行HelloWorld

创建一个新工程

使用模拟器运行Demo工程,验证环境是否已经配置完成。

四、下载与安装开发环境 

DevEco Studio支持Windows和macOS系统,下面将针对两种操作系统的软件安装方式分别进行介绍。

4.1 Windows环境

4.1.1 运行环境要求

为保证DevEco Studio正常运行,建议电脑配置满足如下要求:

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

4.1.2 下载和安装DevEco Studio

  1. 进入HUAWEI DevEco Studio产品页,单击下载列表右侧的

    按钮,下载DevEco Studio。
  2. 下载完成后,双击下载的“deveco-studio-xxxx.exe”,进入DevEco Studio安装向导。在如下界面选择安装路径,默认安装于C:\Program Files路径下,也可以单击Browse...指定其他安装路径,然后单击Next

  3. 在如下安装选项界面勾选DevEco Studio后,单击Next,直至安装完成。

  4. 安装完成后,单击Finish完成安装。

4.2 macOS环境

4.2.1 运行环境要求

为保证DevEco Studio正常运行,建议电脑配置满足如下要求:

  • macOS(X86) 10.15/11/12/13 macOS(ARM) 11/12/13
  • 内存:8GB及以上
  • 硬盘:100GB及以上
  • 分辨率:1280*800像素及以上

说明:ARM架构芯片系列处理器的Mac仅支持创建API 9及以上版本的工程。

4.2.2 下载和安装DevEco Studio

  1. 进入HUAWEI DevEco Studio产品页,单击下载列表右侧的

    按钮,下载DevEco Studio。
  2. 下载完成后,双击下载的“deveco-studio-xxxx.dmg”软件包。
  3. 在安装界面中,将“DevEco-Studio.app”拖拽到“Applications”中,等待安装完成。

  4. 安装完成后,接下来请根据配置开发环境,检查和配置开发环境。

五、 配置开发环境

5.1 下载SDK及工具链

DevEco Studio提供SDK Manager统一管理SDK及工具组件,包括如下组件包:

组件包名

说明

参考

Native

C/C++语言SDK包。

Native API参考

ArkTS

ArkTS语言SDK包。

ArkTS API参考

JS

JS语言SDK包。

Java

Java语言SDK包。从API Version 8开始,不再提供Java语言SDK包。

Java API参考

System-image-phone

本地模拟器Phone设备镜像文件。

使用Local Emulator运行应用/服务

System-image-tv

本地模拟器TV设备镜像文件,仅支持API Version 6。

System-image-wearable

本地模拟器Wearable设备镜像文件,仅支持API Version 6。

Emulator

本地模拟器工具包。

Toolchains

SDK工具链,应用/服务开发必备工具集,包括编译、打包、签名、数据库管理等工具的集合。

-

Previewer

应用/服务预览器,在开发过程中可以动态预览Phone、TV、Wearable、LiteWearable等设备的应用/服务效果,支持JS、ArkTS和Java应用/服务预览。

使用预览器查看应用/服务效果

应用/服务支持API Version 4至9,首次使用DevEco Studio,工具的配置向导会引导您下载SDK及工具链。配置向导默认下载 API Version 9的SDK及工具链,如需下载API Version 4至8,可在工程配置完成后,进入HarmonyOS SDK界面手动下载,方法如下:

  • 在DevEco Studio欢迎页,单击Configure(或

    图标)> Settings > SDK > HarmonyOS页签(macOS系统为Configure > Preferences > SDK > HarmonyOS)。
  • 在DevEco Studio打开工程的情况下,单击Files > Settings > SDK > HarmonyOS页签进入(macOS系统为DevEco Studio > Preferences > SDK > HarmonyOS)。

接下来介绍首次启动DevEco Studio的配置向导:

  1. 运行已安装的DevEco Studio,首次使用,请选择Do not import settings,单击OK
  2. 安装Node.js与ohpm。可以指定本地已安装的Node.js或ohpm(Node.js版本要求为v14.19.1及以上,且低于v17.0.0;对应的npm版本要求为6.14.16及以上)路径位置;如果本地没有合适的版本,可以选择Install按钮,选择下载源和存储路径后,进行在线下载,单击Next进入下一步。

    说明:如果配置向导界面出现的是设置HTTP Proxy Setup,说明网络受限,请根据参考信息配置DevEco Studio代理后,再下载Node.js、ohpm和SDK。

  3. SDK Setup界面,单击

    按钮,设置HarmonyOS SDK存储路径,单击Next进入下一步。

    说明:HarmonyOS SDK路径中不能包含中文字符。

  4. 在弹出的SDK下载信息页面,单击Next,并在弹出的License Agreement窗口,阅读License协议,需同意License协议后,单击Next

    说明:下载SDK过程中,如果出现下载JS SDK失败,提示“Install Js dependencies failed.”,请根据JS SDK安装失败处理指导进行处理。

  5. 确认设置项的信息,点击Next开始安装。

  6. 等待Node.js、ohpm和SDK下载完成后,单击Finish,界面会进入到DevEco Studio欢迎页。

5.2 配置HDC工具环境变量

HDC是为开发者提供HarmonyOS应用/服务的调试工具,为方便使用HDC工具,请为HDC端口号设置环境变量。

5.2.1 Windows环境变量设置方法

此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,添加HDC端口变量名为:HDC_SERVER_PORT,变量值可设置为任意未被占用的端口,如7035。

环境变量配置完成后,关闭并重启DevEco Studio。

5.2.2 macOS环境变量设置方法

a. 打开终端工具,执行以下命令,根据输出结果分别执行不同命令:

         echo $SHELL

        如果输出结果为/bin/bash,则执行以下命令,打开.bash_profile文件:

                vi ~/.bash_profile
        如果输出结果为/bin/zsh,则执行以下命令,打开.zshrc文件:

                vi ~/.zshrc

b.单击字母“i”,进入Insert模式;

c.输入以下内容,添加HDC_SERVER_PORT端口信息:

        export HDC_SERVER_PORT=7035

d.编辑完成后,单击Esc键,退出编辑模式,然后输入“:wq”,单击Enter键保存;

e.执行以下命令,使配置的环境变量生效;

        如果步骤a时打开的是.bash_profile文件,请执行如下命令:

                source ~/.bash_profile

        如果步骤a时打开的是.zshrc文件,请执行如下命令:

                source ~/.zshrc

f.环境变量配置完成后,关闭并重启DevEco Studio。

六、参考信息

DevEco Studio开发环境依赖于网络环境,需要连接上网络才能确保工具的正常使用。

一般来说,如果使用的是个人或家庭网络,是不需要配置代理信息的,只有部分企业网络受限的情况下,才需要配置代理信息。

首次使用DevEco Studio,如果配置向导界面出现Set up HTTP Proxy界面,可能需要通过配置代理服务器才能访问,请配置Proxy。

6.1 配置DevEco Studio代理

1、启动DevEco Studio,配置向导进入Set up HTTP Proxy界面,勾选Manual proxy configuration,配置DevEco Studio的HTTP Proxy。

        说明:如果非首次设置向导进入HTTP Proxy,可以通过如下方式进入HTTP Proxy配置界面:

  • 在欢迎页单击Configure> Settings > Appearance & Behavior > System Settings > HTTP Proxy进入HTTP Proxy设置界面(macOS为Configure > Preferences > Appearance & Behavior > System Settings > HTTP Proxy)。
  • 在打开了工程的情况下,可以单击File > Settings > Appearance & Behavior > System Settings > HTTP Proxy进入HTTP Proxy设置界面(macOS为DevEco Studio > Preferences > Appearance & Behavior > System Settings > HTTP Proxy)。

  a.HTTP配置项,配置代理服务器信息。如果不清楚代理服务器信息,请咨询您的网络管理人员

  • Host name:代理服务器主机名或IP地址。
  • Port number:代理服务器对应的端口号。
  • No proxy for:不需要通过代理服务器访问的URL或者IP地址(地址之间用英文逗号分隔)。

  b.Proxy authentication配置项,如果代理服务器需要通过认证鉴权才能访问,则需要配置。否则,请跳过该配置项。

  • Login:访问代理服务器的用户名。
  • Password:访问代理服务器的密码。
  • Remember:勾选,记住密码。

2、配置完成后,单击Check connection,输入网络地址(如:https://developer.harmonyos.com),检查网络连通性。提示“Connection successful”表示代理设置成功。

3、单击Next,继续配置Node.js、ohpm和SDK信息

6.2 配置NPM代理

Hvigor、ohpm、SDK在初始化时需要从npm仓库下载依赖,如果需要代理才能访问网络,请配置npm的代理。

可通过如下步骤进入npm代理配置界面:

  • 在欢迎页单击Configure> Settings > Build, Execution, Deployment > Node.js and npm > Optimize config,进入npm代理设置界面(macOS为Configure > Preferences > Build, Execution, Deployment > Node.js and npm > Optimize config)。
  • 在打开了工程的情况下,可以单击File > Settings > Build, Execution, Deployment > Node.js and npm > Optimize config,进入npm代理设置界面(macOS为DevEco Studio > Preferences > Build, Execution, Deployment > Node.js and npm > Optimize config)。

具体配置如下:

  • npm registry:配置npm仓的地址信息。
    https://repo.huaweicloud.com/repository/npm/
    
  • ohos registry:HarmonyOS npm三方包共享仓。
    https://repo.harmonyos.com/npm/
    
  • HTTP proxy:代理服务器信息,默认会与DevEco Studio的HTTP proxy设置项保持一致。如果需要配置帐号密码,请使用如下格式进行配置:
    http://user:password@proxy.proxyserver.com
    
  • Enable Https Proxy:同步配置HTTPS Proxy信息。

填写勾选以上信息后,点击OK。在此界面配置的代理信息将写入“users/用户名”目录下的.npmrc文件。

因此也可直接修改“users/用户名”目录下的.npmrc文件进行配置。

a.进入C:\Users\用户名目录,打开.npmrc文件。如果该目录下没有.npmrc文件,请新建一个。

b.修改npm仓库信息,示例如下所示:

                registry=https://repo.huaweicloud.com/repository/npm/
                @ohos:registry=https://repo.harmonyos.com/npm/

c.修改代理信息,在proxy和https-proxy中,将user、password、proxyserver和port按照实际代理服务器进行修改。示例如下所示:

                proxy=http://user:password@proxy.proxyserver.com:port
                https-proxy=http://user:password@proxy.proxyserver.com:port 

        说明:如果password中存在特殊字符,如@、#、*等符号,可能导致配置不生效,建议将特殊字符替换为ASCII码,并在ASCII码前加百分号%。常用符号替换为ASCII码对照表如下:

  • !:%21
  • @:%40
  • #:%23
  • $:%24
  • &:%26
  • *:%2A

d.将Node.js配置到环境变量中。

  • Windows环境变量设置方法:

    此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,在系统或者用户的PATH变量中,添加Node.js安装位置的路径。

  • macOS环境变量设置方法:打开终端工具,执行以下命令。

    export NODE_HOME=/home/xx/Downloads/node-vxx.xx.x-linux-x64  #本处路径请替换为Node的安装路径
    export PATH=$NODE_HOME/bin:$PATH

e.代理配置完成后,打开命令行工具,执行如下命令验证网络是否正常。

        npm info express

执行结果如下图所示,则说明代理设置成功。

 6.3 配置OHPM代理

若您需要配置OHPM代理信息,可通过如下步骤进入代理配置界面:

  • 在欢迎页单击Configure> Settings > Build, Execution, Deployment > Ohpm > Optimize Config,进入OHPM代理设置界面(macOS为Configure > Preferences > Build, Execution, Deployment > Ohpm > Optimize Config)。
  • 在打开了工程的情况下,可以单击File > Settings > Build, Execution, Deployment > Ohpm > Optimize Config,进入OHPM代理设置界面(macOS为DevEco Studio > Preferences > Build, Execution, Deployment > Ohpm > Optimize Config)。

具体配置如下:

a. ohpm registry:配置ohpm仓的地址信息。

https://repo.harmonyos.com/ohpm/ 

b.HTTP proxy:代理服务器信息,默认会与DevEco Studio的HTTP proxy设置项保持一致。如果需要配置帐号密码,请使用如下格式进行配置

http://user:password@proxy.proxyserver.com

c.Enable Https Proxy:同步配置HTTPS Proxy信息。

填写勾选以上信息后,点击OK

说明:ohpm默认校验registry仓库地址证书。如果环境检查中ohpm registry access出现'SELF_SIGNED_CERT_IN_CHAIN'或'UNABLE_TO_VERIFY_LEAF_SIGNATURE'等证书校验错误时,请查看FAQ-问题现象2解决证书校验错误问题。

在此界面配置的代理信息将写入“users/用户名/.ohpm”目录下的.ohpmrc文件。因此也可直接修改“users/用户名/.ohpm”目录下的.ohpmrc文件进行配置。

1.进入C:/Users/用户名目录/.ohpm,打开.ohpmrc文件。如果该目录下没有.ohpmrc文件,请新建一个。

2.修改ohpm仓库信息,示例如下所示:

        registry=https://repo.harmonyos.com/ohpm/

3.修改ohpm代理信息,在http_proxy和https_proxy中,将user、password、proxyserver和port按照实际代理服务器进行修改。示例如下所示:

        http_proxy=http://user:password@proxy.proxyserver.com:port
        https_proxy=http://user:password@proxy.proxyserver.com:port

说明:如果password中存在特殊字符,如@、#、*等符号,可能导致配置不生效,建议将特殊字符替换为ASCII码,并在ASCII码前加百分号%。常用符号替换为ASCII码对照表如下:
  • !:%21
  • @:%40
  • #:%23
  • $:%24
  • &:%26
  • *:%2A

4.将ohpm配置到环境变量中。

  • Windows环境变量设置方法:

    此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,在系统或者用户的PATH变量中,添加ohpm安装位置下bin文件夹的路径。

  • macOS环境变量设置方法:打开终端工具,执行以下命令。
    export OHPM_HOME=/home/xx/Downloads/ohpm  #本处路径请替换为ohpm的安装路径
    export PATH=$OHPM_HOME/bin:$PATH
    

5.代理配置完成后,下载并打开命令行工具,执行如下命令验证网络是否正常。

         ohpm info @ohos/lottie

执行结果如下图所示,则说明代理设置成功。

七、启用中文化插件

  • 单击Files > Settings > Plugins,选择Installed页签,在搜索框输入“Chinese”,搜索结果里将出现Chinese(Simplified),在右侧单击Enable,单击OK

  • 在弹窗中单击Restart,重启DevEco Studio后即可生效。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/866741
推荐阅读
相关标签
  

闽ICP备14008679号