基于HarmonyOS鸿蒙Next ArkUI eTS开发的坚果笑话（NutJoke）

基于ArkUI eTS开发的坚果笑话（NutJoke）

都说笑一笑十年少，确实，在生活中，我们也是很久没有笑了，那么今天，我就做一个鸿蒙eTS版的坚果笑话App，

实现的功能：

• 获取接口数据
• 笑话列表
• 笑话详情页

你能学到的有：

• 网络请求
• 可滚动组件
• 容器组件
• 路由跳转
• 基础组件

文件结构

├── 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

效果预览：

笑话大全接口

我们用到的接口：

接口备注：根据时间戳返回该时间点前或后的笑话列表

请求参数说明：

返回参数说明：

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＂怎么回事？严重吗？你怎么着她了？＂\r\n＂不严重，我只是很久没用了＂",
                "hashId": "03a6095c18e1d6fe7e2c19b2a20d03d1",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            ...
        ]
    }
}

接下来，我们开始今天的实战，首先创建一个项目NutJoke

点击下一步

因为我们要网络请求

所以我们需要在config.json中配置网络请求权限

网络请求的步骤

1、声明网络请求权限

在entry下的config.json中module字段下配置权限

"reqPermissions": [
   {
      "name": "ohos.permission.INTERNET"
   }
]

2、支持http明文请求

默认支持https，如果要支持http，在entry下的config.json中deviceConfig字段下配置

"deviceConfig": {
"default": {
  "network": {
    "cleartextTraffic": true
  }
}
},

3、创建HttpRequest

// 导入模块
import http from '@ohos.net.http';
// 创建HttpRequest对象
let httpRequest = http.createHttp();

4、发起请求

GET请求（默认为GET请求）

// 请求方式：GET
getRequest() {
  // 每一个httpRequest对应一个http请求任务，不可复用
  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)
        // 解析数据
        //this.content= data.result;
        // 解析数据
        var weatherModel: WeatherModel = JSON.parse(data.result.toString())
        // 判断接口返回码，0成功
        if (weatherModel.code == 200) {
          // 设置数据

          this.realtime = weatherModel.now


          this.isRequestSucceed = true;

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

        } else {
          // 接口异常，弹出提示
          prompt.showToast({ message: "数据请求失败" })
        }

      } else {
        // 请求失败，弹出提示
        prompt.showToast({ message: '网络异常' })
      }
    } else {
      // 请求失败，弹出提示
      prompt.showToast({ message: err.message })
    }
  })}

5、解析数据（简单示例）

1.网络请求到的json字符串

[
    {
      "content": "有一天晚上我俩一起吃西瓜，老大把西瓜籽很整洁的吐在了一张纸上，\r\n过了几天，我从教室回但宿舍看到老大在磕瓜子，\r\n我就问他：老大，你什么时候买的瓜子？\r\n老大说：刚晒好，说着抓了一把要递给我……",
      "hashId": "bcc5fdc2fb6efc6db33fa242474f108a",
      "unixtime": 1418814837,
      "updatetime": "2014-12-17 19:13:57"
    },
    ...
]

2.创建相应的对象

export class JokeDetailData {
  content: string // 内容
  hashId: string // 哈希值
  unixtime: number // 
  updatetime: string //更新时间
}

import { JokeDetailData } from './jokeDetailModel';

export class JokeModel {
  reason: string //返回说明
  error_code: number //返回码，0为查询成功

  result: {

    data: Array<JokeDetailData> // 笑话
  }
}

参考文档

• 聚合数据
• Text
• 尺寸设置
• 边框设置

项目地址