オープンソースについて詳しくは、こちらをご覧ください:
51CTO 宏蒙開発者コミュニティ
https://ost.51cto.com
ダユ200:4.0.10.16
SDK：4.0.10.15
IDE：4.0.600
[ファイル] -> [新しいファイル] -> [プロジェクトの作成] をクリックします。
テンプレートの選択:
【OpenHarmony】エンプティアビリティ：
プロジェクト名 shici、アプリケーション パッケージ名 com.nut.shici、アプリケーションの保存場所 XXX (中国語、特殊文字、スペースは含まれません) を入力します。
SDK10、モデル:ステージをコンパイルします。
Device Type はデフォルトで問題ありません。
ノード、16.20.1 が推奨されます。
上記の構成を完了したら、「完了」をクリックします。
新しいウィンドウで開くことを選択し、依存関係が読み込まれるまで待ちます。写真が示すように。
依存関係を読み込むときにエラーが発生した場合は、ネットワークを確認してください。
図に示すように、開発ボードに電源を投入し、開発ボードをコンピュータに接続します。
＃＃＃サイン：＃＃＃署名する手順:
「ファイル」→「プロジェクト構造体」をクリックします。
3 番目の項目「署名構成」を選択します。
ここでは、[自動生成] をチェックするだけで済みます。開発ボードを実行しているため、[HarmonyOS をサポート] をチェックする必要はありません。
「適用」または「OK」をクリックします。
ボタンをクリックしてプロジェクトを実行します。
コンソール印刷情報:
リーリープロジェクトが開発ボード上で正常に実行されたことを証明します。
このディレクトリは AppScope/app.json5 にあります。
リーリー変更後の図に示すように:
図に示すように、変更が成功すると:
[設定]-[アプリケーション管理]列のメソッドを開きます。
ラベルを変更するときは、中国語のディレクトリ内でラベルを変更するだけです。
リーリー中国語ディレクトリを変更します。
効果は図に示すとおりです:
src/main/module.json5 のモデルに構成を追加してから、非同期にします。
リーリー新しい TS ファイルを作成します。
リーリーインターフェースアドレス: https://v2.alapi.cn/api/shici
リクエストメソッド: [ "GET", "POST" ]
リクエストパラメータ:
＃＃＃名前＃＃＃
|
＃＃＃タイプ＃＃＃
＃＃＃説明する＃＃＃ |
＃＃＃例＃＃＃
|
＃＃＃トークン＃＃＃
＃＃＃真実＃＃＃ |
＃＃＃弦＃＃＃
| トークンをリクエストし、ユーザー センターから取得します。
| ユーザー センターがトークンを取得します
|
＃＃＃フォーマット＃＃＃ |
＃＃＃間違い＃＃＃
＃＃＃弦＃＃＃ |
返回格式,支持json,text |
json |
|
|
type |
string |
诗词类型 |
all |
返回参数:
|
名称 |
描述 |
|
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模块：
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错误码，请检查网络。
数据获取到之后，我们就剩在页面上显示了。
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)
}
}本文我们学习了基础组件的使用，网络请求，以及状态管理。
Couldn’t resolve host name。
服务器的域名无法解析。
想了解更多关于开源的内容，请访问：
51CTO 鸿蒙开发者社区
https://ost.51cto.com
以上が紅夢ネイティブアプリケーションのランダムな詩の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
