To learn more about open source, please visit:

51CTO Hongmeng Developer Community

https://ost.51cto.com

Running environment

DAYU200:4.0.10.16

SDK：4.0.10.15

IDE：4.0.600

1. Create an application

Click File->new File->Create Progect.

Select template:

【OpenHarmony】Empty Ability：

Fill in the project name, shici, application package name com.nut.shici, and application storage location XXX (no Chinese, special characters, or spaces).

Compile SDK10, Model: Stage.

Device Type is fine by default.

node, 16.20.1 is recommended.

After completing the above configuration, click Finish.

Choose to open in a new window and wait for the dependencies to be loaded. as the picture shows.

If you get an error when loading dependencies, check your network.

2. Run HelloWord

Power the development board and connect the development board to the computer, as shown in the figure:

sign:

Steps to sign:

Click File->Project struct.

Select the third item Signing Configs.

Here we only need to check Automatically generate. We do not need to check Support HarmonyOS because we are running a development board.

Click Apply or OK.

Now click the button to run the project.

Console printing information:

$ 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

Proof that the project has been successfully run on the development board.

3. Modify the icon and name

Modify application icon and name:

The directory is in AppScope/app.json5.

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

As shown in the figure after modification:

After the modification is successful, as shown in the figure:

Open method, in the Settings-Application Management column.

Modify desktop icons and names

Modify the label and icon in src/main/module.json5 as shown in the figure.

When we modify the label, we just need to modify it in the Chinese directory.

{
"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"
]
}
]
}
]
}
}

Modify the Chinese directory.

The effect is as shown in the figure:

4. Add relevant permissions

Because network data is needed, add the intent permission.

Add configuration in modele in src/main/module.json5, and then async.

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

5. Define the data model

Create a new model folder in the ets directory.

Create a new TS File.

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": "微雨過(guò)，小荷翻。榴花開(kāi)欲然。",
// "author": "蘇軾",
// "origin": "阮郎歸·初夏",
// "category": "古詩(shī)文-植物-荷花",
// "c1": "gushiwen",
// "c2": "zhiwu",
// "c3": "hehua"
}

6. Load network data

Interface Description

Prepare the data,

interface

Interface address: https://v2.alapi.cn/api/shici

Request method: [ “GET”, “POST” ]

Request parameters:

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

返回參數(shù):

測(cè)試接口

測(cè)試工具：Postamn。

{
"code": 200,
"msg": "success",
"data": {
"content": "地冷葉先盡，谷寒云不行。",
"author": "李白",
"origin": "冬日歸舊山",
"category": "古詩(shī)文-植物-葉子",
"c1": "gushiwen",
"c2": "zhiwu",
"c3": "yezi"
},
"time": 1704770459,
"usage": 0,
"log_id": "603184784204148736"
}

測(cè)試如圖所示：

創(chuàng)建HTTP請(qǐng)求

導(dǎo)入http模塊：

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

創(chuàng)建createHttp：

let httpRequest = http.createHttp();

填寫(xiě)HTTP地址：

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

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

完成以上配置以后。

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

build() {

Column() {

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

如圖所示：

測(cè)試成功。

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

七、UI

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

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對(duì)應(yīng)一個(gè)HTTP請(qǐng)求任務(wù)，不可復(fù)用
let httpRequest = http.createHttp();
//4.
httpRequest.request(// 填寫(xiě)HTTP請(qǐng)求的URL地址，可以帶參數(shù)也可以不帶參數(shù)。URL地址需要開(kāi)發(fā)者自定義。請(qǐng)求的參數(shù)可以在extraData中指定
"https://v2.alapi.cn/api/shici",
{
method: http.RequestMethod.GET, // 可選，默認(rèn)為http.RequestMethod.GET
// // 開(kāi)發(fā)者根據(jù)自身業(yè)務(wù)需要添加header字段
header: [{
'Content-Type': 'application/json'
}],
// 當(dāng)使用POST請(qǐng)求時(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)該請(qǐng)求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷(xiāo)毀
httpRequest.destroy();
} else {

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

十、FAQ

2300006 域名解析失敗

錯(cuò)誤信息

Couldn’t resolve host name。

錯(cuò)誤描述

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

可能原因

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

處理步驟

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

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

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

https://ost.51cto.com

The above is the detailed content of Hongmeng native application random poetry. For more information, please follow other related articles on the PHP Chinese website!