# DevEcoStudioInstallationTutorial **Repository Path**: ZBeeeeeeeeee/dev-eco-studio-installation-tutorial ## Basic Information - **Project Name**: DevEcoStudioInstallationTutorial - **Description**: DevEco Studio 安装及快速上手指南 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-12-04 - **Last Updated**: 2022-12-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # DevEco Studio 安装及快速上手指南 > 本教程讲针对 DevEco Studio 3.1 Canary 1 的安装步骤进行讲解，并包含一个 Hello World 快速上手指南。 ## 1. 写在前面，硬件设备要求 为了满足本实验需要，建议每套实验环境采用以下配置： - 操作系统：Windows 10 64 位及以上 - 内存：8GB 及以上 - 硬盘：100GB 及以上 - 分辨率：1280*800 及以上 ## 2. 准备工具，下载安装 DevEco Studio 打开 DevEco Studio 下载页（链接地址：），点击下载按钮。 ![image-20221204211659766](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204211659766.png) 首次打开会弹出如下 Beta 试用协议对话框，勾选**我已经阅读并同意 HUAWEI DevEco Studio Beta 试用协议**后，点击**同意**即可开始下载。 ![image-20221204211817114](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204211817114.png) 下载完成后，需要解压缩“devecostudio-windows-tool-3.1.0.100.zip”，解压缩后会得到一个名为“devecostudio-windows-tool-3.1.0.100.exe”的安装包，双击即可进入 DevEco Studio 安装向导。在如下界面选择安装路径，默认安装于 C:\Program Files 路径下，也可以单击**Browse...**指定其他安装路径，然后单击**Next**。 ![image-20221204212241916](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204212241916.png) 在如下安装选项界面勾选**DevEco Studio**后，单击**Next**，直至安装完成。 ![0000000000011111111.20221106172404.32024554562012584007355959790414:50531105102829:2800:DD2274CE4A17ABBA3493868CC180BB50708043FE19846D5E8B9C0BB09C647910.png](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221106172404.32024554562012584007355959790414:50531105102829:2800:DD2274CE4A17ABBA3493868CC180BB50708043FE19846D5E8B9C0BB09C647910.png) 安装完成后，单击**Finish**完成安装。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221106172404.37294327967272373906417398919161:50531105102829:2800:0ACAC58E234966D76D9C620D4070357A245BA68B9B29EE5AB031665F487F94D5.png) ## 3. 首次运行，修改启动配置 首次启动 DevEco Studio 时，会进行 SDK 的配置、下载与安装。下面介绍相关流程： 运行已安装的 DevEco Studio，首次使用，请选择**Do not import settings**，单击**OK**。 ### 3.1 NPM 和 Node.js 相关配置 接下来会自动进入 DevEco Studio 操作向导页面，提示是否要修改**npm registry**，由于 DevEco Studio 已预置对应的仓，这里无需修改，直接单击**Start using DevEco Studio**进入下一步即可。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221106172405.75505383246760559398018408923240:50531105102829:2800:00A3A9F6CFDD2531BEE0D98B03C7EFCEEC3CD298BE20CB330BCD150578A72723.png) 接下来会展示“Node.js Setup”对话框，询问是否需要修改 Node.js 信息。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221106172405.83765860154241033237181048876337:50531105102829:2800:FB9283AD800F9F6A1F2E0C1854D0FA2849775370AD4DAF0C0D94CEE26C4A5194.png) 这里有两个选项供选择，分别为： - **Local**：选择此选项，则需要指定本地已安装的 Node.js。但需要注意的是，**Node.js 版本要求为 v14.19.1 及以上，且低于 v15.0.0**；对应的 npm 版本要求为 6.14.16 及以上，且低于 7.0.0 版本。 - **Download**：选择此选项，将会在线下载 Node.js，这里需要我们选择 Node.js 下载源，给我们提供了两个选项，分别为： - **Huawei mirror**，选择此选项，将会从华为镜像站点下载； - **Node.js official site**，选择此选项，将会从部署在海外的 Node.js 官方站点下载。 这里建议选择：**Download** > **Node.js official site**，选择下载源和存储路径后，单击**Next**进入下一步。 > 这一步在选择存储路径时需要注意，路径中不能有中文或全角符号，只能有 ASCII 字符（英文和常见半角符号），否则会提示错误信息：**The Node.js path cannot contain non-ASCII characters.** 接下来需要等待 Node.js 安装完成，安装完成后如下图，点击**Finish**按钮进入下一步。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221106172405.48510832013556359199741433365311:50531105102829:2800:3B73D0A7EDDEE31E8D3056054B566208612F6AE74982794DDACE97FE51083526.png) ### 3.2 SDK 相关配置 接下来会进入“SDK Setup”界面，首先会进入“SDK Components Setup”页，这里需要开发者设置两个路径，分别为： - OpenHarmony SDK 存储路径，用于存储 OpenHarmony SDK； - HarmonyOS SDK 存储路径，用于存储 HarmonyOS SDK。 > 关于 OpenHarmony 与 HarmonyOS 的区别此处不做赘述。 > > 这里需要注意，OpenHarmony SDK 和 HarmonyOS SDK 不能设置为同一个路径，且路径中不能包含中文字符。建议在硬盘剩余空间较为充裕的磁盘新建两个空文件夹，分别命名为`OpenHarmony-SDK`和`HarmonyOS-SDK`，之后在该页面进行路径的设置。 设置好 OpenHarmony SDK 和 HarmonyOS SDK 存储路径后，单击**Next**进入下一步。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221106172405.59521647865479682913469637909673:50531105102829:2800:DD89AF8EA7E80A597B301AE9BB9BABDC1118AE8DCED6C9172CC1766D622AC695.png) 接下来会弹出 Settings Confirmation 页，即 SDK 下载信息确认页面，单击**Next**即可。之后会弹出**License Agreement**窗口，这里需要开发者阅读 License 协议。 需同意 License 协议后（需同时接受 OpenHarmony SDK 和 HarmonyOS SDK 的 License 协议，**需要分别每一个都各自点击 Accept 单选按钮一次**），单击**Next**开始下载 SDK。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221106172405.51649167771839009559021597880816:50531105102829:2800:DB1B21022F68F1048432FDA1E536B293E9ED77F8595CD170722E27982666646A.png) 接下来需要等待 SDK 下载完成，这一过程根据网速和网络环境，可能耗时 5-20 分钟。下载完成后，单击**Finish**，即可完成 SDK 的下载，界面会进入到 DevEco Studio 欢迎页。 ## 4 快速上手，创建运行 Hello World DevEco Studio 配置开发环境完成后，可以通过运行 Hello World 工程来验证环境设置是否正确。接下来以创建一个 Phone 设备的工程为例进行介绍。 ### 4.1 创建工程 首先，打开 DevEco Studio，在欢迎页单击**Create Project**，创建一个新工程（如果此前创建过或者打开过其他工程，将不会进入欢迎页，这是需要点击顶部菜单栏中的 File > New > Create Project，进行工程创建）。 根据工程创建向导，在**HarmonyOS**页签，选择“Empty Ability”模板，然后单击**Next**。 > 关于其他工程模板的介绍等信息，请参考 [工程模板和开发语言介绍](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/device_template-0000001053702407)。 ![image-20221204220708184](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204220708184.png) 接下来会进入工程配置页面，这里需要填写工程相关信息，如果是第一次创建则保持默认值即可，单击**Finish**。 > 关于各个参数的详细介绍，请参考 [创建一个新的工程](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/create_new_project-0000001053342414)。 ![image-20221204234012917](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204234012917.png) 工程创建完成后，DevEco Studio 会自动进行工程的同步，同步成功如下图所示： ![image-20221204221209133](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204221209133.png) ### 4.2 启动远程模拟器 Hello World 工程可以运行在模拟器中，或者运行在真机设备设备中。本示例以选择将 Hello World 工程运行在**模拟器**中进行说明。 DevEco Studio 提供远程模拟器和本地模拟器，本示例以**远程模拟器**为例进行说明。 首先需要在 DevEco Studio 顶部菜单栏，点击**Tools > Device Manager**，打开设备管理器，之后选择**Remote Emulator**页签，点击**Sign In**按钮。 ![image-20221204222345801](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204222345801.png) 点击后会在系统默认浏览器中打开华为开发者联盟帐号登录界面，请在界面中输入华为账号和密码进行登录。 ![image-20221204222457513](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204222457513.png) 登录后，如果是首次在该浏览器上登录会弹出身份验证对话框，请根据提示进行身份验证后，点击**确定**按钮。 ![image-20221204223116386](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204223116386.png) 之后回询问是否信任该浏览器，这里建议选择**信任**。 ![image-20221204223153485](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204223153485.png) 如果该华为账号此前已经过开发者实名认证，则接下来会提示“使用华为账号登录 DevEco Studio”对话框，点击**允许**。 ![image-20221204223225499](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204223225499.png) 登录成功后会提示如下界面。回到 DevEco Studio 的 Device Manager，就会看到 Remote Emulator 页签中展示的远程模拟器列表。 ![image-20221204223237040](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204223237040.png) ### 4.3 开发者实名认证 如果账号尚未进行实名认证，将会进入实名认证页面，这里建议选择**个人开发者认证**中的**银行卡认证**。 首先选择**个人开发者**认证，并点击**下一步**。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20210910144403.72088817823194001327494822201583:50520909065942:2800:83086B1432B1741B4E395811280BB2792EC43B3BA919DDD804948F66836C7E0B.png) 之后选择“个人银行卡认证”，进入银行卡认证界面。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20210910144403.79006407034628867050299353497319:50520909065942:2800:81FDE5915295496941E59C401D649BDE6528BF0B3FA74CD6049145CAC77FDE6F.png) 接下来需要完善银行卡信息。需要填写真实姓名、身份证号、对应身份证号的银行卡号以及银行卡号绑定的手机号。如果填写的信息正确，点击“下一步”跳转到完善更多资料页面。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20210910144403.03656583937855732994549403582752:50520909065942:2800:F672584191FB825C9FE23D5A653E133B8D4BB57DCDA596DEBD3FA8C5A36C5DA2.png) 在完善更多资料页面，填写所有必填项（标有红色星号（*）），并阅读并勾选《华为开发者联盟与隐私的声明》和《华为开发者服务协议》，点击“提交”，完成认证。 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20210910144403.86624521623178728944770666503959:50520909065942:2800:BD59AA76EEED02F77E6661D54F47E4532BA09979E2A45C7395C77EA481BEBEFB.png) 完成上述步骤后，就完成了开发者实名认证。回到 DevEco Studio 的 Device Manager，退出账号并重新登录，并重新进行授权，就会看到 Remote Emulator 页签中展示的远程模拟器列表。 ### 4.4 使用远程模拟器运行 Hello World 登录成功后，进入 DevEco Studio 的 Device Manager，将会展示可用的远程模拟器列表。选择合适的模拟器，并点击右侧的▶️图标运行。 ![image-20221204223812737](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204223812737.png) 成功运行后，在 DevEco Studio 右侧，将会展示 Remote Emulator 页，页面中将会展示运行的远程模拟器。 ![image-20221204223939379](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204223939379.png) 点击 DevEco Studio 顶部右侧工具栏中的运行按钮▶️，开始将项目运行在模拟器。 ![image-20221204224219315](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204224219315.png) 稍等片刻，项目运行成功后，在远程模拟器中即可见到 Hello World 运行效果。 ![image-20221204224147281](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/image-20221204224147281.png) ## 5 继续进阶，增加页面跳转功能 观察工程目录结构如下图： ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221104185609.93812999186439017239215430290055:50531103112737:2800:594661F5A4C1F750AC6B89837399A977178688B27F6965C5630FA4025D31A243.png) 接下来需要构建两个页面，并在两个页面之间实现页面跳转。 ### 5.1 构建第一个页面 在页面左侧“Project”栏，点击“**entry > src > main > ets > MainAbility > pages**”，打开`index.ets`文件，修改其代码如下： ```typescript // index.ets @Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // 添加按钮，以响应用户点击 Button() { Text('Next') .fontSize(30) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') } .width('100%') } .height('100%') } } ``` 在编辑窗口右上角的侧边工具栏，点击 Previewer，打开预览器。第一个页面效果如下图所示： ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221104185609.39577525575571483258697389966197:50531103112737:2800:38685DA79C92197FBA4AB0BB68D12A5751253DBFA63C76929FB9ADA0E110EA84.png) ### 5.2 构建第二个页面 在页面左侧“Project”栏，打开“**entry > src > main > ets > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > eTS File**”，命名为“**second**”，点击“**Finish**”。可以看到文件目录结构如下： ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221104185609.60540023505398031020526785206757:50531103112737:2800:D0BB1E6CC6619654771AE0C1A3CDAD7118769A6EC67B3A4184933F710B1275BC.png) 接下来需要修改`config.json`文件，双击打开该文件，修改其代码，找到`module > js > pages`，在其中添加第二个路由，代码为： ``` "pages/second" ``` 该文件相关代码如下（注意`"pages/second"`为新增）： ```json { ... "module": { "js": [ { ... "pages": [ "pages/index", "pages/second" ], ... } } ] } } ``` 接下来修改刚刚创建的第二个页面。在页面左侧“Project”栏，点击“**entry > src > main > ets > MainAbility > pages**”，打开`second.ets`文件，修改其代码如下： ```typescript // second.ets @Entry @Component struct Second { @State message: string = 'Hi there' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) Button() { Text('Back') .fontSize(25) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') } .width('100%') } .height('100%') } } ``` ### 5.3 实现页面间跳转 页面间的导航可以通过页面路由 router 来实现。页面路由 router 根据页面 url 找到目标页面，从而实现跳转。使用页面路由请导入 router 模块。 在页面左侧“Project”栏，点击“**entry > src > main > ets > MainAbility > pages**”，打开`index.ets`文件，为其中的跳转按钮绑定 onClick 事件，点击按钮时跳转到第二页。修改其代码如下： ```typescript // index.ets import router from '@ohos.router'; @Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // 添加按钮，以响应用户点击 Button() { Text('Next') .fontSize(30) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') // 跳转按钮绑定 onClick 事件，点击时跳转到第二页 .onClick(() => { router.push({ url: 'pages/second' }) }) } .width('100%') } .height('100%') } } ``` 接下来实现第二个页面返回到第一个页面。在页面左侧“Project”栏，点击“**entry > src > main > ets > MainAbility > pages**”，打开`second.ets`文件，修改其代码如下： ```typescript // second.ets import router from '@ohos.router'; @Entry @Component struct Second { @State message: string = 'Hi there' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) Button() { Text('Back') .fontSize(25) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#0D9FFB') .width('40%') .height('5%') // 返回按钮绑定 onClick 事件，点击按钮时返回到第一页 .onClick(() => { router.back() }) } .width('100%') } .height('100%') } } ``` 打开 index.ets 文件，点击预览器中的 ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221104185609.08215509747282634383619315135615:50531103112737:2800:E076A2C27C6E7B4C1E925519047C1CE02CA889DE8B9950F227F9E542F827B530.png) 按钮进行刷新。 效果如下图所示： ![img](https://mypic-1258412503.cos.ap-nanjing.myqcloud.com/0000000000011111111.20221104185609.90086963398817148914998313880265:50531103112737:2800:971A7D046E78F656D3DAC5FEB763BEC862A9ED44D60C75CC1E346A297E1A6047.png) 使用远程模拟器效果相同。