HarmonyOS鸿蒙NEXT开发案例:新闻资讯类行业官方模板介绍 (Part1:新闻资讯元服务模板)

HarmonyOS鸿蒙NEXT开发案例:新闻资讯类行业官方模板介绍 (Part1:新闻资讯元服务模板) 鸿蒙生态市场

💡摘要: 本模板来自华为生态市场(Huawei Partner Market),本文选取了新闻资讯类行业的一个官方模板——新闻资讯元服务模板,并进行了简要的介绍与分析。各位开发者伙伴们,更多行业模板与组件请进入生态市场查看!

一、概述

  1. 行业洞察(待补充)

    1)行业痛点

  2. 优秀案例概览

    基于以上行业分析,本期将介绍鸿蒙生态市场新闻资讯类行业模板——新闻资讯元服务模板,为行业提供常用功能的开发案例,模板主要分首页、视频和我的三大模块

    • Stage开发模型 + 声明式UI开发范式
    • 分层架构设计 + 组件化拆分,支持开发者在开发时既可以选择完整使用模板,也可以根据需求单独选用其中的业务组件
    • 本模板已集成华为账号,只需做少量配置和定制即可快速实现页面的快速加载、华为账号的登录等功能
首页 视频 我的
首页 视频 我的

本模板主要页面及核心功能如下所示:

新闻模板
 |-- 首页
 |    └-- 新闻列表
 |         |-- 新闻详情
 |         |-- 评论 -- 提交评论
 |         |-- 收藏
 |         └-- 分享
 |-- 视频
 |    └-- 视频列表
 |         |-- 视频详情
 |         |-- 收藏
 |         └-- 分享
 └-- 我的
      |-- 用户信息
      |    |-- 修改头像
      |    |-- 修改昵称
      |    └-- 关联解绑账号
      └-- 常用服务
           |-- 我的收藏
           |-- 我的评论
           |-- 浏览记录
           └-- 设置
                |-- 字号设置
                └-- 隐私协议

二、应用架构设计

1. 分层模块化设计

  • **产品定制层:**专注于满足不同设备或使用场景的个性化需求,作为应用的入口,是用户直接互动的界面。

    • 本实践暂时只支持直板机,为单HAP包形式,包含路由根节点、底部导航栏等。
  • **基础特性层:**用于存放相对独立的功能UI和业务逻辑实现。

    • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
    • 每个功能模块都具备高内聚、低耦合、可定制的特点,支持产品的灵活部署。
  • **公共能力层:**存放公共能力,包括公共UI组件、数据管理、外部交互和工具库等共享功能。

    • 本实践的公共能力层分为公共基础能力和可分可合组件,均打包为HAR包被上层业务组件引用。
    • 公共基础能力包含日志、文件处理等工具类,公共类型定义,网络库,以及弹窗、加载等公共组件。
    • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块,支持开发者在开发中单独集成使用,详见业务组件设计章节。

分层模块化设计

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

为支持开发者单独获取特定场景的页面和功能,本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块,不依赖公共基础能力包,开发者可以单独集成,开箱即用,降低使用难度。

业务组件设计

三、行业场景技术方案(待补充)

  1. 账号管理

    1)场景说明

    2)技术方案

  2. 新闻列表

    1)场景说明

    2)技术方案

  3. 视频详情

    1)场景说明

    2)技术方案

  4. 收藏评论

    1)场景说明

    2)技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示:

News
  │─commons/commonLib/src/main   
  │  ├─ets
  │  │  ├─constants
  │  │  │      CommonContants.ets              // 公共常量
  │  │  │      CommonEnums.ets                 // 公共枚举常量
  │  │  ├─database                           
  │  │  │      PreferencesUtil.ets             // 首选项存储工具
  │  │  ├─model                           
  │  │  │      NewsData.ets                    // 新闻数据类
  │  │  │      NewsDataSource.ets              // 新闻加载数据源
  │  │  │      NewsTypeModel                   // 新闻类型类
  │  │  │      NewsViewModel                   // 新闻模型类  
  │  │  ├─preferences                           
  │  │  │      Preferences.ets                 // 首选项类  
  │  │  ├─types                           
  │  │  │      Types.ets                       // 用户类型  
  │  │  └─utils
  │  │         AccountUtil.ets                 // 账号工具
  │  │         BreakpointType.ets              // 断点工具
  │  │         FormatUtil.ets                  // 格式化日期工具
  │  │         GlobalContext.ets               // 全局上下文工具     
  │  │         Logger.ets                      // 日志工具
  │  │         PermissionUtil.ets              // 权限加载工具
  │  │         RouterModule.ets                // 路由模块工具       
  │  └─resources
  │─commons/componentLib/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      BaseTitle.ets                   // 二级页面导航页标题组件
  │  │  │      CommonButton.ets                // 公共按钮组件
  │  │  │      GlobalDialog.ets                // 全局弹窗组件
  │  │  └─dialog                               // 与页面一一对应的vm层 
  │  │         BindPhoneDialog.ets             // 绑定手机号弹窗组件
  │  └─resources
  │─commons/network/src/main   
  │  ├─ets
  │  │  ├─axiosHttpRequest
  │  │  │      AxiosHttp.ets                   // 网络请求封装
  │  │  │      AxiosModel.ets                  // 网络请求对象
  │  │  │      AxiosRequest.ets                // 网络请求定义
  │  │  │      HttpRequestApi.ets              // 网络请求接口
  │  │  ├─cardManager                            
  │  │  │      CardManager.ets                 // 卡片管理
  │  │  │      EntryContext.ets                // 应用上下文
  │  │  │      SubscriberClass.ets             // 卡片公共事件  
  │  │  ├─constants                           
  │  │  │      Common.ets                      // 网络请求公共常量  
  │  │  ├─mock                            
  │  │  │      MockData.ets                    // 接口mock数据
  │  │  │      MockResponse.ets                // 接口mock请求
  │  │  ├─models                               // 与页面一一对应的vm层 
  │  │  │      RequestModel.ets                // 卡片管理
  │  │  │      ResponseModel.ets               // 应用上下文       
  │  │  └─utils
  │  │         Utils.ets                       // 网络请求工具
  │  └─resources
  │─features/home/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      CommentDetail.ets               // 评论详情组件
  │  │  │      NewsDetail.ets                  // 新闻详情组件
  │  │  │      PullToRefreshNews.ets           // 新闻列表刷新组件
  │  │  │      TabBar.ets                      // 热门和本地新闻切换组件
  │  │  ├─viewModels                           // 与页面一一对应的vm层 
  │  │  │      CommentModel.ets                // 评论页vm层
  │  │  │      HomePageVM.ets                  // 首页vm层
  │  │  └─pages
  │  │         HomePage.ets                    // 新闻首页
  │  └─resources
  │─features/mine/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      GlobalDialog.ets                // 全局弹窗组件
  │  │  │      HistoryRecord.ets               // 历史记录组件
  │  │  │      MyComment.ets                   // 我的评论组件
  │  │  │      MySettings.ets                  // 我的设置组件
  │  │  │      PrivacyPolicyPage.ets           // 隐私协议组件
  │  │  │      SetFontSize.ets                 // 字号设置组件
  │  │  │      UserInfoSettingPage             // 用户信息设置组件
  │  │  ├─pages
  │  │  │      MinePage.ets                    // 我的页面
  │  │  │      ProfileEditPage.ets             // 简介编辑
  │  │  ├─utils
  │  │  │      SetFontSizeUtil.ets             // 字号设置工具
  │  │  │      Util.ets                        // 我的页面通用工具
  │  │  └─viewModels                           // 与页面一一对应的vm层
  │  └─resources
  │─features/video/src/main   
  │  ├─ets
  │  │  │─components
  │  │  │      VideoPlayer.ets                 // 视频组件
  │  │  │─pages
  │  │  │      VideoView.ets                   // 视频列表页
  │  │  │      VideoDetailPage.ets             // 视频详情页
  │  │  │─utils
  │  │  │      CommonDataSource.ets            // 视频公共数据工具
  │  │  └─viewModels                           // 与页面一一对应的vm层
  │  └─resources
  └─entry/src/main   
     ├─ets
     │  ├─constants
     │  │      Constants.ets                   // 入口页公共数据
     │  ├─entryability
     │  │      EntryAbility.ets                // 应用程序入口
     │  ├─entryformability
     │  │      EntryFormAbility.ets            // 卡片程序入口
     │  ├─pages
     │  │      MainEntry.ets                   // 入口页面
     │  └─widget/pages
     │         WidgetCard.ets                  // 卡片页面
     └─resources

2. 关键代码解读(待补充)

  • 待补充

3. 模板集成

本模板提供了两种代码集成方式,供开发者自由使用。

1)整体集成

开发者可以选择直接基于模板工程开发自己的应用工程。

  • 模板代码获取:

  • 打开模板工程,根据README说明中的快速入门章节,将自己的应用信息配置在模板工程内,即可运行并查看模板效果。 整体集成

  • 对接开发者自己的服务器接口,转换数据结构,展示真实的云侧数据。

    • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。 替换接口
    • 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。 数据结构转换
  • 根据自己的业务内容修改模板,进行定制化开发。

2)按需集成

若开发者已搭建好自己的应用工程,但暂未实现其中的部分场景能力,可以选择取用其中的业务组件,集成在自己的工程中。


更多关于HarmonyOS鸿蒙NEXT开发案例:新闻资讯类行业官方模板介绍 (Part1:新闻资讯元服务模板)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HarmonyOS NEXT新闻资讯元服务模板

HarmonyOS NEXT新闻资讯元服务模板是基于ArkTS开发的轻量化服务框架,提供新闻类应用快速开发能力。该模板包含首页、详情页、分类页等核心界面,采用声明式UI开发范式实现动态布局。数据层使用@ohos.data.preferences进行本地存储管理,支持异步数据加载和缓存机制。模板集成HarmonyOS分布式能力,可实现跨设备新闻内容流转。UI组件采用标准HarmonyOS Design规范,包含新闻卡片、轮播图等预制组件。性能优化方面采用懒加载和虚拟列表技术确保流畅体验。

更多关于HarmonyOS鸿蒙NEXT开发案例:新闻资讯类行业官方模板介绍 (Part1:新闻资讯元服务模板)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个新闻资讯元服务模板展示了HarmonyOS Next在新闻类应用开发中的典型架构和实现方式。模板采用分层模块化设计,主要特点包括:

  1. 架构设计上分为产品定制层、基础特性层和公共能力层,支持灵活部署和组件化开发。公共能力层被打包为HAR包供上层引用,包含日志、网络请求等基础能力。

  2. 功能模块划分清晰,包含首页、视频和个人中心三大模块,每个模块都有对应的ViewModel层实现业务逻辑。

  3. 工程结构组织合理,commons目录存放公共库,features目录实现具体业务功能,entry是应用入口。

  4. 模板已集成华为账号服务,开发者只需少量配置即可实现登录功能。

  5. 提供两种集成方式:整体集成适合全新项目开发;按需集成允许开发者只使用需要的业务组件。

这个模板充分体现了HarmonyOS Next的声明式UI开发范式和组件化思想,开发者可以基于此快速构建新闻类应用。

回到顶部