鸿蒙HarmonyOS 5中使用ArkUI-X实现政务发布的网站

勿念436

250人浏览 · 2025-06-26 23:11:07

勿念436 · 2025-06-26 23:11:07 发布

下面我将介绍如何使用ArkUI-X框架在HarmonyOS 5中开发一个政务发布网站，包含新闻公告、政策解读、办事指南、互动交流等功能模块。

项目结构

/GovWebsite
  ├── entry
  │   └── src
  │       ├── main
  │       │   ├── ets
  │       │   │   ├── components
  │       │   │   │   ├── NewsCard.ets       // 新闻卡片组件
  │       │   │   │   ├── PolicyCard.ets     // 政策卡片组件
  │       │   │   │   ├── ServiceItem.ets    // 服务项组件
  │       │   │   │   ├── CommentItem.ets    // 评论项组件
  │       │   │   ├── pages
  │       │   │   │   ├── HomePage.ets       // 首页
  │       │   │   │   ├── NewsPage.ets       // 新闻列表页
  │       │   │   │   ├── NewsDetail.ets     // 新闻详情页
  │       │   │   │   ├── PolicyPage.ets     // 政策页面
  │       │   │   │   ├── ServicePage.ets    // 办事指南页
  │       │   │   │   ├── InteractivePage.ets // 互动交流页
  │       │   │   ├── model
  │       │   │   │   ├── News.ets           // 新闻模型
  │       │   │   │   ├── Policy.ets         // 政策模型
  │       │   │   │   ├── Service.ets        // 服务模型
  │       │   ├── resources
  │       │   │   ├── base
  │       │   │   │   ├── element            // 图标等资源
  │       │   │   │   ├── media              // 图片视频等

实现步骤

1. 创建数据模型

News.ets (新闻模型)

export class News {
  id: string;
  title: string;         // 新闻标题
  content: string;       // 新闻内容
  publishDate: string;   // 发布日期
  source: string;        // 来源
  category: 'announcement' | 'news' | 'notice'; // 分类
  readCount: number = 0; // 阅读量
  images: string[] = []; // 图片列表
  
  constructor(id: string, title: string, content: string, publishDate: string, source: string, category: string) {
    this.id = id;
    this.title = title;
    this.content = content;
    this.publishDate = publishDate;
    this.source = source;
    this.category = category;
  }
}

Policy.ets (政策模型)

export class Policy {
  id: string;
  title: string;         // 政策标题
  summary: string;        // 政策摘要
  content: string;        // 政策内容
  publishDate: string;    // 发布日期
  department: string;     // 发布部门
  tags: string[] = [];    // 标签
  
  constructor(id: string, title: string, summary: string, content: string, publishDate: string, department: string) {
    this.id = id;
    this.title = title;
    this.summary = summary;
    this.content = content;
    this.publishDate = publishDate;
    this.department = department;
  }
}

Service.ets (服务模型)

export class Service {
  id: string;
  name: string;          // 服务名称
  department: string;     // 负责部门
  process: string;       // 办理流程
  materials: string[];   // 所需材料
  onlineUrl: string;     // 在线办理链接
  contact: string;       // 联系方式
  
  constructor(id: string, name: string, department: string, process: string, materials: string[], onlineUrl: string) {
    this.id = id;
    this.name = name;
    this.department = department;
    this.process = process;
    this.materials = materials;
    this.onlineUrl = onlineUrl;
  }
}

2. 创建组件

NewsCard.ets (新闻卡片组件)

@Component
export struct NewsCard {
  @Prop news: News;
  @Prop onTap: () => void;
  
  build() {
    Column() {
      // 新闻图片
      if (this.news.images.length > 0) {
        Image(this.news.images[0])
          .width('100%')
          .height(120)
          .objectFit(ImageFit.Cover)
          .borderRadius(4)
          .margin({ bottom: 8 })
      }
      
      // 新闻标题
      Text(this.news.title)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 6 })
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      
      // 新闻信息
      Row() {
        Text(this.news.source)
          .fontSize(12)
          .fontColor('#666')
        
        Text(this.news.publishDate)
          .fontSize(12)
          .fontColor('#666')
          .margin({ left: 10 })
      }
      .margin({ bottom: 6 })
      
      // 阅读量
      Row() {
        Image($r('app.media.eye'))
          .width(12)
          .height(12)
          .margin({ right: 4 })
        
        Text(this.news.readCount.toString())
          .fontSize(12)
          .fontColor('#666')
      }
    }
    .padding(12)
    .backgroundColor(Color.White)
    .borderRadius(8)
    .shadow({ radius: 2, color: '#f0f0f0', offsetX: 1, offsetY: 1 })
    .onClick(() => this.onTap())
  }
}

PolicyCard.ets (政策卡片组件)

@Component
export struct PolicyCard {
  @Prop policy: Policy;
  @Prop onTap: () => void;
  
  build() {
    Column() {
      // 政策标题
      Text(this.policy.title)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 8 })
      
      // 政策摘要
      Text(this.policy.summary)
        .fontSize(14)
        .margin({ bottom: 8 })
        .maxLines(3)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      
      // 标签
      if (this.policy.tags.length > 0) {
        Wrap() {
          ForEach(this.policy.tags, (tag: string) => {
            Text(tag)
              .fontSize(12)
              .padding({ left: 6, right: 6, top: 2, bottom: 2 })
              .backgroundColor('#f0f8ff')
              .borderRadius(4)
              .margin({ right: 6, bottom: 6 })
          })
        }
        .margin({ bottom: 8 })
      }
      
      // 底部信息
      Row() {
        Text(this.policy.department)
          .fontSize(12)
          .fontColor('#666')
        
        Text(this.policy.publishDate)
          .fontSize(12)
          .fontColor('#666')
          .margin({ left: 10 })
      }
    }
    .padding(12)
    .backgroundColor(Color.White)
    .borderRadius(8)
    .shadow({ radius: 2, color: '#f0f0f0', offsetX: 1, offsetY: 1 })
    .onClick(() => this.onTap())
  }
}

3. 创建页面

HomePage.ets (首页)

@Entry
@Component
struct HomePage {
  @State newsList: News[] = [];
  @State policyList: Policy[] = [];
  @State serviceList: Service[] = [];
  
  aboutToAppear() {
    this.loadData();
  }
  
  loadData() {
    // 模拟数据加载
    this.newsList = [
      new News('1', '市政府召开2023年度工作总结会议', '内容摘要...', '2023-12-20', '市政府办公室', 'news'),
      // 更多新闻...
    ];
    
    this.policyList = [
      new Policy('1', '关于促进中小企业发展的若干政策', '政策摘要...', '政策内容...', '2023-11-15', '市经济和信息化局'),
      // 更多政策...
    ];
    
    this.serviceList = [
      new Service('1', '居住证办理', '市公安局', '办理流程...', ['身份证', '居住证明'], 'http://example.com'),
      // 更多服务...
    ];
  }
  
  build() {
    Column() {
      // 顶部轮播图
      Swiper() {
        ForEach([1, 2, 3], (index: number) => {
          Image($r(`app.media.banner${index}`))
            .width('100%')
            .height(180)
        })
      }
      .indicator(true)
      .autoPlay(true)
      .interval(3000)
      .height(180)
      .margin({ bottom: 15 })
      
      // 快捷入口
      Grid() {
        GridItem() {
          Column() {
            Image($r('app.media.news'))
              .width(40)
              .height(40)
            Text('新闻动态')
              .fontSize(14)
          }
          .onClick(() => {
            // 跳转新闻页
          })
        }
        
        // 其他入口(政策解读、办事指南、互动交流等)...
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(15)
      .columnsGap(15)
      .margin({ bottom: 20 })
      
      // 新闻动态
      Row() {
        Text('新闻动态')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        
        Text('更多')
          .fontSize(14)
          .fontColor('#1890ff')
          .margin({ left: 10 })
          .onClick(() => {
            // 跳转新闻列表页
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .margin({ bottom: 10 })
      
      Scroll() {
        Row() {
          ForEach(this.newsList, (news: News) => {
            NewsCard({
              news: news,
              onTap: () => {
                // 跳转新闻详情页
              }
            })
            .width(280)
            .margin({ right: 15 })
          })
        }
        .padding({ left: 15, right: 15 })
      }
      .height(220)
      .margin({ bottom: 20 })
      
      // 政策解读
      Row() {
        Text('政策解读')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        
        Text('更多')
          .fontSize(14)
          .fontColor('#1890ff')
          .margin({ left: 10 })
          .onClick(() => {
            // 跳转政策页
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .margin({ bottom: 10 })
      
      Grid() {
        ForEach(this.policyList, (policy: Policy) => {
          GridItem() {
            PolicyCard({
              policy: policy,
              onTap: () => {
                // 跳转政策详情页
              }
            })
          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .rowsGap(15)
      .columnsGap(15)
      .margin({ bottom: 20 })
    }
    .width('100%')
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}

NewsDetail.ets (新闻详情页)

@Component
export struct NewsDetail {
  @State news: News;
  @State relatedNews: News[] = [];
  
  aboutToAppear() {
    // 加载新闻详情和相关信息
    this.loadData();
  }
  
  loadData() {
    // 模拟数据
    this.news = new News('1', '市政府召开2023年度工作总结会议', 
      '12月20日，市政府召开2023年度工作总结会议...详细内容...', 
      '2023-12-20', '市政府办公室', 'news');
    this.news.images = ['img1', 'img2'];
    
    this.relatedNews = [
      new News('2', '2023年市政府十件民生实事全部完成', '内容...', '2023-12-18', '市政府办公室', 'news'),
      // 更多相关新闻...
    ];
  }
  
  build() {
    Column() {
      Scroll() {
        Column() {
          // 新闻标题
          Text(this.news.title)
            .fontSize(22)
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 15 })
          
          // 新闻信息
          Row() {
            Text(this.news.source)
              .fontSize(14)
              .fontColor('#666')
            
            Text(this.news.publishDate)
              .fontSize(14)
              .fontColor('#666')
              .margin({ left: 15 })
          }
          .margin({ bottom: 20 })
          
          // 新闻图片
          if (this.news.images.length > 0) {
            Swiper() {
              ForEach(this.news.images, (img: string) => {
                Image(img)
                  .width('100%')
                  .height(200)
                  .objectFit(ImageFit.Cover)
              })
            }
            .indicator(true)
            .height(200)
            .margin({ bottom: 20 })
          }
          
          // 新闻内容
          Text(this.news.content)
            .fontSize(16)
            .lineHeight(24)
            .margin({ bottom: 30 })
        }
        .padding(20)
      }
      .layoutWeight(1)
      
      // 相关新闻
      Column() {
        Text('相关新闻')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 10, left: 20 })
        
        Scroll() {
          Column() {
            ForEach(this.relatedNews, (news: News) => {
              NewsCard({
                news: news,
                onTap: () => {
                  // 跳转相关新闻详情
                }
              })
              .margin({ bottom: 10 })
            })
          }
          .padding(20)
        }
        .height(180)
      }
      .backgroundColor('#f9f9f9')
    }
    .width('100%')
    .height('100%')
  }
}

4. 添加导航和全局样式

main.ets (入口文件)

@Entry
@Component
struct GovWebsite {
  @State currentTab: number = 0;
  
  build() {
    Column() {
      // 内容区域
      TabContent({ currentTab: this.currentTab }) {
        HomePage()
          .tabBar('首页')
        
        NewsPage()
          .tabBar('新闻')
        
        PolicyPage()
          .tabBar('政策')
        
        ServicePage()
          .tabBar('办事')
      }
      .layoutWeight(1)
      
      // 底部导航
      TabBar({ currentTab: this.currentTab }) {
        TabBarItem({
          icon: $r('app.media.home'),
          text: '首页',
          index: 0
        })
        
        TabBarItem({
          icon: $r('app.media.news'),
          text: '新闻',
          index: 1
        })
        
        TabBarItem({
          icon: $r('app.media.policy'),
          text: '政策',
          index: 2
        })
        
        TabBarItem({
          icon: $r('app.media.service'),
          text: '办事',
          index: 3
        })
      }
      .onChange((index: number) => {
        this.currentTab = index;
      })
      .barMode(BarMode.Fixed)
      .barWidth('100%')
      .barHeight(56)
    }
    .width('100%')
    .height('100%')
  }
}