大家好，今天我们就来一起来看一下一个最简单的鸿蒙应用是如何开发的，

Hitokoto 一言

 

说明：动漫也好、小说也好、网络也好，不论在哪里，我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来，形成一言网络，以传递更多的感动。如果可以，我们希望我们没有停止服务的那一天。 简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。 或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的

 

你将学到什么？

1.应用的创建流程

2.了解Stage模型配置文件

3.常见UI组件的使用

4.状态管理

5.HTTP请求

6.卡片的创建

运行环境

DevEco Studio：4.0Release

HarmonyOS SDK API10

一、创建应用

1.点击File->new File->Create Progect

2.填写项目名，Hitokoto，应用包名com.nutpi.hitokoto,应用存储位置XXX（不要有中文，特殊字符，空格）

Compile SDK10，Model ：Stage

Device Type 默认就可以。

node，建议16.20.1

完成以上配置以后点击Finish

 

3.选择在新窗口打开，等待依赖加载完毕。如图所示。

 

 

如果大家加载依赖报错的话，检查自己的网络。

 

二、运行HelloWord

 

1.连接手机，并连接到电脑，如图所示

 

2.签名

签名的步骤：

点击File->Project struct

 

签完名之后就可以运行到真机上啦。

 

三、了解Stage模型配置文件

应用模型是系统为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。

应用模型的构成要素包括：

1. 应用组件

   应用组件是应用的基本组成单位，是应用的运行入口。用户启动、使用和退出应用过程中，应用组件会在不同的状态间切换，这些状态称为应用组件的生命周期。应用组件提供生命周期的回调函数，开发者通过应用组件的生命周期回调感知应用的状态变化。应用开发者在编写应用时，首先需要编写的就是应用组件，同时还需编写应用组件的生命周期回调函数，并在应用配置文件中配置相关信息。这样，操作系统在运行期间通过配置文件创建应用组件的实例，并调度它的生命周期回调函数，从而执行开发者的代码。

2. 应用进程模型

   应用进程模型定义应用进程的创建和销毁方式，以及进程间的通信方式。

3. 应用线程模型

   应用线程模型定义应用进程内线程的创建和销毁方式、主线程和UI线程的创建方式、线程间的通信方式。

4. 应用任务管理模型（仅对系统应用开放）

   应用任务管理模型定义任务（Mission）的创建和销毁方式，以及任务与组件间的关系。所谓任务，即用户使用一个应用组件实例的记录。每次用户启动一个新的应用组件实例，都会生成一个新的任务。例如，用户启动一个视频应用，此时在“最近任务”界面，将会看到视频应用这个任务，当用户点击这个任务时，系统会把该任务切换到前台，如果这个视频应用中的视频编辑功能也是通过应用组件编写的，那么在用户启动视频编辑功能时，会创建视频编辑的应用组件实例，在“最近任务”界面中，将会展示视频应用、视频编辑两个任务。

5. 应用配置文件

   应用配置文件中包含应用配置信息、应用组件信息、权限信息、开发者自定义信息等，这些信息在编译构建、分发和运行阶段分别提供给编译工具、应用市场和操作系统使用。

 

这里我们主要了解对应的配置文件就好，先快速的完成应用图标和标签 的设置。

在开发应用时，需要配置应用的一些标签，例如应用的包名、图标等标识特征的属性。本文描述了在开发应用需要配置的一些关键标签。

图标和标签通常一起配置，可以分为应用图标、应用标签和入口图标、入口标签，分别对应app.json5配置文件和module.json5配置文件中的icon和label标签。

应用图标和标签是在设置应用中使用，例如设置应用中的应用列表。入口图标是应用安装完成后在设备桌面上显示出来的，如下图所示。入口图标是以UIAbility为粒度，支持同一个应用存在多个入口图标和入口标签，点击后进入对应的UIAbility界面。

3.1修改应用图标和名称：

目录在AppScope/app.json5

{
  "app": {
    "bundleName": "com.myapplication",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.1",
    "icon": "$media:iconAi",
    "label": "$string:app_name"
  }
}

3.2修改桌面图标和名称

修改src/main/module.json5中如图所示的label和icon。

 

 

四、UI设计

UI很简单，就是基础组件的使用。

  build() {
​
    Column() {
      Text("Hitokoto 一言")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text(this.hiTokInfo.hitokoto)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
​
      Text(this.hiTokInfo.from)
        .fontSize(30)
​
​
    }.width('100%')
    .height('100%').justifyContent(FlexAlign.Center)
  }

 

五、HTTP请求

5.1概述

应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

HTTP数据请求功能主要由http模块提供。

使用该功能需要申请ohos.permission.INTERNET权限。

我们就用本次每日一言的这一个接口来与大家举例。

使用前需要在rc/main/module.json5中modele中添加网络权限配置，然后按sync就可以。

 

  "requestPermissions": [{
      "name": "ohos.permission.INTERNET"
    }],

接下来我们先用postman做一个接口测试。

 

{
  "code": 200,
  "msg": "success",
  "data": {
    "id": 1147,
    "hitokoto": "整个社会对我都很苛刻。所以至少让我自己宽容一下我自己吧。如果大家都对自己更宽容一点的话。大家都变成废柴就没有废柴了。",
    "type": "a",
    "from": "果然我的青春恋爱喜剧搞错了",
    "creator": "hitokoto"
  },
  "time": 1712806127,
  "usage": 0,
  "log_id": "636888822028570624"
}

测试ok，接下来我们一起来看一下

5.2request接口开发步骤

1. 从@ohos.net.http.d.ts中导入http命名空间。

2. 调用createHttp()方法，创建一个HttpRequest对象。

3. 调用该对象的on()方法，订阅http响应头事件，此接口会比request请求先返回。可以根据业务需要订阅此消息。

4. 调用该对象的request()方法，传入http请求的url地址和可选参数，发起网络请求。

5. 按照实际业务需要，解析返回结果。

6. 调用该对象的off()方法，取消订阅http响应头事件。

7. 当该请求使用完毕时，调用destroy()方法主动销毁。

接口地址： 填入你的地址就好

---

请求方法: [ "GET", "POST" ]

---

请求参数：

名称	必填	类型	描述	示例
token	true	string	请求token，用户中心获取。	用户中心获取token
type	false	string	一言类型	a
format	false	string	返回数据类型,支持json,text	json

 

 

六、服务卡片

Form Kit（卡片开发服务）提供一种界面展示形式，可以将应用的重要信息或操作前置到服务卡片（以下简称“卡片”），以达到服务直达、减少跳转层级的体验效果。卡片常用于嵌入到其他应用（当前被嵌入方即卡片使用方只支持系统应用，例如桌面）中作为其界面显示的一部分，并支持拉起页面、发送消息等基础的交互能力。

6.1服务卡片架构

 

图1 服务卡片架构

卡片的基本概念：

• 卡片使用方：如上图中的桌面，显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。

  • 应用图标：应用入口图标，点击后可拉起应用进程，图标内容不支持交互

  • 卡片：具备不同规格大小的界面展示，卡片的内容可以进行交互

• 卡片提供方：包含卡片的应用，提供卡片的显示内容、控件布局以及控件点击处理逻辑。

  • FormExtensionAbility：卡片业务逻辑模块，提供卡片创建、销毁、刷新等生命周期回调。

  • 卡片页面：卡片UI模块，包含页面控件、布局、事件等显示和交互信息。

6.2亮点/特征

• 服务直达：将元服务/应用的重要信息以卡片形式展示在桌面，用户可以通过快捷手势使用卡片，通过轻量交互行为实现服务直达、减少层级跳转的目的。

• 永久在线：提供定时、代理等多种卡片刷新机制，实现卡片永久在线。

• 受限管控：卡片支持的组件、事件、动效、数据管理、状态管理和API能力均进行了一定限制，保障性能、功耗及安全可靠。

6.3 与相关Kit的关系

• Ability Kit: Form Kit内部实现依赖Ability Kit提供的Extension基础能力，与Ability Kit存在生命周期调度交互。

• ArkUI: Form Kit卡片提供方在卡片页面中可以使用ArkUI提供的部分组件、事件、动效、状态管理等能力。

6.4创建一个ArkTS卡片

创建卡片当前有两种入口：

• 创建工程时，选择Application，默认不带卡片，可以在创建工程后右键新建卡片。

• 创建工程时，选择Atomic Service，默认自带卡片，也可以在创建工程后右键新建卡片

在已有的应用工程中，可以通过右键新建ArkTS卡片，具体的操作方式如下。

右键新建卡片。

 

ArkTS卡片创建完成后，工程中会新增如下卡片相关文件：卡片生命周期管理文件（EntryFormAbility.ets）、卡片页面文件（WidgetCard.ets）和卡片配置文件（form_config.json）。

 

然后大家按照自己的需求制作就可以

 

七、总结

本次我们在next机器上的这个尝试，更多也是想给大家分享我们在做的一些事情。也是衷心祝愿

鸿蒙原生应用越来越完善。