基于ArkUI eTS開發(fā)的堅果笑話（NutJoke）

都說笑一笑十年少，確實，在生活中，我們也是很久沒有笑了，那么今天，我就做一個鴻蒙eTS版的堅果笑話App，

實現(xiàn)的功能：

獲取接口數(shù)據(jù)

笑話列表

笑話詳情頁

你能學(xué)到的有：

網(wǎng)絡(luò)請求

可滾動組件

容器組件

路由跳轉(zhuǎn)

基礎(chǔ)組件

文件結(jié)構(gòu)

.

├── config.json

├── ets

│ └── MainAbility

│ ├── app.ets

│ ├── common

│ │ └── RealtimeWeather.ets

│ ├── data

│ │ └── get_test.ets

│ ├── model

│ │ ├── jokeDetailModel.ets

│ │ └── jokeModel.ets

│ └── pages

│ ├── Main.ets

│ └── jokeDetails.ets

└── resources

├── base

│ ├── element

│ │ ├── color.json

│ │ └── string.json

│ └── media

│ └── icon.png

└── rawfile

?

效果預(yù)覽：

笑話大全接口

我們用到的接口：

聚合數(shù)據(jù)的笑話大全

接口地址：http://v.juhe.cn/joke/content/list.php

返回格式：json

請求方式：http get

請求示例：http://v.juhe.cn/joke/content/list.php?key=您申請的KEY&page=2&pagesize=10&sort=asc&time=1418745237

接口備注：根據(jù)時間戳返回該時間點前或后的笑話列表

請求參數(shù)說明：

	名稱	必填	類型	說明
	sort	是	string	類型，desc:指定時間之前發(fā)布的，asc:指定時間之后發(fā)布的
	page	否	int	當(dāng)前頁數(shù),默認(rèn)1,最大20
	pagesize	否	int	每次返回條數(shù),默認(rèn)1,最大20
	time	是	string	時間戳（10位），如：1418816972
	key	是	string	在個人中心->我的數(shù)據(jù),接口名稱上方查看

返回參數(shù)說明：

	名稱	類型	說明
	error_code	int	返回碼
	reason	string

JSON返回示例

{

"error_code": 0,

"reason": "Success",

"result": {

"data": [

{

"content": "有一天晚上我倆一起吃西瓜，老大把西瓜籽很整潔的吐在了一張紙上，\r\n過了幾天，我從教室回但宿舍看到老大在磕瓜子，\r\n我就問他：老大，你什么時候買的瓜子？\r\n老大說：剛曬好，說著抓了一把要遞給我……",

"hashId": "bcc5fdc2fb6efc6db33fa242474f108a",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "＂我女朋友氣跑了＂\r\n＂怎么回事？嚴(yán)重嗎？你怎么著她了？＂\r\n＂不嚴(yán)重，我只是很久沒用了＂",

"hashId": "03a6095c18e1d6fe7e2c19b2a20d03d1",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "還說神馬來一場說走就走的旅行，\r\n工作后就連一場說走就走的下班都不行。",

"hashId": "10edf75c1e7d0933c91f0f39a28a2c84",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "高速路上堵車，路邊葡萄地里有一哥們竟然在偷葡萄，心想太沒素質(zhì)了吧！\r\n不管了我也去，剛溜進(jìn)葡萄地，那哥們竟問我干嘛，\r\n我撇了一眼反問道你干嘛呢？\r\n那哥們答道摘葡萄呢！\r\n我答道：我也摘葡萄呢！\r\n哥們郁悶了說我摘我家的你呢？\r\n我頓時臉紅，哥你家葡萄咋賣呢？",

"hashId": "bb572bb5b4844badb31012983f7324f5",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "和老婆在街邊散步，我手上捏著一張已揉成一團(tuán)的傳單，\r\n走了好一會終于看到個垃圾桶，我趕緊跑過去想扔掉，\r\n沒想到老婆從后邊一把拉住我說：老公，那個肯定吃不得了，別撿。\r\n我一愣，發(fā)現(xiàn)垃圾桶頂蓋上放著半個西瓜。",

"hashId": "7ebccd3bbfaf24e010f9eb3ee68234bd",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "某考生考了個倒數(shù)第一，回到家被他爸一頓暴揍，\r\n來到學(xué)校老師讓他談?wù)劼浜蟮捏w會，\r\n學(xué)生：“我終于明白了“落后就要挨打”的道理?！?,

"hashId": "4aee2aa6a79c67682f605c4146a8eca4",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "很多人不喜歡朝九晚五的生活，然后開始創(chuàng)業(yè)。\r\n最終，他的生活變成了朝五晚九。",

"hashId": "7b358c4b96cf4a8d82b85545ea8f9603",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "錢這個東西，真是害人精。\r\n小到人與人之間的矛盾，大到國家之間的戰(zhàn)爭，無不是為了錢。\r\n錢可以把人推上萬眾矚目之顛，也可以使人瞬間變成階下囚。\r\n可是，富人們卻沒認(rèn)識到，當(dāng)錢幾輩子花不完時，\r\n掙再多已經(jīng)沒有意義，還不如早日盡點社會責(zé)任，\r\n捐助給需要的人，求得個平安幸福。\r\n看到這個的有錢人們吶，你們什么時侯能捐我點??！",

"hashId": "94e18075f8c9c8211dfed5f8d6a62983",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "看到一句很好的名言：我們無法拉伸生命的長度，但是我們可以拓展生命的寬度。\r\n我覺得這句話太有道理了！\r\n意思就是：雖然我們無法再長高了，但是我們還可以繼續(xù)長胖。",

"hashId": "fd8e364a4c70d46e77c1610879748a9a",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

},

{

"content": "女生口中所說的“理工男好萌好棒好想嫁！”，\r\n其實理工男是指“會修電腦、會設(shè)置手機(jī)、會安家用電器、\r\n會幫做PPT打EXCEL表PS修圖、話少、高冷、專一、不和亂七八糟的女生來往、\r\n不愛打扮卻又干凈清爽、高高瘦瘦、手指纖長、戴黑框眼鏡超好看的帥哥”。\r\n其實找個帥哥讓他學(xué)電腦，再戴個眼鏡就OK了。",

"hashId": "5001c08a3cc8a281b15c467bc15a4911",

"unixtime": 1418814837,

"updatetime": "2014-12-17 19:13:57"

}

]

}

}

接下來，我們開始今天的實戰(zhàn)，首先創(chuàng)建一個項目NutJoke

點擊下一步

因為我們要網(wǎng)絡(luò)請求

所以我們需要在config.json中配置網(wǎng)絡(luò)請求權(quán)限

網(wǎng)絡(luò)請求的步驟

1、聲明網(wǎng)絡(luò)請求權(quán)限

在entry下的config.json中module字段下配置權(quán)限

"reqPermissions": [

{

"name": "ohos.permission.INTERNET"

}

]

2、支持http明文請求

默認(rèn)支持https，如果要支持http，在entry下的config.json中deviceConfig字段下配置

"deviceConfig": {"default": {

"network": {

"cleartextTraffic": true

}

}},

3、創(chuàng)建HttpRequest

// 導(dǎo)入模塊

import http from '@ohos.net.http';

// 創(chuàng)建HttpRequest對象

let httpRequest = http.createHttp();

4、發(fā)起請求

GET請求（默認(rèn)為GET請求）

// 請求方式：GET

getRequest() {

// 每一個httpRequest對應(yīng)一個http請求任務(wù)，不可復(fù)用

let httpRequest = http.createHttp()

let url = 'https://devapi.qweather.com/v7/weather/now?location=101010100&key=48fbadf80bbc43ce853ab9a92408373e'

httpRequest.request(url, (err, data) => {

if (!err) {

if (data.responseCode == 200) {

console.info('=====data.result=====' + data.result)

// 解析數(shù)據(jù)

//this.content= data.result;

// 解析數(shù)據(jù)

var weatherModel: WeatherModel = JSON.parse(data.result.toString())

// 判斷接口返回碼，0成功

if (weatherModel.code == 200) {

// 設(shè)置數(shù)據(jù)

?

this.realtime = weatherModel.now

?

?

this.isRequestSucceed = true;

?

console.info('=====data.result===this.content==' + weatherModel.now)

?

} else {

// 接口異常，彈出提示

prompt.showToast({ message: "數(shù)據(jù)請求失敗" })

}

?

} else {

// 請求失敗，彈出提示

prompt.showToast({ message: '網(wǎng)絡(luò)異常' })

}

} else {

// 請求失敗，彈出提示

prompt.showToast({ message: err.message })

}

})}

5、解析數(shù)據(jù)（簡單示例）

1.網(wǎng)絡(luò)請求到的json字符串

?

?

export

function

getTest

() {

return

[

{

"content"

:

"有一天晚上我倆一起吃西瓜，老大把西瓜籽很整潔的吐在了一張紙上，\r\n過了幾天，我從教室回但宿舍看到老大在磕瓜子，\r\n我就問他：老大，你什么時候買的瓜子？\r\n老大說：剛曬好，說著抓了一把要遞給我……"

,

"hashId"

:

"bcc5fdc2fb6efc6db33fa242474f108a"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"＂我女朋友氣跑了＂\r\n＂怎么回事？嚴(yán)重嗎？你怎么著她了？＂\r\n＂不嚴(yán)重，我只是很久沒用了＂"

,

"hashId"

:

"03a6095c18e1d6fe7e2c19b2a20d03d1"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"還說神馬來一場說走就走的旅行，\r\n工作后就連一場說走就走的下班都不行。"

,

"hashId"

:

"10edf75c1e7d0933c91f0f39a28a2c84"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"高速路上堵車，路邊葡萄地里有一哥們竟然在偷葡萄，心想太沒素質(zhì)了吧！\r\n不管了我也去，剛溜進(jìn)葡萄地，那哥們竟問我干嘛，\r\n我撇了一眼反問道你干嘛呢？\r\n那哥們答道摘葡萄呢！\r\n我答道：我也摘葡萄呢！\r\n哥們郁悶了說我摘我家的你呢？\r\n我頓時臉紅，哥你家葡萄咋賣呢？"

,

"hashId"

:

"bb572bb5b4844badb31012983f7324f5"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"和老婆在街邊散步，我手上捏著一張已揉成一團(tuán)的傳單，\r\n走了好一會終于看到個垃圾桶，我趕緊跑過去想扔掉，\r\n沒想到老婆從后邊一把拉住我說：老公，那個肯定吃不得了，別撿。\r\n我一愣，發(fā)現(xiàn)垃圾桶頂蓋上放著半個西瓜。"

,

"hashId"

:

"7ebccd3bbfaf24e010f9eb3ee68234bd"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"某考生考了個倒數(shù)第一，回到家被他爸一頓暴揍，\r\n來到學(xué)校老師讓他談?wù)劼浜蟮捏w會，\r\n學(xué)生：“我終于明白了“落后就要挨打”的道理。”"

,

"hashId"

:

"4aee2aa6a79c67682f605c4146a8eca4"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"很多人不喜歡朝九晚五的生活，然后開始創(chuàng)業(yè)。\r\n最終，他的生活變成了朝五晚九。"

,

"hashId"

:

"7b358c4b96cf4a8d82b85545ea8f9603"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"錢這個東西，真是害人精。\r\n小到人與人之間的矛盾，大到國家之間的戰(zhàn)爭，無不是為了錢。\r\n錢可以把人推上萬眾矚目之顛，也可以使人瞬間變成階下囚。\r\n可是，富人們卻沒認(rèn)識到，當(dāng)錢幾輩子花不完時，\r\n掙再多已經(jīng)沒有意義，還不如早日盡點社會責(zé)任，\r\n捐助給需要的人，求得個平安幸福。\r\n看到這個的有錢人們吶，你們什么時侯能捐我點??！"

,

"hashId"

:

"94e18075f8c9c8211dfed5f8d6a62983"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"看到一句很好的名言：我們無法拉伸生命的長度，但是我們可以拓展生命的寬度。\r\n我覺得這句話太有道理了！\r\n意思就是：雖然我們無法再長高了，但是我們還可以繼續(xù)長胖。"

,

"hashId"

:

"fd8e364a4c70d46e77c1610879748a9a"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

},

{

"content"

:

"女生口中所說的“理工男好萌好棒好想嫁！”，\r\n其實理工男是指“會修電腦、會設(shè)置手機(jī)、會安家用電器、\r\n會幫做PPT打EXCEL表PS修圖、話少、高冷、專一、不和亂七八糟的女生來往、\r\n不愛打扮卻又干凈清爽、高高瘦瘦、手指纖長、戴黑框眼鏡超好看的帥哥”。\r\n其實找個帥哥讓他學(xué)電腦，再戴個眼鏡就OK了。"

,

"hashId"

:

"5001c08a3cc8a281b15c467bc15a4911"

,

"unixtime"

:

1418814837

,

"updatetime"

:

"2014-12-17 19:13:57"

}

]

}

2.創(chuàng)建相應(yīng)的對象

export

class

JokeDetailData

{

content

: string

// 內(nèi)容

hashId

: string

// 哈希值

unixtime

: number

//

updatetime

: string

//更新時間

?

?

}

import { JokeDetailData } from './jokeDetailModel';

export class JokeModel {

reason: string //返回說明

error_code: number //返回碼，0為查詢成功

result: {

data: Array // 笑話

}

}

參考文檔

聚合數(shù)據(jù)

Text

尺寸設(shè)置

邊框設(shè)置

項目地址

-https://gitee.com/jianguo888/nut-jokes

審核編輯 黃昊宇