都說(shuō)笑一笑十年少，確實(shí)，在生活中，我們也是很久沒(méi)有笑了，那么今天，我就做一個(gè)鴻蒙eTS版的堅(jiān)果笑話App，

實(shí)現(xiàn)的功能：

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

笑話列表

笑話詳情頁(yè)

你能學(xué)到的有：

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

可滾動(dòng)組件

容器組件

路由跳轉(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

請(qǐng)求方式：http get

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

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

請(qǐng)求參數(shù)說(shuō)明：

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

返回參數(shù)說(shuō)明：

	名稱(chēng)	類(lèi)型	說(shuō)明
	error_code	int	返回碼
	reason	string

JSON返回示例

{

"error_code": 0,

"reason": "Success",

"result": {

"data": [

{

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

"hashId": "bcc5fdc2fb6efc6db33fa242474f108a",

"unixtime": 1418814837,

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

},

{

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

"hashId": "03a6095c18e1d6fe7e2c19b2a20d03d1",

"unixtime": 1418814837,

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

},

{

"content": "還說(shuō)神馬來(lái)一場(chǎng)說(shuō)走就走的旅行，\r\n工作后就連一場(chǎng)說(shuō)走就走的下班都不行。",

"hashId": "10edf75c1e7d0933c91f0f39a28a2c84",

"unixtime": 1418814837,

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

},

{

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

"hashId": "bb572bb5b4844badb31012983f7324f5",

"unixtime": 1418814837,

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

},

{

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

"hashId": "7ebccd3bbfaf24e010f9eb3ee68234bd",

"unixtime": 1418814837,

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

},

{

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

"hashId": "4aee2aa6a79c67682f605c4146a8eca4",

"unixtime": 1418814837,

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

},

{

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

"hashId": "7b358c4b96cf4a8d82b85545ea8f9603",

"unixtime": 1418814837,

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

},

{

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

"hashId": "94e18075f8c9c8211dfed5f8d6a62983",

"unixtime": 1418814837,

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

},

{

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

"hashId": "fd8e364a4c70d46e77c1610879748a9a",

"unixtime": 1418814837,

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

},

{

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

"hashId": "5001c08a3cc8a281b15c467bc15a4911",

"unixtime": 1418814837,

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

}

]

}

}

接下來(lái)，我們開(kāi)始今天的實(shí)戰(zhàn)，首先創(chuàng)建一個(gè)項(xiàng)目NutJoke

點(diǎn)擊下一步

因?yàn)槲覀円W(wǎng)絡(luò)請(qǐng)求

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

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

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

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

"reqPermissions": [

{

"name": "ohos.permission.INTERNET"

}

]

2、支持http明文請(qǐng)求

默認(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對(duì)象

let httpRequest = http.createHttp();

4、發(fā)起請(qǐng)求

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

// 請(qǐng)求方式：GET

getRequest() {

// 每一個(gè)httpRequest對(duì)應(yīng)一個(gè)http請(qǐng)求任務(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ù)請(qǐng)求失敗" })

}

?

} else {

// 請(qǐng)求失敗，彈出提示

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

}

} else {

// 請(qǐng)求失敗，彈出提示

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

}

})}

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

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

?

?

export

function

getTest

() {

return

[

{

"content"

:

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

,

"hashId"

:

"bcc5fdc2fb6efc6db33fa242474f108a"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"03a6095c18e1d6fe7e2c19b2a20d03d1"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

"還說(shuō)神馬來(lái)一場(chǎng)說(shuō)走就走的旅行，\r\n工作后就連一場(chǎng)說(shuō)走就走的下班都不行。"

,

"hashId"

:

"10edf75c1e7d0933c91f0f39a28a2c84"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"bb572bb5b4844badb31012983f7324f5"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"7ebccd3bbfaf24e010f9eb3ee68234bd"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"4aee2aa6a79c67682f605c4146a8eca4"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"7b358c4b96cf4a8d82b85545ea8f9603"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"94e18075f8c9c8211dfed5f8d6a62983"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"fd8e364a4c70d46e77c1610879748a9a"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

},

{

"content"

:

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

,

"hashId"

:

"5001c08a3cc8a281b15c467bc15a4911"

,

"unixtime"

:

1418814837

,

"updatetime"

:

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

}

]

}

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

export

class

JokeDetailData

{

content

: string

// 內(nèi)容

hashId

: string

// 哈希值

unixtime

: number

//

updatetime

: string

//更新時(shí)間

?

?

}

import { JokeDetailData } from './jokeDetailModel';

export class JokeModel {

reason: string //返回說(shuō)明

error_code: number //返回碼，0為查詢(xún)成功

result: {

data: Array // 笑話

}

}

參考文檔

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

Text

尺寸設(shè)置

邊框設(shè)置

項(xiàng)目地址

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

審核編輯 黃昊宇