オープンソースについて詳しくは、こちらをご覧ください:

51CTO 宏蒙開発者コミュニティ

https://ost.51cto.com

実行環(huán)境

ダユ200:4.0.10.16

SDK：4.0.10.15

IDE：4.0.600

1. アプリケーションを作成します

[ファイル] -> [新しいファイル] -> [プロジェクトの作成] をクリックします。

テンプレートの選択:

【OpenHarmony】エンプティアビリティ：

プロジェクト名 shici、アプリケーション パッケージ名 com.nut.shici、アプリケーションの保存場所 XXX (中國語、特殊文字、スペースは含まれません) を入力します。

SDK10、モデル:ステージをコンパイルします。

Device Type はデフォルトで問題ありません。

ノード、16.20.1 が推奨されます。

上記の構(gòu)成を完了したら、「完了」をクリックします。

新しいウィンドウで開くことを選択し、依存関係が読み込まれるまで待ちます。寫真が示すように。

依存関係を読み込むときにエラーが発生した場合は、ネットワークを確認(rèn)してください。

2. HelloWord

を?qū)g行します。

図に示すように、開発ボードに電源を投入し、開発ボードをコンピュータに接続します。

＃＃＃サイン：＃＃＃

署名する手順:

「ファイル」→「プロジェクト構(gòu)造體」をクリックします。

3 番目の項(xiàng)目「署名構(gòu)成」を選択します。

ここでは、[自動(dòng)生成] をチェックするだけで済みます。開発ボードを?qū)g行しているため、[HarmonyOS をサポート] をチェックする必要はありません。

「適用」または「OK」をクリックします。

ボタンをクリックしてプロジェクトを?qū)g行します。

コンソール印刷情報(bào):

リーリー

プロジェクトが開発ボード上で正常に実行されたことを証明します。

3. アイコンと名前を変更します アプリケーションのアイコンと名前を変更します:

このディレクトリは AppScope/app.json5 にあります。

リーリー

変更後の図に示すように:

図に示すように、変更が成功すると:

[設(shè)定]-[アプリケーション管理]列のメソッドを開きます。

デスクトップのアイコンと名前を変更する 図に示すように、src/main/module.json5 のラベルとアイコンを変更します。

ラベルを変更するときは、中國語のディレクトリ內(nèi)でラベルを変更するだけです。

リーリー

中國語ディレクトリを変更します。

効果は図に示すとおりです:

4. 関連する権限を追加します ネットワークデータが必要なため、インテント権限を追加します。

src/main/module.json5 のモデルに構(gòu)成を追加してから、非同期にします。

リーリー

5. データ モデルの定義 ets ディレクトリに新しいモデル フォルダーを作成します。

新しい TS ファイルを作成します。

リーリー

6. ネットワーク データのロード

インターフェースの説明 データを準(zhǔn)備します。

＃＃＃インターフェース＃＃＃

インターフェースアドレス: https://v2.alapi.cn/api/shici

リクエストメソッド: [ "GET", "POST" ]

リクエストパラメータ:

＃＃＃名前＃＃＃ ＃＃＃必須＃＃＃ トークンをリクエストし、ユーザー センターから取得します。 ユーザー センターがトークンを取得します

＃＃＃タイプ＃＃＃ ＃＃＃説明する＃＃＃	＃＃＃例＃＃＃	＃＃＃トークン＃＃＃ ＃＃＃真実＃＃＃	＃＃＃弦＃＃＃
＃＃＃フォーマット＃＃＃	＃＃＃間違い＃＃＃ ＃＃＃弦＃＃＃	返回格式,支持json,text	json
type		string	詩詞類型	all

• type 參數(shù)值說明
• all 所有類型
• shuqing抒情
• siji四季
• shanshui山水
• tianqi天氣
• renwu人物
• shenghuo生活
• jieri節(jié)日
• dongwu動(dòng)物
• zhiwu植物

返回參數(shù):

名稱	描述
content	詩詞內(nèi)容
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"
}

測試如圖所示：

創(chuàng)建HTTP請求

導(dǎo)入http模塊：

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

創(chuàng)建createHttp：

let httpRequest = http.createHttp();

填寫HTTP地址：

httpRequest.request(// 填寫HTTP請求的URL地址，可以帶參數(shù)也可以不帶參數(shù)。URL地址需要開發(fā)者自定義。請求的參數(shù)可以在extraData中指定
"https://v2.alapi.cn/api/shici",
{
method: http.RequestMethod.GET, // 可選，默認(rèn)為http.RequestMethod.GET
// // 開發(fā)者根據(jù)自身業(yè)務(wù)需要添加header字段
header: [{
'Content-Type': 'application/json'
}],
// 當(dāng)使用POST請求時(shí)此字段用于傳遞內(nèi)容
extraData: {
"token": "自己的token",
"type": "all",
"format": "json"
},
 
}, (err: BusinessError, data: http.HttpResponse) => {
 
}
);

對網(wǎng)絡(luò)數(shù)據(jù)的處理：

if (!err) {


// data.result為HTTP響應(yīng)內(nèi)容，可根據(jù)業(yè)務(wù)需要進(jìn)行解析
console.info('Result:' + JSON.stringify(data.result));
console.info('code:' + JSON.stringify(data.responseCode));
// data.header為HTTP響應(yīng)頭，可根據(jù)業(yè)務(wù)需要進(jìn)行解析
console.info('header:' + JSON.stringify(data.header));
console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
// 當(dāng)該請求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷毀
httpRequest.destroy();
} else {
this.message = JSON.stringify(err)
console.error('error:' + JSON.stringify(err));
// 取消訂閱HTTP響應(yīng)頭事件
httpRequest.off('headersReceive');
// 當(dāng)該請求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷毀
httpRequest.destroy();
}

完成以上配置以后。

在應(yīng)用程序里測試網(wǎng)絡(luò)請求。

build() {

Column() {

Button("測試網(wǎng)絡(luò)請求").onClick(() => {
this.httpData()
})
}.width("100%").height("100%").justifyContent(FlexAlign.Center)
}
}

如圖所示：

測試成功。

如果2300006錯(cuò)誤碼，請檢查網(wǎng)絡(luò)。

七、UI

數(shù)據(jù)獲取到之后，我們就剩在頁面上顯示了。

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.每一個(gè)httpRequest對應(yīng)一個(gè)HTTP請求任務(wù)，不可復(fù)用
let httpRequest = http.createHttp();
//4.
httpRequest.request(// 填寫HTTP請求的URL地址，可以帶參數(shù)也可以不帶參數(shù)。URL地址需要開發(fā)者自定義。請求的參數(shù)可以在extraData中指定
"https://v2.alapi.cn/api/shici",
{
method: http.RequestMethod.GET, // 可選，默認(rèn)為http.RequestMethod.GET
// // 開發(fā)者根據(jù)自身業(yè)務(wù)需要添加header字段
header: [{
'Content-Type': 'application/json'
}],
// 當(dāng)使用POST請求時(shí)此字段用于傳遞內(nèi)容
extraData: {
"token": "你的token",

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

}, (err: BusinessError, data: http.HttpResponse) => {
if (!err) {
// data.result為HTTP響應(yīng)內(nèi)容，可根據(jù)業(yè)務(wù)需要進(jìn)行解析
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));
 
// 當(dāng)該請求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷毀
httpRequest.destroy();
} else {

console.error('error:' + JSON.stringify(err));
// 取消訂閱HTTP響應(yīng)頭事件
httpRequest.off('headersReceive');
// 當(dāng)該請求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷毀
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)
}
}

九、總結(jié)

本文我們學(xué)習(xí)了基礎(chǔ)組件的使用，網(wǎng)絡(luò)請求，以及狀態(tài)管理。

十、FAQ

2300006 域名解析失敗

錯(cuò)誤信息

Couldn’t resolve host name。

錯(cuò)誤描述

服務(wù)器的域名無法解析。

可能原因

• 傳入的服務(wù)器的URL不正確。
• 網(wǎng)絡(luò)不通暢。

處理步驟

• 請檢查輸入的服務(wù)器的URL是否合理。
• 請檢查網(wǎng)絡(luò)連接情況

想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：

51CTO 鴻蒙開發(fā)者社區(qū)

https://ost.51cto.com

以上が紅夢ネイティブアプリケーションのランダムな詩の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。