DevEco Studio 使用和问题总结

已于 2023-03-03 16:52:08 修改
阅读量1.7w 收藏 57
点赞数 5
分类专栏： tools 文章标签： DevEco Studio 王睿丶 IDE 鸿蒙OS HarmonyOS
于 2021-08-07 13:55:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27494201/article/details/119485575
版权

文章目录

1、从0~1 开发App详细步骤

一丶下载 DevEco Studio
目前只支持Windows、Mac（2021年6月15日）
下载地址
在这里插入图片描述

二丶安装 DevEco Studio
（1）双击
在这里插入图片描述
（2）Next
在这里插入图片描述
（3）Next
在这里插入图片描述
（4）勾上后，点击Next
在这里插入图片描述
（5）install
在这里插入图片描述
（6）
在这里插入图片描述

三丶下载Node.js
下载地址
在这里插入图片描述

四丶安装Node.js
（1）Next
在这里插入图片描述
（2）Next
在这里插入图片描述
（3）Next
在这里插入图片描述
（4）Next
在这里插入图片描述
（5）Next
在这里插入图片描述
（6）install
在这里插入图片描述
（7）Finish
在这里插入图片描述

五丶设置网络，确保下载无问题（教你们更快的一招）
条件： 有些家庭和公司网络会无法访问Internet，这时候就需要设置设置npm代理。不过经亲身体验，我发现还有一种更快的方法。

方法一：电脑连接手机热点
打开手机热点，让电脑连接上热点，然后就可以直接跳过设置npm代理的步骤进入下面的安装

方法二：设置npm代理

请参考官网设置教程
六丶启动 DevEco Studio
（1）点击OK
在这里插入图片描述

（2）如果需要设置代理信息会提示，点击Setup Proxy
在这里插入图片描述
（3）若不需要则提示，点击 Agree
在这里插入图片描述
（4）点击 Start using DevEco Studio
在这里插入图片描述

（5）下载HarmonyOS SDK
在这里插入图片描述
（6）Next
在这里插入图片描述

（7）先 Accept，后 Next
在这里插入图片描述
（8）下载完成后点击 Finish
在这里插入图片描述
（9）先 Configure，后 Settings
在这里插入图片描述
（10）
在这里插入图片描述

（11）看一下最新版本的SDK下，哪些没下载的请把它下载
在这里插入图片描述
（12）Finish
在这里插入图片描述
（13）OK
在这里插入图片描述

七丶创建工程
（1）
在这里插入图片描述
（2）选择 Java，点击 Next
在这里插入图片描述
（3）请按照红框勾选，然后点击 Finish
在这里插入图片描述

（4）第一次进入时，DevEco Studio需要对工程进行构建，它会自动下载 Gradle 工具，等待就好
在这里插入图片描述
（5）当显示，说明工程同步成功！
在这里插入图片描述

八丶运行前，准备工作
（1）
在这里插入图片描述

（2）
在这里插入图片描述
（3）登录华为账号，如果没有请注册
在这里插入图片描述
（4）一律允许
在这里插入图片描述
（5）注意：这只是登录成功！你还需要在华为平台进行实名认证，否则无法使用模拟器

实名认证有两种方式，详细步骤请按官网提示操作

  • 身份证
  • 银行卡

（6）登录成功后（指实名过的开发者），会显示如下图的界面，可以选择不同设备的模拟器

在这里插入图片描述
（7）每次使用时长为1小时，到期后会自动释放资源，请及时完成HarmonyOS应用的调试。如果Remote Emulator到期释放后，您可以重新申请资源
在这里插入图片描述

九丶运行项目，诞生第一个HarmonyOS App
（1）点击箭头运行
在这里插入图片描述

（2）成功
在这里插入图片描述

十丶切换黑色界面（两步搞定）
（1）
在这里插入图片描述
（2）
在这里插入图片描述

2、DevEco Studio 切换黑色界面

（1）
在这里插入图片描述
（2）
在这里插入图片描述

同时安装多个DevEco Studio版本，怎样做才保证各个版本不冲突？
一键难忘的博客
12-12 2354
DevEco Studio是一个基于IntelliJ IDEA Community开源版本打造的集成开发环境（IDE），面向OpenHarmony全场景多设备的一站式开发工具。它为开发者提供工程模板创建、开发、编译、调试等E2E的OpenHarmony应用/服务开发功能。本文首先介绍了DevEco Studio，是基于IntelliJ IDEA Community开源版本打造的OpenHarmony集成开发环境（IDE），支持全场景多设备的一站式开发工具。
【HarmoneyOS应用开发学习总结之二】DevEco Studio Previewer使用
可乐Blog
11-24 1722
开启预览器时，系统默认设置是打开实时更新的，如果想关闭实时更新，则可以点击红色框的图标，然后就会变成灰色，且带有个圆圈，类似下图的标号，这时Previewer就不会自动更新了。点击右上角的小开关，打开之后就可以把列表中的所有设备都呈现UI展示，然后即可在Previewer中同时查看自己的UI代码在不同设备中的呈现效果。当页面UI设计好后，可点击Previewer【预览器】，将自动编译，如代码编写没有错误，则可在Previewer中看到页面的效果。点击，系统将重新进行编译，并展示页面效果。
鸿蒙NEXT开发中的知识：构建自己的ArkTS应用工程（Stage模型）
m0_64422261的博客
06-21 1747
创建ArkTS工程
DevEco Studio使用
xianKOG的博客
01-09 2230
HUAWEI DevEco Studio（获取工具请单击链接下载，以下简称DevEco Studio）是基于IntelliJ IDEA Community开源版本打造，为运行在HarmonyOS系统上的应用和元服务（以下简称应用/元服务）提供一站式的开发平台。APP包结构在进行应用/元服务开发前，开发者应该掌握应用/元服务的逻辑结构。
DevEco Studio的使用
最新发布
2302_77228054的博客
03-30 1161
DevEco Studio的使用。 DevEco Studio支持Windows和macOS系统，本文针对两种操作系统的软件安装方式分别进行介绍。
DevEco Studio 的使用
W20240618_CSDN的博客
10-25 897
为了便捷开发 Harmony OS 应用，官方提供给开发者一个全新的IDE编辑器 DevEco Studio。
DevEco Studio使用简介
sinat_34896766的博客
07-16 1923
在不需要进行格式化操作的内容前加“//@formatter:off”，在不格式化的内容后加“//@formatter:on”，即表示对该范围内的内容不需要进行格式化操作。在要查找的对象上，单击鼠标右键>Find Usages，或Alt+F7，即可查找该变量被引用的地方。在编辑器中，可以按住ctrl键，鼠标单击代码中引用的类、方法、参数、变量等，自动跳转到定义处。，打开代码结构树，快速查看文件代码的结构树，包含全局变量和函数、类成员变量和方法等，并可跳转到对应行。使用ctrl+/，即可快速注释或取消注释。
移动应用开发-数字图片华容道，基于华为Deveco Studio和java开发
11-20
总结来说，“移动应用开发-数字图片华容道，基于华为Deveco Studio和java开发”涵盖了Java编程、华为Deveco Studio使用、游戏逻辑设计、UI开发、性能优化、测试和发布等多个知识点，是一个全方位的移动应用开发实践...
如何使用DevEco Studio创建Native C++应用
m0_70748458的博客
07-16 1330
本篇主要介绍如何使用DevEco Studio for OpenAtom OpenHarmony （以下简称“OpenHarmony”）创建一个Native C++应用。应用采用“Native C++”模板，实现了通过Node-API调用C标准库的功能。本示例通过调用C标准库接口来演示调用过程，具体接口是C标准库的计算两个给定数和，并将结果返回到页面展示。通过这个应用我们可以掌握OpenHarmony系统的ArkTS/JS与C/C++混合开发。
HarmonyOS鸿蒙开发工具 DevEco Studio的安装与使用
u013006974的博客
08-30 6365
鸿蒙开发使用的IDE（集成开发环境）是DevEco Studio，工欲善其事、必先利其器，我们从DevEco Studio的安装与使用开始学习HarmonyOS的开发系列教程。今天介绍了DevEco Studio的安装，并创建和运行了Hello World项目，下一篇介绍HarmonyOS应用的项目工程结构。
Huawei DevEco Studio使用指南.pdf
06-04
Huawei DevEco Studio使用指南
HarmonyOS应用开发工具DevEco Studio安装与使用
码小白.
12-04 4271
选择要安装的Node.js和Ohpm位置，其中ohpm是Open Harmony Package Management的缩写，也就是类似npm的包管理工具。一般就是因为你本地原本的Node.js配置异常导致的，建议清理环境变量中对于Node.js的配置之后再重试。这里会提示安装出现问题的选项，点击异常项后面的set it up now即可重新安装。创建好的应用中已经有了基础代码，我们以后开发后可以直接在工具中预览页面样式。不过需要先配置模拟器。，而是再次打开DevEco Studio，点击界面左下方的**
《第二章、DevEco Studio的使用》05 - 模拟器和真机调试
热门推荐
carlo的博客
07-15 1万+
如果您想观看完整的系列教程，不妨移步到我的《HarmonyOSNext 应用开发教程》专栏中，进行仔细查阅 :前面，我们已经学习了预览器的使用，可以帮我们在开发鸿蒙应用的时候，实时的查看效果，并且针对不用设备进行预览。不过，如果想彻底体验鸿蒙应用的所有功能，仅靠预览器还远远不够。所以，DevEco Studio提供了模拟器（Emulator），为开发者提供了运行和调试 HarmonyOS 应用/服务的便捷途径。模拟器还原了真实设备的基本功能，如屏幕旋转、音量调节、模拟的硬件传感器和指定设备的位置等。
Dev Studio 安装与使用
帅次的博客
03-15 5364
一、DevEco Studio 下载根据自己环境进行下载，下面就是常规的安装应用方式。二、DevEco Studio 诊断开发环境第一次打开会自动诊断，后面可通过右下方 help（帮助） 进入诊断开发环境。如下：这里很容易出现两个小问题：npm 仓库是否可访问报错，需要配置NPM代理。ohpm 是否设置正确报错。2.1 配置NPM代理1.第一次进入：如果报错可通过提示直接进入设置页面 2.通过项目进入设置页面:npm 注册表：配置npm仓的地址信息。
HarmonyOS应用开发之DevEco Studio安装与初次使用
qq_45110186的博客
01-04 2987
DevEco Studio是基于IntelliJ IDEA Community开源版本打造，面向华为终端全场景多设备的一站式集成开发环境（IDE），为开发者提供工程模板创建、开发、编译、调试、发布等E2E的HarmonyOS应用/服务的开发工具
DevEco Studio的简单介绍
weixin_62654522的博客
06-13 3524
在项目路径entry\src\main\config.json 打开修改json里 "module" -->"abilities"-- >"icon"，若是新增图片，则修改为"$media:icon2"在项目路径entry\src\main\resources\base\element\string.json（或zh_CN\string.json）下，更改。在项目路径entry\src\main\resources\base\media 下替换图标icon.png(或者新填图片icon2.png)
使用DevEco Studio编写qq登录界面
03-12
<think>好的，用户想用DevEco Studio创建一个QQ登录界面的示例代码和教程。首先，我需要回忆一下之前学过的关于DevEco Studio的基础知识。根据引用[2]，已经学过创建工程和代码编辑的相关技巧，所以现在需要在此基础上扩展。 首先，用户需要的是登录界面的具体实现。QQ登录界面通常包括Logo、用户名和密码输入框、记住密码复选框、登录按钮以及注册和忘记密码的链接。那么在OpenHarmony中，应该使用ArkUI框架，特别是声明式UI范式来实现这些组件。 接下来，我需要考虑如何将这些元素布局。通常，垂直排列的组件可以使用Column容器，而水平排列的部分比如“记住密码”和“忘记密码”可以使用Row容器。输入框可能需要TextInput组件，按钮是Button组件，复选框可以使用Toggle组件。 然后，样式方面需要注意，比如设置宽高、边距、字体大小、颜色等。Logo可能是一个图片，需要放在Image组件中。登录按钮的点击事件需要绑定一个方法，比如handleLogin，这里可能需要处理用户输入的数据，但示例代码可能先留空，或者添加简单的提示。 另外，用户可能需要路由跳转的功能，比如点击注册按钮跳转到注册页面。这涉及到页面路由模块的使用，需要导入router模块，并使用pushUrl方法。不过，在示例代码中，可能需要先创建好对应的页面，比如RegisterPage和ForgotPasswordPage。 还要检查代码的结构是否符合ArkUI的语法，比如组件的嵌套、属性的设置是否正确。例如，TextInput的placeholder属性用于提示用户输入，type设置输入类型为密码时会是密文显示。按钮的onClick事件触发处理函数。 最后，根据用户提供的引用[1]，可能需要参考OpenHarmony的应用开发教程，确保代码结构和API使用是正确的。同时，考虑到用户可能需要更详细的步骤，分点说明创建过程，并提醒需要准备图片资源和配置页面路由。 总结一下，步骤应该是：创建新工程，设计布局结构，添加组件和样式，处理交互事件，配置页面路由，运行和调试。示例代码需要包含这些元素，并且符合ArkUI的语法规范。可能还需要提及相关的资源和文档链接，方便用户进一步学习。</think>### 使用DevEco Studio创建QQ登录界面的实现步骤 #### 1. 创建新工程 - 在DevEco Studio中选择`File > New > Create Project` - 选择`Empty Ability`模板（基于ArkUI的声明式开发范式） - 配置项目名称、包名和SDK版本[^2] #### 2. 界面布局设计 ```typescript // 登录页面代码示例（LoginPage.ets） @Entry @Component struct LoginPage { @State username: string = '' @State password: string = '' @State rememberPwd: boolean = false build() { Column() { // Logo区域 Image($r('app.media.qq_logo')) .width(120) .height(120) .margin({ top: 40, bottom: 30 }) // 输入框区域 TextInput({ placeholder: 'QQ号/手机号/邮箱' }) .width('80%') .height(40) .margin({ bottom: 15 }) .onChange((value: string) => { this.username = value }) TextInput({ placeholder: '密码' }) .width('80%') .height(40) .type(InputType.Password) .onChange((value: string) => { this.password = value }) // 记住密码和忘记密码 Row() { Toggle({ type: ToggleType.Checkbox }) .onChange((isOn: boolean) => { this.rememberPwd = isOn }) Text('记住密码') .fontSize(14) .margin({ left: 5 }) Blank() Text('忘记密码?') .fontSize(14) .textColor('#007DFF') .onClick(() => { // 跳转忘记密码页面 router.pushUrl({ url: 'pages/ForgotPasswordPage' }) }) } .width('80%') .margin({ top: 20 }) // 登录按钮 Button('登录') .width('80%') .height(40) .margin({ top: 30 }) .backgroundColor('#007DFF') .onClick(() => { this.handleLogin() }) // 注册链接 Text('注册账号') .fontSize(14) .textColor('#007DFF') .margin({ top: 20 }) .onClick(() => { router.pushUrl({ url: 'pages/RegisterPage' }) }) } .width('100%') .height('100%') .backgroundColor('#F5F5F5') } // 登录处理函数 private handleLogin() { // 添加登录逻辑验证 prompt.showToast({ message: `用户名: ${this.username}, 密码: ${this.password}`, duration: 2000 }) } } ``` #### 3. 关键功能说明 - **页面路由**：使用`router.pushUrl`实现页面跳转 - **状态管理**：`@State`装饰器管理输入框状态 - **密码显示**：`InputType.Password`设置密码输入模式 - **交互反馈**：`prompt.showToast`显示临时提示 #### 4. 资源准备 1. 在`resources > base > media`中添加QQ Logo图片 2. 在`resources > base > element`中配置颜色值 3. 创建对应的注册页和忘记密码页 #### 5. 运行调试 - 使用预览器查看实时效果 - 连接真机进行功能测试 - 使用HiLog进行调试输出
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王睿丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值