手把手教你安装鸿蒙和运行第一个Demo(js)版

简介: 在体验之前,大家可以先看这张图,然后按图索骥,不过不会在这个教程教如何如何安装nodejs,

在体验之前,大家可以先看这张图,然后按图索骥,不过不会在这个教程教如何如何安装nodejs,

image.png

接下来开始正文


1.第一步,打开链接,点击下载

https://developer.harmonyos.com/cn/develop/deveco-studio/


image.png


目前最新版本


https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta


image.png


两个版本都可以下载,看你自己需要


Release版本提供更稳定的功能特性,


Beta版本提供了支持HarmonyOS 3.0.0 开发者预览版的开发能力,让您尝鲜体验HarmonyOS 3.0.0最新功能,


下载到本地之后双击exe可执行文件


image.png


2.一路next,在这步记得勾选,这样后续开发比较方便。至于为什么鸿蒙不支持vs和as开发,大家可以自己去探究。

image.png


3.运行已安装的DevEco Studio,首次使用,请选择Do not import settings,点击OK。

进入配置向导页面,设置npm registry,DevEco Studio已预置对应的仓,直接点击Start using DevEco Studio进入下一步。


说明


如果配置向导界面出现的是设置Set up HTTP Proxy界面,说明网络受限,请根据参考信息配置DevEco Studio代理、NPM代理和Gradle代理后,再下载HarmonyOS SDK。

image.png

DevEco Studio向导指引开发者下载SDK,默认下载OpenHarmony SDK。SDK下载到user目录下,也可以指定对应的存储路径,SDK存储路径不支持中文字符,然后点击Next。


在弹出的SDK下载信息页面,点击Next,并在弹出的License Agreement窗口,点击Accept开始下载SDK。


image.png


等待OpenHarmony SDK及工具下载完成,点击Finish,界面会进入到DevEco Studio欢迎页。


4.配置HDC工具环境变量

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


Windows环境变量设置方法:


在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,添加HDC端口变量名为:HDC_SERVER_PORT,变量值设置为7035。


image.png


在path变量中,添加HDC工具路径,HDC工具路径为:HarmonyOS SDK安装目录/toolchains。


F:\HarmonySdk\toolchains


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


5.创建和运行Hello World

打开DevEco Studio,在欢迎页点击Create Project,创建一个新工程,选择js的方式,目前支持的有js,java和c++,这方面看自己的喜好。


image.png


6.填写工程相关信息,Device Type选择Phone,其他保持默认值即可,点击Finish。关于各个参数的详细介绍,

image.png


工程创建完成后,DevEco Studio会自动进行工程的同步,同步成功如下图所示。


7.使用模拟器运行HelloWorld

DevEco Studio提供远程模拟器和本地模拟器,本示例以远程模拟器为例进行说明


DevEco Studio提供模拟器供开发者运行和调试HarmonyOS应用/服务。


在DevEco Studio菜单栏,点击Tools > Device Manager。


在Remote Emulator页签中点击Login,在浏览器中弹出华为开发者联盟帐号登录界面,请输入已实名认证的华为开发者联盟帐号的用户名和密码进行登录(查看远程模拟器登录常见问题)。


说明


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


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


image.png


在设备列表中,选择Phone设备P40,并点击按钮,运行模拟器。


image.png


点击DevEco Studio工具栏中的按钮运行工程,或使用默认快捷键Shift+F10(Mac为Control+R)运行工程。


image.png


8.已成功运行了第一个HarmonyOS应用/服务,


image.png


到此华为鸿蒙os 的环境搭建和初体验就讲完了


最后总结:

作为一枚Flutter开发程序员,第一点,第一次上手这个IDE和语言环境还是比较顺利的 基本能看懂 具体的还要看官网文档和api使用情况,没有具体去深入写, 个人看法学起来应该不难,第二点,如果有空了解和学习鸿蒙OS开发 没有坏处 ,不要等到书到用书方恨少 那就不好了 ,有兴趣的同学可以根据教程安装开发环境学习和了解 ,最后希望我的文章能帮助到各位解决问题 。


相关文章
|
27天前
|
缓存 JavaScript 安全
2022年最新最详细的安装Node.js以及cnpm(详细图解过程、绝对成功)
这篇文章提供了2022年最新最详细的Node.js和cnpm安装教程,包括步骤图解、全局配置路径、cnpm安装命令、nrm的安装与使用,以及如何管理npm源和测试速度。
2022年最新最详细的安装Node.js以及cnpm(详细图解过程、绝对成功)
|
14天前
|
监控 JavaScript Linux
[译] 在生产环境运行 PM2 & Node.js
[译] 在生产环境运行 PM2 & Node.js
|
15天前
|
JavaScript NoSQL 前端开发
|
30天前
|
JavaScript 前端开发
JavaScript——一个简单的队列Demo
JavaScript——一个简单的队列Demo
32 4
|
28天前
|
JavaScript
Node.js的安装
这篇文章提供了Node.js的安装指南,包括从官网下载、安装步骤、验证安装是否成功,以及如何安装淘宝镜像加速器cnpm或使用淘宝npm镜像来加速npm包的安装过程。
Node.js的安装
|
1月前
|
资源调度 JavaScript 前端开发
安装 Nuxt.js 的步骤和注意事项
【8月更文挑战第6天】
28 3
|
13天前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
1月前
|
资源调度 JavaScript
不使用脚手架安装nuxt.js
【8月更文挑战第6天】
|
18天前
|
JavaScript Windows
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
|
18天前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题