【原】鸿蒙原生应用《Hitokoto 一言》

大前端之旅 2024-04-13 发布于甘肃

展开全文

作者：坚果
团队：坚果派
公众号：“大前端之旅”
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE，以及若干其他领域的三十余位万粉博主运营。专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，欢迎合作。

运行环境

DevEco Studio：4.0Release

OpenHarmony SDK API10

开发板：润和DAYU200

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

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

image-20240411111322142

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

image-20240411144232154

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

二、运行HelloWord

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

图片

2.签名

签名的步骤：

点击File->Project struct

image-20240411144419390

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

三、了解Stage模型配置文件

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

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

应用组件
应用组件是应用的基本组成单位，是应用的运行入口。用户启动、使用和退出应用过程中，应用组件会在不同的状态间切换，这些状态称为应用组件的生命周期。应用组件提供生命周期的回调函数，开发者通过应用组件的生命周期回调感知应用的状态变化。应用开发者在编写应用时，首先需要编写的就是应用组件，同时还需编写应用组件的生命周期回调函数，并在应用配置文件中配置相关信息。这样，操作系统在运行期间通过配置文件创建应用组件的实例，并调度它的生命周期回调函数，从而执行开发者的代码。
应用进程模型
应用进程模型定义应用进程的创建和销毁方式，以及进程间的通信方式。
应用线程模型
应用线程模型定义应用进程内线程的创建和销毁方式、主线程和UI线程的创建方式、线程间的通信方式。
应用任务管理模型（仅对系统应用开放）
应用任务管理模型定义任务（Mission）的创建和销毁方式，以及任务与组件间的关系。所谓任务，即用户使用一个应用组件实例的记录。每次用户启动一个新的应用组件实例，都会生成一个新的任务。例如，用户启动一个视频应用，此时在“最近任务”界面，将会看到视频应用这个任务，当用户点击这个任务时，系统会把该任务切换到前台，如果这个视频应用中的视频编辑功能也是通过应用组件编写的，那么在用户启动视频编辑功能时，会创建视频编辑的应用组件实例，在“最近任务”界面中，将会展示视频应用、视频编辑两个任务。
应用配置文件
应用配置文件中包含应用配置信息、应用组件信息、权限信息、开发者自定义信息等，这些信息在编译构建、分发和运行阶段分别提供给编译工具、应用市场和操作系统使用。

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

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

图标和标签通常一起配置，可以分为应用图标、应用标签和入口图标、入口标签，分别对应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接口开发步骤

从@ohos.net.http.d.ts中导入http命名空间。
调用createHttp()方法，创建一个HttpRequest对象。
调用该对象的on()方法，订阅http响应头事件，此接口会比request请求先返回。可以根据业务需要订阅此消息。
调用该对象的request()方法，传入http请求的url地址和可选参数，发起网络请求。
按照实际业务需要，解析返回结果。
调用该对象的off()方法，取消订阅http响应头事件。
当该请求使用完毕时，调用destroy()方法主动销毁。

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

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

请求参数：

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

image-20240411202100063

六、服务卡片

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