Hongmeng 네이티브 애플리케이션 무작위 시

오픈소스에 대해 자세히 알아보려면 다음을 방문하세요.

51CTO 홍멍 개발자 커뮤니티

https://ost.51cto.com

실행 환경

DAYU200:4.0.10.16

SDK: 4.0.10.15

IDE: 4.0.600

1. 애플리케이션 만들기

파일->새 파일->프로젝트 만들기를 클릭하세요.

템플릿 선택:

【OpenHarmony】공허한 능력:

프로젝트명 shici, 애플리케이션 패키지명 com.nut.shici, 애플리케이션 저장 위치 XXX(한자, 특수문자, 공백 제외)를 입력하세요.

컴파일 SDK10, 모델: Stage.

장치 유형은 기본적으로 괜찮습니다.

노드, 16.20.1 권장.

위 구성을 완료한 후 마침을 클릭하세요.

새 창에서 열기를 선택하고 종속성이 로드될 때까지 기다립니다. 그림이 보여주는 것처럼.

종속성을 로드할 때 오류가 발생하면 네트워크를 확인하세요.

2. HelloWord를 실행하세요

그림에 표시된 대로 개발 보드에 전원을 공급하고 개발 보드를 컴퓨터에 연결합니다.

서명:

서명 단계:

파일->프로젝트 구조체를 클릭합니다.

세 번째 항목인 서명 구성을 선택하세요.

여기에서는 자동 생성만 선택하면 되며 개발 보드를 실행 중이기 때문에 Support HarmonyOS를 선택할 필요가 없습니다.

적용 또는 확인을 클릭하세요.

이제 버튼을 클릭하여 프로젝트를 실행하세요.

콘솔 인쇄 정보:

으아악

개발 보드에서 프로젝트가 성공적으로 실행되었음을 증명하세요.

3. 아이콘 및 이름 수정

앱 아이콘 및 이름 수정:

디렉토리는 AppScope/app.json5에 있습니다.

으아악

수정 후 그림과 같이:

그림과 같이 수정이 성공한 후:

열기 방법, 설정-애플리케이션 관리로 이동하세요.

바탕 화면 아이콘 및 이름 수정

그림과 같이 src/main/module.json5의 라벨과 아이콘을 수정하세요.

라벨을 수정할 때에는 중국어 디렉토리에서만 수정하면 됩니다.

으아악

중국어 디렉토리를 수정하세요.

효과는 그림과 같습니다:

4. 관련 권한을 추가하세요

네트워크 데이터가 필요하기 때문에 인텐트 권한이 추가됩니다.

src/main/module.json5의 modele에 구성을 추가한 다음 비동기를 사용하세요.

으아악

5. 데이터 모델 정의

ets 디렉터리에 새 모델 폴더를 만듭니다.

새 TS 파일을 만듭니다.

으아악

6. 네트워크 데이터 로드

인터페이스 설명

데이터를 준비하세요.

인터페이스

인터페이스 주소: https://v2.alapi.cn/api/shici

요청 방법: [ “GET”, “POST” ]

요청 매개변수:

이름	필수	유형	설명	예
토큰	사실	문자열	토큰을 요청하고 사용자 센터에서 받으세요.	토큰을 얻을 수 있는 사용자 센터
형식	거짓	문자열	返回格式,支持json,text	json
type		string	诗词类型	all

• type 参数值说明
• all 所有类型
• shuqing抒情
• siji四季
• shanshui山水
• tianqi天气
• renwu人物
• shenghuo生活
• jieri节日
• dongwu动物
• zhiwu植物

返回参数:

名称	描述
content	诗词内容
author	作者
origin	诗词题

测试接口

测试工具：Postamn。

{
"code": 200,
"msg": "success",
"data": {
"content": "地冷叶先尽，谷寒云不行。",
"author": "李白",
"origin": "冬日归旧山",
"category": "古诗文-植物-叶子",
"c1": "gushiwen",
"c2": "zhiwu",
"c3": "yezi"
},
"time": 1704770459,
"usage": 0,
"log_id": "603184784204148736"
}

测试如图所示：

创建HTTP请求

导入http模块：

import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';

创建createHttp：

let httpRequest = http.createHttp();

填写HTTP地址：

httpRequest.request(// 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
"https://v2.alapi.cn/api/shici",
{
method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
// // 开发者根据自身业务需要添加header字段
header: [{
'Content-Type': 'application/json'
}],
// 当使用POST请求时此字段用于传递内容
extraData: {
"token": "自己的token",
"type": "all",
"format": "json"
},
 
}, (err: BusinessError, data: http.HttpResponse) => {
 
}
);

对网络数据的处理：

if (!err) {


// data.result为HTTP响应内容，可根据业务需要进行解析
console.info('Result:' + JSON.stringify(data.result));
console.info('code:' + JSON.stringify(data.responseCode));
// data.header为HTTP响应头，可根据业务需要进行解析
console.info('header:' + JSON.stringify(data.header));
console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
// 当该请求使用完毕时，调用destroy方法主动销毁
httpRequest.destroy();
} else {
this.message = JSON.stringify(err)
console.error('error:' + JSON.stringify(err));
// 取消订阅HTTP响应头事件
httpRequest.off('headersReceive');
// 当该请求使用完毕时，调用destroy方法主动销毁
httpRequest.destroy();
}

完成以上配置以后。

在应用程序里测试网络请求。

build() {

Column() {

Button("测试网络请求").onClick(() => {
this.httpData()
})
}.width("100%").height("100%").justifyContent(FlexAlign.Center)
}
}

如图所示：

测试成功。

如果2300006错误码，请检查网络。

七、UI

数据获取到之后，我们就剩在页面上显示了。

U I布局如图所示。

build() {

Column() {
Text(this.shici.origin).fontSize(30).fontWeight(800)
Text(this.shici.author).fontSize(20).fontWeight(300).fontColor(Color.Orange)
Text(this.shici.category).fontSize(20).fontWeight(300).fontColor(Color.Green)


}.width("100%").height("100%").justifyContent(FlexAlign.Center)
}

八、完整源码

import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';
import promptAction from '@ohos.promptAction';
import { ShiCi, ShiciModel } from '../../model/ShiCiModel';


class shiciType {
title: string = ""
desc: string = ""
}

@Entry
@Component
struct Index {
@State shici: ShiCi = new ShiCi()
@State typeList: Array = [
{ title: "抒情",
desc: "shuqing"

},
{ title: "四季",
desc: "siji"

},
{ title: "山水",
desc: "shanshui"

}
,
{ title: "天气",
desc: "tianqi"

}


]

aboutToAppear() {
this.httpData("all")
}

httpData(type: string) {


// 3.每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();
//4.
httpRequest.request(// 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
"https://v2.alapi.cn/api/shici",
{
method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
// // 开发者根据自身业务需要添加header字段
header: [{
'Content-Type': 'application/json'
}],
// 当使用POST请求时此字段用于传递内容
extraData: {
"token": "你的token",

"type": type,
"format": "json"
},

}, (err: BusinessError, data: http.HttpResponse) => {
if (!err) {
// data.result为HTTP响应内容，可根据业务需要进行解析
console.info('Result:' + JSON.stringify(data.result));
let ShiciModel: ShiciModel = JSON.parse(data.result.toString())
this.shici = ShiciModel.data

console.info('code:' + JSON.stringify(data.responseCode));
 
// 当该请求使用完毕时，调用destroy方法主动销毁
httpRequest.destroy();
} else {

console.error('error:' + JSON.stringify(err));
// 取消订阅HTTP响应头事件
httpRequest.off('headersReceive');
// 当该请求使用完毕时，调用destroy方法主动销毁
httpRequest.destroy();
}
}
);
}

build() {

Column() {


Row() {
ForEach(this.typeList, (item: shiciType) => {

Text(item.title).fontSize(30).margin(20)
.onClick(() => {

this.httpData(item.desc)
})
})

}

Button(
"抒情"
).onClick(() => {
this.httpData("shuqing")
})

Button(
"四季"
).onClick(() => {
this.httpData("siji")
})


Text(this.shici.origin).fontSize(30).fontWeight(800)
Text(this.shici.author).fontSize(20).fontWeight(300).fontColor(Color.Orange)
Text(this.shici.category).fontSize(20).fontWeight(300).fontColor(Color.Green)


}.width("100%").height("100%").justifyContent(FlexAlign.Center)
}
}

九、总结

本文我们学习了基础组件的使用，网络请求，以及状态管理。

十、FAQ

2300006 域名解析失败

错误信息

Couldn’t resolve host name。

错误描述

服务器的域名无法解析。

可能原因

• 传入的服务器的URL不正确。
• 网络不通畅。

处理步骤

• 请检查输入的服务器的URL是否合理。
• 请检查网络连接情况

想了解更多关于开源的内容，请访问：

51CTO 鸿蒙开发者社区

https://ost.51cto.com

위 내용은 Hongmeng 네이티브 애플리케이션 무작위 시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!