Aplikasi asli Hongmeng puisi rawak

Untuk mengetahui lebih lanjut tentang sumber terbuka, sila lawati:

Komuniti Pemaju 51CTO Hongmeng

https://ost.51cto.com

Persekitaran larian

DAYU200:4.0.10.16

SDK: 4.0.10.15

IDE: 4.0.600

1 Buat aplikasi

Klik Fail->Fail baharu->Buat Progect.

Pilih templat:

【OpenHarmony】Keupayaan Kosong:

Isikan nama projek, shici, nama pakej aplikasi com.nut.shici dan lokasi storan aplikasi XXX (tiada bahasa Cina, aksara khas atau ruang).

Kompilasi SDK10, Model: Peringkat.

Jenis Peranti baik secara lalai.

nod, 16.20.1 disyorkan.

Klik Selesai selepas melengkapkan konfigurasi di atas.

Pilih untuk membuka dalam tetingkap baharu dan tunggu kebergantungan dimuatkan. seperti yang ditunjukkan oleh gambar.

Jika anda mendapat ralat semasa memuatkan dependensi, semak rangkaian anda.

2. Jalankan HelloWord

Kuasa papan pembangunan dan sambungkan papan pembangunan ke komputer, seperti yang ditunjukkan dalam gambar:

Tandatangan:

Langkah untuk menandatangani:

Klik Fail->Struktur projek.

Pilih item ketiga Konfigurasi Tandatangan.

Di sini kami hanya perlu menyemak Automatically generate dan tidak perlu menyemak Support HarmonyOS kerana kami menjalankan papan pembangunan.

Klik Apply atau OK.

Sekarang klik butang untuk menjalankan projek.

Maklumat percetakan konsol:

$ hdc uninstall com.nut.shici
$ hdc shell mkdir data/local/tmp/a1bdb2dbe1724c67a1106c360a3f1d35
$ hdc file send "/Users/jianguo/Desktop/teaching/ohcode/shici/entry/build/default/outputs/default/entry-default-signed.hap" "data/local/tmp/a1bdb2dbe1724c67a1106c360a3f1d35"
$ hdc shell bm install -p data/local/tmp/a1bdb2dbe1724c67a1106c360a3f1d35 
$ hdc shell rm -rf data/local/tmp/a1bdb2dbe1724c67a1106c360a3f1d35
$ hdc shell aa start -a EntryAbility -b com.nut.shici

Buktikan projek telah berjaya dijalankan di papan pembangunan.

3. Ubah suai ikon dan nama

Ubah suai ikon dan nama apl:

Direktori terdapat dalam AppScope/app.json5.

{
"app": {
"bundleName": "com.nut.shici",
"vendor": "example",
"versionCode": 1000000,
"versionName": "1.0.0",
"icon": "$media:app_icon",
"label": "$string:app_name"
}
}

Seperti yang ditunjukkan dalam gambar selepas pengubahsuaian:

Selepas ubah suai berjaya, seperti yang ditunjukkan dalam gambar:

Kaedah terbuka, pergi ke Tetapan-Pengurusan Aplikasi.

Ubah suai ikon dan nama desktop

Ubah suai label dan ikon dalam src/main/module.json5 seperti yang ditunjukkan dalam gambar.

Apabila kami mengubah suai label, kami hanya perlu mengubah suainya dalam direktori bahasa Cina.

{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"default",
"tablet"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
]
}
]
}
}

Ubah suai direktori bahasa Cina.

Kesannya seperti dalam gambar:

4. Tambahkan kebenaran yang berkaitan

Oleh kerana data rangkaian diperlukan, kebenaran niat ditambah.

Tambah konfigurasi pada model dalam src/main/module.json5, dan kemudian gunakan async.

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

5. Tentukan model data

Buat folder model baharu dalam direktori ets.

Buat Fail TS baharu.

export class ShiciModel {
code: number = 0
message: string = ""
data: ShiCi = new ShiCi()
}

export class ShiCi {
content: string = ""
author: string = ""

origin: string = ""
category: string = ""
c1: string = ""
c2: string = ""
c3: string = ""

// "content": "微雨过，小荷翻。榴花开欲然。",
// "author": "苏轼",
// "origin": "阮郎归·初夏",
// "category": "古诗文-植物-荷花",
// "c1": "gushiwen",
// "c2": "zhiwu",
// "c3": "hehua"
}

6. Muatkan data rangkaian

Penerangan antara muka

Sediakan data anda,

Antaramuka

Alamat antara muka: https://v2.alapi.cn/api/shici

Kaedah permintaan: [ “DAPAT”, “POS” ]

Parameter permintaan:

Nama	Diperlukan	Taip	Penerangan	Contoh
token	benar	rentetan	Minta token dan dapatkannya daripada pusat pengguna.	Pusat pengguna untuk mendapatkan token
format	palsu	rentetan	返回格式,支持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

Atas ialah kandungan terperinci Aplikasi asli Hongmeng puisi rawak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!