鴻蒙原生應用隨機詩詞

#

想了解更多關於開源的內容，請造訪：

51CTO 鴻蒙開發者社群

https://ost.51cto.com

運行環境

DAYU200:4.0.10.16

SDK：4.0.10.15

IDE：4.0.600

一、建立應用程式

#點選File->new File->Create Progect。

選擇模版：

【OpenHarmony】Empty Ability：

填寫項目名，shici，應用包名com.nut.shici,應用存儲位置XXX（不要有中文，特殊字符，空格）。

Compile SDK10，Model ：Stage。

Device Type 預設就可以。

node，建議16.20.1。

完成以上配置以後點選Finish。

選擇在新視窗打開，等待依賴載入完畢。如圖所示。

如果大家載入依賴報錯的話，檢查自己的網路。

二、執行HelloWord

#為開發板供電，並連接開發板到電腦，如圖所示：

簽名：

簽署的步驟：

點選File->Project struct。

選擇第三項Signing Configs。

這裡我們只勾選Automatically generate就可以，不用勾選Suppot HarmonyOS，因為我們運行的是開發板。

點選Apply或ok就可以。

現在點擊按鈕運行項目。

控制台列印訊息：

$ 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

證明專案已經成功運行在開發板上。

三、修改圖示與名稱

#修改應用程式圖示和名稱：

目錄在AppScope/app.json5。

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

修改完畢之後如圖所示：

修改成功之後，如圖所示：

開啟方式，在設定-應用程式管理一欄。

修改桌面圖示與名稱

#修改src/main/module.json5中如圖所示的label和icon。

我們修改label的時候，修改中文目錄下的就可以。

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

修改中文目錄下的。

效果如圖所示：

四、新增相關權限

#因為需要用到網路數據，所以加入initent權限。

在src/main/module.json5中modele中加入配置，然後async就可以。

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

五、定義資料模型

#在ets目錄下新建model資料夾。

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

六、載入網路資料

#介面說明

準備好數據，

介面

介面位址： https://v2.alapi.cn/api/shici

#請求方法: [ “GET”, “POST” ]

請求參數：

名稱	必填	類型	描述	範例
token	true	string	請求token，用戶中心取得。	用戶中心取得token
format	false	string	返回格式,支持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

以上是鴻蒙原生應用隨機詩詞的詳細內容。更多資訊請關注PHP中文網其他相關文章！