【Harmony OS 5】一个新闻资讯类小应用以下是一个使用HarmonyOS Stage模型开发的新闻资讯类应用示例

以下是一个使用HarmonyOS Stage模型开发的新闻资讯类应用示例。这个应用包含新闻列表展示和新闻详情查看功能，采用了现代UI设计并遵循HarmonyOS最佳实践。

模拟数据

先使用模拟数据，后期可以通过http请求获得数据。


export function getMockNews(): NewsItem[] {
  return [
    {
      id: 1,
      title: "鸿蒙4.0正式发布，带来全新交互体验",
      summary: "鸿蒙操作系统迎来重大更新，分布式能力进一步增强",
      content: "正文内容...",
      imageUrl: "common/images/news1.png",
      category: "科技",
      publishTime: "2023-11-15 09:30",
      readCount: 12543
    },
    // 更多新闻数据...
  ]
}

首页

import { NewsItem } from '../model/NewsData'
import { getMockNews } from '../model/MockData'

@Entry
@Component
struct Index {
  @State newsList: NewsItem[] = getMockNews()

  build() {
    Column() {
      // 标题栏
      Row() {
        Text("新闻资讯")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Blank()
        Image($r("app.media.ic_settings"))
          .width(24)
          .height(24)
      }
      .padding(12)
      .width('100%')
      
      // 分类导航
      Scroll() {
        Row() {
          ForEach(['推荐', '科技', '财经', '体育', '娱乐'], (category) => {
            Text(category)
              .padding(8)
              .borderRadius(20)
              .backgroundColor('#f5f5f5')
              .margin({ right: 10 })
          })
        }
        .padding(12)
      }
      
      // 新闻列表
      List({ space: 10 }) {
        ForEach(this.newsList, (news: NewsItem) => {
          ListItem() {
            NewsCard({ news: news })
          }
        }, news => news.id.toString())
      }
      .layoutWeight(1)
    }
  }
}

@Component
struct NewsCard {
  @Prop news: NewsItem

  build() {
    Row() {
      Column() {
        Text(this.news.title)
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .maxLines(2)
        
        Text(this.news.summary)
          .fontSize(14)
          .maxLines(2)
          .margin({ top: 8 })
        
        Row() {
          Text(this.news.category)
            .fontSize(12)
            .backgroundColor('#e6f3ff')
            .padding(4)
          
          Blank()
          
          Text(this.news.publishTime)
            .fontSize(12)
          
          Text(`${this.news.readCount}阅读`)
            .fontSize(12)
            .margin({ left: 8 })
        }
        .margin({ top: 8 })
      }
      
      Image(this.news.imageUrl)
        .width(80)
        .height(80)
        .objectFit(ImageFit.Cover)
        .borderRadius(8)
    }
    .padding(12)
    .onClick(() => {
      router.push({
        url: "pages/Detail",
        params: { newsId: this.news.id }
      })
    })
  }
}

详情页

import { NewsItem } from '../model/NewsData'
import { getMockNews } from '../model/MockData'

@Entry
@Component
struct DetailPage {
  private newsId: number = parseInt(router.getParams()?.newsId)
  
  @State newsDetail: NewsItem = new NewsItem()

  aboutToAppear() {
    // 实际开发中应通过接口获取数据
    this.newsDetail = getMockNews().find(item => item.id === this.newsId) || new NewsItem()
  }

  build() {
    Column() {
      // 导航栏
      Row() {
        Image($r("app.media.ic_back"))
          .width(24)
          .height(24)
          .onClick(() => router.back())
          
        Blank()
      }
      .padding(12)
      
      Scroll() {
        Column() {
          Text(this.newsDetail.title)
            .fontSize(22)
            .fontWeight(FontWeight.Bold)
          
          Row() {
            Text(this.newsDetail.category)
              .backgroundColor('#e6f3ff')
              .padding(4)
              .borderRadius(4)
            
            Text(this.newsDetail.publishTime)
              .margin({ left: 8 })
            
            Text(`${this.newsDetail.readCount}阅读`)
              .margin({ left: 8 })
          }
          .margin({ top: 12 })
          
          Image(this.newsDetail.imageUrl)
            .height(200)
            .objectFit(ImageFit.Cover)
            .margin({ top: 16 })
          
          Text(this.newsDetail.content)
            .fontSize(16)
            .margin({ top: 20 })
        }
        .padding(16)
      }
      .layoutWeight(1)
      
      // 底部操作栏
      Row() {
        Image($r("app.media.ic_like"))
          .width(24)
          .height(24)
        
        Blank()
        
        Button("分享")
          .backgroundColor("#1a6ffd")
          .fontColor(Color.White)
      }
      .padding(16)
    }
  }
}

功能特点

现代化UI设计

卡片式布局

响应式排版

分类导航栏

图片占位和加载优化

Stage模型特性

基于UIAbility的能力模型

组件独立生命周期

使用路由进行页面跳转

使用依赖注入管理状态

完整功能流程

新闻列表展示

分类浏览

新闻详情查看

基础交互功能（返回、分享等）