鸿蒙开发前置基础写鸿蒙代码前面先把工具整好认知清楚是比较重要的前置硬件条件启用中文化插件单击File > Sett

写鸿蒙代码前面先把工具整好认知清楚是比较重要的

前置硬件条件

启用中文化插件

单击File > Settings（macOS为DevEco Studio > Preferences ） > Plugins，选择Installed页签，在搜索框输入“Chinese”，搜索结果里将出现Chinese(Simplified) ，在右侧单击Enable，单击OK。再重启即可生效，对英文菜鸡比较合适（比如我也是英文盲）

创建一个新工程

打开DevEco Studio，在欢迎页单击Create Project，创建一个新工程。
根据工程创建向导，选择创建Application或Atomic Service。选择Empty Ability模板，然后单击Next。关于工程模板的介绍和支持的设备类型，请参考工程模板介绍。

一般我们选择空模板即可

项目介绍

基础配置文件的介绍

只说明ArkTS Stage模型其他FA模型、C++工程目录结构（Stage模型）暂不再此学习范畴内后续所有文档介绍也是围绕这ArkTS工程目录结构（Stage模型）

Entry： 应用的主模块，作为应用的入口，提供了应用的基础功能
app.json5：应用的全局配置信息
src > main > ets：用于存放ArkTS源码。
src > main > ets > entryability：应用/服务的入口。
src > main > ets > pages：应用/服务包含的页面。
src > main > resources： 用于存放应用/服务模块所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件的详细说明请参考资源分类与访问。
src > main > module.json5：Stage模型模块配置文件，主要包含HAP的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。具体请参考module.json5配置文件。
build-profile.json5： 当前的模块信息、编译信息配置项，包括buildOption、targets配置等。
hvigorfile.ts：模块级编译构建任务脚本。
oh-package.json5：描述三方包的包名、版本、入口文件（类型声明文件）和依赖项等信息
oh_modules：用于存放三方库依赖信息，包含应用/服务所依赖的第三方库文件。
build-profile.json5： 应用级配置信息，包括签名、产品配置等。
hvigorfile.ts： 应用级编译构建任务脚本。
oh-package.json5： 描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

编辑器好用的技巧

通过连续点击两次 Shift快捷键，打开代码查找界面，在搜索框中输入需要查找内容，下方窗口实时展示搜索结果。
Show in API Reference 快速查阅API接口及组件参考文档
代码自动补全 自动补齐功能默认按最短路径进行排序，如仅需按照最近使用过的类、方法、字段和关键字等名称提供补全内容排序，可以在File > Settings （MacOS为DevEco Studio > Preferences） > Editor > General > Code Completion 中勾选“Sort suggestions by recently used”。
ArkTSDoc生成步骤

在菜单栏选择Tools > Generate ArkTSDoc... 进入ArkTSDoc生成界面。
设置生成ArkTSDoc的范围，可选择整个工程、某个模块或目录、单个文件进行导出。在Output directory中指定导出ArkTSDoc的存储路径。
若勾选Open generated documentation in browser选项，在生成ArkTSDoc后，将自动打开相应页面查看生成的文档。配置完毕后点击Generate，开始扫描并生成ArkTSDoc文档。若没有勾选Open generated documentation in browser选项，在生成ArkTSDoc后，DevEco Studio右下角弹出对应提示框，可以点击Go to Folder跳转到生成的ArkTSDoc文件夹，用浏览器打开文件夹中index.html文件即可查看ArkTSDoc文档。

ArkUI预览支持页面预览与组件预览，下图中左侧图标为页面预览，右侧图标为组件预览
在单个源文件中，最多可以使用10个@Preview装饰自定义组件
多端设备预览最多同时支持4个设备的预览

预览配置

@Preview({
  title: 'Component1', //预览组件的名称
  deviceType: 'phone', //指定当前组件预览渲染的设备类型，默认为Phone
  width: 1080, //预览设备的宽度，单位：px
  height: 2340, //预览设备的长度，单位：px
  colorMode: 'light', //显示的亮暗模式，当前支持取值为light
  dpi: 480, //预览设备的屏幕DPI值
  locale: 'zh_CN', //预览设备的语言，如zh_CN、en_US等
  orientation: 'portrait', //预览设备的横竖屏状态，取值为portrait或landscape
  roundScreen: false //设备的屏幕形状是否为圆形
})

Stage模型概念图

Stage模型提供UIAbility和ExtensionAbility两种类型的组件，这两种组件都有具体的类承载，支持面向对象的开发方式。

UIAbility组件

UIAbility组件是一种包含UI的应用组件，主要用于和用户交互。例如，图库类应用可以在UIAbility组件中展示图片瀑布流，在用户选择某个图片后，在新的页面中展示图片的详细内容。同时用户可以通过返回键返回到瀑布流页面。UIAbility的生命周期只包含创建/销毁/前台/后台等状态，与显示相关的状态通过WindowStage的事件暴露给开发者。

ExtensionAbility组件

ExtensionAbility组件是一种面向特定场景的应用组件。开发者并不直接从ExtensionAbility派生，而是需要使用ExtensionAbility的派生类。目前ExtensionAbility有用于卡片场景的FormExtensionAbility，用于输入法场景的InputMethodExtensionAbility，用于闲时任务场景的WorkSchedulerExtensionAbility等多种派生类，这些派生类都是基于特定场景提供的。例如，用户在桌面创建应用的卡片，需要应用开发者从FormExtensionAbility派生，实现其中的回调函数，并在配置文件中配置该能力。ExtensionAbility派生类实例由用户触发创建，并由系统管理生命周期。在Stage模型上，普通应用开发者不能开发自定义服务，而需要根据自身的业务场景通过ExtensionAbility的派生类来实现。

WindowStage

WindowStage：每个UIAbility类实例都会与一个WindowStage类实例绑定，该类提供了应用进程内窗口管理器的作用。它包含一个主窗口。也就是说UIAbility通过WindowStage持有了一个主窗口，该主窗口为ArkUI提供了绘制区域。

Context

Context：在Stage模型上，Context及其派生类向开发者提供在运行期可以调用的各种资源和能力。UIAbility组件和各种ExtensionAbility派生类都有各自不同的Context类，他们都继承自基类Context，但是各自又根据所属组件，提供不同的能力。

AbilityStage

AbilityStage：每个Entry类型或者Feature类型的HAP在运行期都有一个AbilityStage类实例，当HAP中的代码首次被加载到进程中的时候，系统会先创建AbilityStage实例。每个在该HAP中定义的UIAbility类，在实例化后都会与该实例产生关联。开发者可以使用AbilityStage获取该HAP中UIAbility实例的运行时信息。

why ArkTS

新建页面（这里配置文件路径路由跳转时候需要用到）

配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

路由跳转简介（后续会详细比对不同方式）

实现页面间的跳转**

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

如果需要实现更好的转场动效，推荐使用Navigation。

// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

// 添加按钮，以响应用户点击
Button() {
    Text('Next')
      .fontSize(30)
      .fontWeight(FontWeight.Bold)
    }
    .type(ButtonType.Capsule)
    .margin({
        top: 20
    })
    .backgroundColor('#0D9FFB')
    .width('40%')
    .height('5%')
    // 跳转按钮绑定onClick事件，点击时跳转到第二页
    .onClick(() => {
        console.info(`Succeeded in clicking the 'Next' button.`)
        // 跳转到第二页
        router.pushUrl({ url: 'pages/Second' }).then(() => {
          console.info('Succeeded in jumping to the second page.')

        }).catch((err: BusinessError) => {
          console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
        })
    })

返回到上一个页面

// 返回
 router.back()

注意上面的这种已经不推荐使用了但是这样的也是可以玩，api9 - api12以前是这样玩的

安装

### 安装
ohpm install @hadss/hmrouter

或者直接修改oh-package.json5自动下载

{
  "dependencies": {
    "@hadss/hmrouter": "^1.0.0-rc.5"
  }
}

使用配置

修改项目的hvigor/hvigor-config.json文件，加入路由编译插件

{
  "dependencies": {
    "@hadss/hmrouter-plugin": "^1.0.0-rc.4" // 使用npm仓版本号
  },
  // ...其他配置
}

在模块中引入路由编译插件，修改hvigorfile.ts

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { hapPlugin } from '@hadss/hmrouter-plugin';

export default {
  system: hapTasks,
  plugins: [hapPlugin()] // 使用HMRouter标签的模块均需要配置，与模块类型保持一致
}

使用

在UIAbility或者启动框架AppStartup中初始化路由框架

// 注意需要先导入
import { HMRouterMgr } from '@hadss/hmrouter'

export default class EntryAbility extends UIAbility {

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 初始化
    HMRouterMgr.init({
      context: this.context
    })
  }
}

Index.ets 页面使用

// 推荐方式
import { HMNavigation,HMRouterMgr } from '@hadss/hmrouter'

// 原有方式
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
        // 使用HMNavigation容器
        HMNavigation({
          navigationId: 'mainNavigation', options: {
            // 需要先导入
            // standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
            // dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
            // 需要定义
            // modifier: modifier
          }
        }) {
          Row() {
            // 推荐方式跳转 （官方推荐 Navigation）
            Button('按钮').width(100).height(100).backgroundColor('#eeeeee').onClick(()=>{
              HMRouterMgr.push({pageUrl: 'SendPage'})
            })
            // 原有方式跳转（官方表明不推荐，具体看给出说明和新方案）
            Button('按钮2').width(100).height(100).backgroundColor('#eeeeee').onClick(()=>{
              router.pushUrl({
                url: 'pages/Send' // 目标url
              })
            })
          }
          .width('100%')
          .height('100%')
        }
    }
    .height('100%')
    .width('100%')
  }
}

需要跳转的页面

// 核心
import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'
@HMRouter({ pageUrl: 'SendPage' })

@Entry
@Component
export struct Send {
  @State message: string = '我是第二个页面';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('SendHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      Button('返回').width(100).height(100).backgroundColor('#eeeeee').onClick(()=>{
        // 返回上一个页面
        HMRouterMgr.pop()
      })
    }
    .height('100%')
    .width('100%')
  }
}

解决模拟器调试

遇到下面的错误

检查你的电脑是否支持Hyper-V

1、打开命令提示符。键入Systeminfo，然后按Enter键。

2、导航到Hyper-v要求部分，了解Hyper-v所需的所有功能是否已打开

3、虽然Hyper-V是内置功能，但默认情况下不会启用。你需要启用Hyper-V功能才能使用它。

Windows 10提供了多种启用Hyper-V功能的方法。你可以通过控制面板、PowerShell或DISM启用它。 通过控制面板启用Hyper-V

4、在“开始”/任务栏搜索框中键入appwiz.cpl，然后按Enter键打开“程序和功能”窗口。

在Windows 10中启用Hyper-V

window10的勾上即可解决

window11的勾上即可解决

下一篇章将会学习基础布局，组件，组件通讯等基础知识。。。

鸿蒙开发前置基础