​基于ArkUI eTS开发的坚果新闻（NutNews）

作者：坚果
公众号：”大前端之旅”
OpenHarmony布道师，InfoQ签约作者，开源项目GVA成员之一

实现的功能：

• 获取接口数据
• 新闻列表
• 新闻详情页

你能学到的有：

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

文件结构

.
├── config.json
├── ets
│   └── MainAbility
│       ├── app.ets
│       ├── data
│       │   └── get_test.ets
│       ├── model
│       │   ├── newsDetailModel.ets
│       │   └── newsModel.ets
│       └── pages
│           ├── Main.ets
│           ├── index.ets
│           └── newsDetails.ets
└── resources
    ├── base
    │   ├── element
    │   │   ├── color.json
    │   │   └── string.json
    │   └── media
    │       └── icon.png
    └── rawfile

复制

效果预览：

gif13

获取新闻接口a

标识：get

• 接口地址：
  https://way.jd.com/jisuapi/get
• 请求方式：
  HTTPS GET POST
• 请求示例：
  https://way.jd.com/jisuapi/get?channel=头条&num=10&start=0&appkey=您申请的APPKEY 点此获取APPKEY

Url:https://way.jd.com/jisuapi/get?channel=头条&num=40&start=0&appkey=7c913be32b690701cd994d804a6d4294

image-20220722220048504

请求参数说明：

返回参数说明：

JSON返回示例

Status Code: 200
Time：112ms
Date：Fri 22 Jul 2022 13:56:05 GMT
Body：
{
    "code": "10000",
    "charge": false,
    "msg": "查询成功",
    "result": {
        "status": 0,
        "msg": "ok",
        "result": {
            "channel": "头条",
            "num": 2,
            "list": [
                {
                    "title": "联播+｜加强数字政府建设 习近平这样擘画",
                    "time": "2022-07-22",
                    "src": "央视网",
                    "category": "news",
                    "pic": "https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/37dc-5728bd76bdd31153ce20c3534e352eda.jpg",
                    "url": "https://news.sina.cn/gn/2022-07-22/detail-imizirav4997774.d.html?vt=4&pos=108",
                    "weburl": "https://news.sina.com.cn/c/xl/2022-07-22/doc-imizirav4997774.shtml",
                    "content": "<p class=\"art_p\"><font><font>联播+</font></font><font>第五届数字中国建设峰会将于7月23日至24日在福建省福州市举办。党的十八大以来，以习近平同志为核心的党中央高度重视数字中国建设工作，召开了一系列重要会议，出台了一系列重要文件，作出了一系列重大决策部署。</font></p>\n<p class=\"art_p\">数字政府是数字中国的重要组成部分，加强数字政府建设对加快政府职能转变、满足人民日益增长的美好生活需要意义重大。</p>\n<div sax-type=\"proxy\" class=\"j_native_uvw220722 box\" style=\"margin:20px 0\"></div><p class=\"art_p\">央视网《联播+》特梳理习近平总书记关于加强数字政府建设的重要论述，与您一同学习领会。</p>\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"963\" src='https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/37dc-5728bd76bdd31153ce20c3534e352eda.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"963\" src='https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/0494-1c24b42602b182547d9014f949c73d74.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"963\" src='https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/117d-fd57c144bd89f697e4111b5d137d9c9b.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"963\" src='https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/9677-b904d399f267d4a5546c6351eb7dacc3.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"963\" src='https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/2c83-3f7fd38f8209cf60d83d3f2c81a18f55.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"894\" src='https://n.sinaimg.cn/news/crawl/644/w550h894/20220722/b5b8-374cb2b2aa87a0905bb2d7881c8db588.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"963\" src='https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/4fc9-509be2f9938bbcfd8a3f0fe4f872e99b.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n\r\n\t\t\t\t\t\t\t\t\t\t<figure class=\"art_img_mini j_p_gallery\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img class=\"art_img_mini_img j_fullppt_cover\"  w=\"550\" h=\"963\" src='https://n.sinaimg.cn/news/crawl/713/w550h963/20220722/0636-e6af69462d3607c613c0f17593173328.jpg' alt=\"\" />\r\n\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"art_img_tit\"></h2>\r\n\t\t\t\t\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t\t\t\t\t\n<p class=\"art_p\">（中央广播电视总台央视网）</p><p style=\"text-align:right;\" class=\"article-editor\">责任编辑：朱学森 SN240</p>"
                },
                {
                    "title": "瓦拉内：不后悔来曼联   有关C罗争论都是球队外的",
                    "time": "2022-07-22",
                    "src": "新浪体育讯",
                    "category": "sports",
                    "pic": "https://n.sinaimg.cn/sports/transform/268/w650h418/20220722/4a1a-d44ad51b12a38723a8902321e215b143.jpg",
                    "url": "https://sports.sina.cn/premierleague/manutd/2022-07-22/detail-imizirav4952816.d.html?vt=4&pos=108",
                    "weburl": "https://sports.sina.com.cn/g/pl/2022-07-22/doc-imizirav4952816.shtml",
                    "content": "<p class=\"art_p\">近日，曼联后卫瓦内拉接受没拆封时，发表了自己的一些看法。</p>\n<p class=\"art_p\">首先是对于是否后悔来到曼联的问题，他直言自己绝对没有做错：“在足球界你要挑战自己，不断提高。在老地方停留了10年后我想要提升自己。我认为英超绝对精彩，曼联也是一家很伟大的俱乐部，我从来没有觉得我的决定是错误的。”</p>\n<p class=\"art_p\">面对新赛季后卫位置上的竞争，瓦拉内表示这对球队有好处：“竞争对于球队来说是有好处的，马奎尔是队长，他很优秀。每一家俱乐部都是一样，如果球员都想着为球队发挥，那么一定是好事。”</p>\n<div sax-type=\"proxy\" class=\"j_native_uvw220722 box\" style=\"margin:20px 0\"></div><p class=\"art_p\">面对新赛季，瓦拉内认为他们有一个好的开始，并且新主帅滕哈赫的到来让球队更加富有能量，变的攻击性更强，球队能提出真正享受的足球。</p>\n<p class=\"art_p\">最后，瓦拉内也对C罗的事件发表了自己的看法：“对于他的争论都是在更衣室外面发生的。我们都知道他是一名传奇球员，他总能帮助球队。和他一起踢球很棒，我们知道他的能力，知道他名气很大，因此很多人都会谈论他的表现和球队的表现。”</p>\n<p class=\"art_p\">（塞尔吉奥）</p>"
                }
            ]
        }
    },
    "requestId": "d405d8a616eb42c4ba16b873540f8d53"

2.创建相应的对象

/*
 * Copyright (c) 2021 JianGuo Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { NewsDetailData } from './newsDetailModel';
export class NewsModel {
  charge: string //返回说明
  code: number //返回码，1000为查询成功
  msg: string //
  result: {
    result: NewsModel7 // 笑话
    status: number //数量
    msg: string // ok
  }
}
export class NewsModel7 {
  channel: string //频道
  list: Array // 笑话
}

复制

/*
 * Copyright (c) 2021 JianGuo Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


export class NewsDetailData {
  title: string // 标题
  time: string // 时间
  src: string //来源
  category: string //分类
  pic: string // 图片
  content: string //
  url: string //原文手机网址
  weburl: string //原文PC网址



}

参考文档

• Text
• 尺寸设置
• 边框设置
• ?RichText
• Web

https://wx.jdcloud.com/market/datas/31/11073

项目地址

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

文章来源于互联网:​基于ArkUI eTS开发的坚果新闻（NutNews）