DevEco Studio安装+基本使用

-青山如故

1839人浏览 · 2024-10-28 09:36:31

-青山如故 · 2024-10-28 09:36:31 发布

🌈个人主页：前端青山
🔥系列专栏：鸿蒙开发篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来鸿蒙开发篇专栏内容:鸿蒙开发-DevEco Studio安装+基本使用

安装失败正常的，并且对电脑配置有要求一般内存小于8G 非常卡或者用不了。

1.进入DevEco Studio下载官网，单击“立即下载”进入下载页面

DevEco Studio提供了Windows版本和Mac版本选择，可以根据操作系统选择对应的版本进行下载。

Mac(ARM)是指搭载苹果自研的ARM架构处理器的Mac电脑，比如搭载M1芯片的MacBook Air和MacBook Pro。这些处理器是由苹果自行设计的，与之前使用的英特尔x86架构处理器不同。 Mac(X86)是指搭载英特尔x86架构处理器的Mac电脑，比如之前的MacBook、iMac和Mac Pro等。这些处理器是由英特尔生产的，是传统的计算机处理器架构。

2.安装

双击程序包安装

选择安装路径可以默认也可以指定都行 d:\huawei\DevEco

安装中

3.配置环境

电脑左下角菜单输入 deveco 切记右击管理员身份运行。 70% 不用，30% 电脑权限

双击已安装的DevEco Studio快捷方式进入配置页面，IDE会进入配置向导，选择Agree，同意相应的条款，进入配置页

进入DevEco Studio配置页面，首先需要进行基础配置，包括Node.js与Ohpm（鸿蒙的包管理工具)的安装路径设置，选择从华为镜像下载至合适的路径。

推荐安装目录 d:\huawei\nodejs d:\huawei\ohpm

单击'Next'进入SDK配置，设置为合适的路径， d:\huawei\sdk

点击'Next'后会显示'SDK License Agreement'，阅读相关协议后，勾选'Accept'。

单击‘Next’进入配置预览页，在这里进行配置项的确认。

确认完成后，单击'Next'，进入下一步。（非常慢）

等待配置自动下载完成，完成后，单击'Finish'，IDE会进入欢迎页，我们也就成功配置好了开发环境。

!!! 校验配置环境是否成功点击Create Project 创建项目，出现项目创建页面，则为配置成功，否则根据提示，进一步继续配置（注意编辑器的红色提示点击后面的蓝色设置字样继续配置） !!! 有20%小伙伴出现不了配置ohpm、和sdk的界面那么你直接检查环境是否成功去安装

4.调整编译语言 1.点击右下角configure

2.点击Preferences/Settings

3.点击左边Plugins，并在搜索框输入chinese

切记点击Installed 勾选就可以

4.输入中文插件并点击右下角OK

5.点击Restart重启后切换完成

5.创建项目

如果你是首次打开DevEco Studio，那么首先会进入欢迎页。如果已经使用过那么会有之前项目的选项

1.新建项目

欢迎使用DEVECO STUDIO

最近工程

DEVECO STUDIO

印

新建项目

打开项目

2.选择空白模板

3.项目配置

●Project name是开发者可以自行设置的项目名称，这里根据自己选择修改为自己项目名称。

●Bundle name是包名称，默认情况下应用ID也会使用该名称，应用发布时对应的ID需要保持一致。

a.b.c a 国家 cn 其他 com b 公司名字 c 项目名字

●Save location为工程保存路径，建议用户自行设置相应位置。

●Compile SDK是编译的API版本，这里默认选择API9。

●Model选择Stage模型，其他保持默认即可。

点击Finish 等待项目创建完成

项目创建完成后会自动下载依赖

4.运行项目

咱们可以通过预览器运行，也可以通过模拟器、或者真机测试考虑到咱们普遍0基础所以呢后续讲解今天先体验

5.修改编辑器配置

把当前运行运行到模拟器是会把ets代码进行打包，最后会打包出.js文件和.map文件这些都是打包源码，一般来说不需要进行额外处理，所以在编辑器中进行忽略

添加.js .map

6.模拟器

预览器

1-开发的时候好好的，真机测试就各种问题、

2-预览器仅支持预览效果例如网络请求、拍照等；

买个手机成本大因此使用模拟器（刚好部分小伙伴用不了预览器）

初次进入点击 install 安装

C\USERS\86188VAPPDATA\LOCALHUAWEI(HARMONYOSEMULATONDEPLOYED

第一次启动一般需要一些时间

后续讲解如何修改图标以及名字

7.真机运行

后面再说配置签名

6.目录介绍

1.文件结构 .hvigor和.idea

ide配置文件

AppScope

中存放应用全局所需要的资源文件。

鸿蒙支持单模块也支持多模块开发

多模块开发类似于前端多页面应用类似于小程序分包机制项目右键点击新建模块，取名未 other 默认模块为entry，新建模块 other，二者都需要使用的资源文件则可放到 AppScope文件夹

entry

应用的主模块，存放HarmonyOS应用的代码、资源（也就是静态文件）等

oh_modules

工程的依赖包，存放工程依赖的源文件。可以理解成node_modules

build-profile.json5

工程级配置信息，包括签名、产品配置等。可以简单理解为后续打包发布需要的一些配置

hvigorfile.ts

工程级编译构建任务脚本，hvigor是基于任务管理机制实现的一款全新的自动化构建工具，主要提供任务注册编排，工程模型管理、配置管理等核心能力

oh-package.json5

工程级依赖配置文件，用于记录引入包的配置信息，类似于前端vue项目中的package.json文件。

2.entry模块目录说明

entry>src目录中主要包含总的main文件夹，单元测试目录ohosTest，以及模块级的配置文件

.preview和build

预览和真机模拟时生成的目录，如果没有进行预览或者真机模拟则没有，一般不需要管理

src

项目源码录了

src>main

项目入口目录

src>main>ets

ets代码或者项目代码

src>main>ets>entryability

存放ability文件，用于当前ability应用逻辑和生命周期管理

src>main>ets>pages

存放UI界面相关代码文件，初始会生成一个Index页面

src>main>resources

静态资源

entry>src>main>module.json5

文档中心参考链接

{
  "module": {
    // 该标签标识当前module的名字，module打包成hap后，表示hap的名称，标签值采用字符串表示（最大长度31个字节），该名称在整个应用要唯一
    "name": "entry",
    // 标识当前Module的类型。类型有两种，分别：- entry：应用的主模块。- feature：应用的动态特性模块。
    "type": "entry",
    // 描述
    "description": "$string:module_desc",
    // 该标签标识hap的入口ability名称或者extension名称。只有配置为mainElement的ability或者extension才允许在服务中心露出
    "mainElement": "EntryAbility",
    // 该标签标识hap可以运行在哪类设备上，标签值采用字符串数组的表示。
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    // 标识当前Module是否在用户主动安装的时候安装，表示该Module对应的HAP是否跟随应用一起安装。- true：主动安装时安装。- false：主动安装时不安装
    "deliveryWithInstall": true,
    // 标识当前Module是否支持免安装特性。- true：表示支持免安装特性，且符合免安装约束。- false：表示不支持免安装特性
    "installationFree": false,
    // 对应的是main_pages.json文件，用于配置ability中用到的page信息。 可以理解为路由表，按住command点击可以进入
    "pages": "$profile:main_pages",
    // 存放当前模块中所有的ability元能力的配置信息，其中可以有多个ability
    "abilities": [
      {
        // 该标签标识当前ability的逻辑名，该名称在整个应用要唯一，标签值采用字符串表示（最大长度127个字节）
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        // 描述,
        // ability的入口代码路径。,
        "name": "EntryAbility",
        "description": "$string:EntryAbility_desc",
        // ability的图标。该标签标识ability图标，标签值为资源文件的索引。该标签可缺省，缺省值为空。如果ability被配置为MainElement，该标签必须配置
        "icon": "$media:icon",
        // ability的标签名。
        "label": "$string:EntryAbility_label",
        // 启动页面的图标。
        "startWindowIcon": "$media:icon",
        // 启动页面的背景色。
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        // 标识能够接收的意图的action值的集合，取值通常为系统预定义的action值，也允许自定义。
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ]
  }
}

修改实际项目的图标和文字

将此logo复制到项目目录 entry/src/main/resources/base/media/deepcode_logo.png

打开entry/src/main/resources/zh_CN/string.json，替换如下字段

build-profile.json5

模块级配置信息，包括编译构建配置项

hvigorfile.ts

文件是模块级构建脚本

oh-package.json5

模块级依赖配置信息文件

onosTest

单元测试目录，用来对代码进行单元测试。新手可以直接删除，降低理解难度

7.ArkUI组件

也就是之前html里面的标签 + css样式二次封装的产物

粗略讲第一天快速入个门后面还会有很多很多细节

内置组件

1.Column、Row

// 鸿蒙 组件化开发思想
// ets页面 可以写多个组件
// 页面执行渲染结果 看哪个组件包含 @Entry 这个装饰器 - 一个页面有且只有一个Entry
// 每一个组件都需要通过 @Component 装饰器来装饰
// 每一个组件都用struct关键字。可以理解为es6中的class，不可以继承
// 每一个组件都必须得实现build函数，build函数内部放置 ArkUI
// 组件的首字母一定要大写，且使用大驼峰式命名 ChildCom
// ArkUI组件调用均使用的是函数的形式（html中标签形式）
// build函数内部只能有一个顶级组件
@Entry
@Component
struct Index {
  build() {
    Column() { // 顶级组件
      // Column 列布局 在垂直的方向上布局
      Column() { // 列组件内的元素将以上下的形式呈现
        Text('您好')
        Text('hello')
      }
      .width('100%') // 列方向元素指定宽度后 默认为水平方向居中
      .backgroundColor(Color.Yellow) // 枚举Color

      // Row 行布局 在水平方向上布局
      Row() {// 行组件内的元素将以左右的形式呈现
        Text('您好')
        Text('hello')
      }
      .width('100%')
      .height(60)  // 行方向元素指定高度后 默认为垂直方向居中
      .backgroundColor('#f00')
    }
  }
}

2.Image

html 写标签/写属性

<img src=""  width="" height="" />

arkts 写组件/写属性

Image(src: string|Resource)
    .width(100)
    .height(100)
    .broderRadius(10)

@Entry
@Component
struct Index {
  build() {
    Column() {
      // Image 图片一般需要指定宽高
      // Image(str: string | Resource)
      Text('远程图片地址') // string
      Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
        .width(100)

      Text('本地资源')
      // 可以将图片直接放在 src/main/resources/base/media内
      // 后续可以通过 $r('app.media.*')访问本地图片
      Image($r('app.media.deepcode_logo')) // Resource
        .width(100)

      // 上述访问本地图片不合理
      // 假如项目中需要根据功能将图片放置到不同的文件夹用以区分
      // 可以在 src/main/resources/rawfile文件夹内根据业务创建不同的文件夹
      //  后续可以通过$rawfile('文件夹/图片')访问本地图片
      Text('本地资源')
      Image($rawfile('logo/deepcode_logo.png')) // Resource
        .width(100).height(100)
    }
  }
}

3.Text

html 写标签

<span>hello</span>
<div>hello</div>
<h1>hello</h1>

arkts 写组件/写属性

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Hello world')
        .fontSize(30)
        .fontColor(Color.Red)
        // .fontWeight(FontWeight.Bold)
        .fontWeight(800)
        .fontStyle(FontStyle.Italic)
    }
    .width('100%')
  }
}

4.TextInput

html 写标签

<input typet="text" placeholder="请输入内容" value="默认数据" />

arkts 写组件/写属性

TextInput( { 名字:数据, 名字:数据 } ) 留心1：写的是花括号留心2：名字:数据多个之间逗号隔开名字不是随便写的鸿蒙规定好了具体有哪些后期带你看手册今天快速入门

TextInput({placeholder?:"请输入内容", text?:"默认数据"})
  .width('100%')
  .height(50)
  .backgroundColor('#000')

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 输入框
      TextInput({
        placeholder: '请输入需要搜索的内容',
        text: '默认值'
      })
        .width('100%')
        .height(50)
        .backgroundColor('#f66')
    }
    .width('100%')
  }
}

5.Button

html 写标签

<button>内容</button>

arkts 写组件/写属性

Button() {
    Image(图片).width()
}

Button(label?: ResourceStr)
 .width('100%')
 .height(50)
 .type(ButtonType.Normal)
 .onclick(() => {
 
 })

立即登录

8.实战案例：今日头条鸿蒙App密码登录页

代码

@Entry
@Component
struct TouTiao {

  build() {
    Column(){
      Row () {
        Image('https://p3-search.byteimg.com/img/labis/058353431f348572d9fa50b70d6a75d8~tplv-26tn0yjwph-cspd-v1:180:180.jpeg')
          .width(90)
        Text('密码登录')
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .margin({ left: 10 })
      }.width('100%')
      Row () {
        TextInput({ placeholder: '手机号/邮箱'})
          .height(60)
          .backgroundColor('#fff')
          .fontSize(26)
          .borderRadius(0)
          .border({
            width: { bottom: 2 },
            color: '#dadada'
          })
          .placeholderColor('#acacac')
          .placeholderFont({ size: 26 })
      }.margin({ top: 40 })
      Row () {
        TextInput({ placeholder: '密码'})
          .height(60)
          .backgroundColor('#fff')
          .fontSize(26)
          .borderRadius(0)
          .border({
            width: { bottom: 2 },
            color: '#dadada'
          })
          .placeholderColor('#acacac')
          .placeholderFont({ size: 26 })
      }.margin({ top: 40 })

      Button('立即登录')
        .width('100%')
        .height(60)
        .fontSize(24)
        .type(ButtonType.Normal)  // 按钮类型设置简单 --- 推荐
        .backgroundColor('#ea4a45')
        .margin({ top: 30 })
    }
      // .width('100%')
      // .height('100%')
      .padding({
        top: 80,
        left: 20,
        right: 20
      })
      // .backgroundColor('#f66')
  }
}

尝试写一些其他的应用的表单页面，比如登录页面/注册页面/完善个人信息页面

京东登录注册

+86`请输入手机号

获取验证码

请输入收到的验证码

账号密码登录

手机快速注册

其他登录方式

用户隐私政

我已阅读并同意京东用户服务协议

策,未注册的手机号将自动创建京东账号