鸿蒙生态为开发者提供海量的HarmonyOS模板/组件,助力开发效率原地起飞
一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板
HarmonyOS官方模板优秀案例第1期-便捷生活行业收到大家点赞
第2期-新闻行业小编加急上新啦!
本期案例内容更丰富,增加“预加载”、“AI朗读”等行业创新特性介绍
覆盖20+行业,点击查看往期案例汇总贴,持续更新,点击收藏!一键三连!常看常新!
【第2期】新闻行业 · 综合新闻
一、 概述
1. 行业洞察
1) 行业诉求:
· 新闻类应用中,核心关键是内容产出及内容分发效率,当前行业主要痛点是如何提升接收内容效率以及广告分发效率;
· 跨端场景使用是新闻类应用的重要场景诉求,尤其是PC、PAD、及车机端等全场景的使用及流转分发;
· 如何借助新技术实现精准内容分发,做到精准生产、精准传播、精准服务,是新闻类应用开发者在思考的问题;
· 新闻类应用需要为用户带来,自主可控、坚持贴近群众服务群众、易用、流畅、即时的应用使用体验。
2) 行业常用三方SDK

说明:“以上三方库及链接仅为示例,三方库由三方开发者独立提供,以其官方内容为准”
2. 优秀案例概览(下载模板)
综合新闻行业模板是基于以上行业分析实现的参考,为综合新闻类应用提供了常用功能的开发样例,涵盖新闻分类、列表、详情,精选视频,互动评论,内容分享等多个实用场景。
· Stage开发模型 + 声明式UI开发范式
· 分层架构设计 + 组件化拆分,支持开发者在开发时既可以选择完整使用模板,也可以根据需求单独选用其中的业务组件。
· 集成华为账号、分享、扫码等一方服务和微信登录等三方SDK,开发者仅需做少量配置和定制即可快速体验相关能力。
· 集成预加载、推送服务、广告服务、AI朗读等创新特性,构建更丰富更全面的模板体验。

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

二、 应用架构设计
1. 分层模块化设计
· 产品定制层:专注于满足不同设备或使用场景的个性化需求,作为应用的入口,是用户直接互动的界面。
本实践暂时只支持直板机,为单HAP包形式,包含路由根节点、底部导航栏等。
· 基础特性层:用于存放相对独立的功能UI和业务逻辑实现。
本实践的基础特性层将应用功能拆分成6个相对独立的业务功能模块。
每个功能模块都具备高内聚、低耦合、可定制的特点,支持产品的灵活部署。
· 公共能力层:存放公共能力,包括公共UI组件、数据管理、外部交互和工具库等共享功能。
本实践的公共能力层分为公共基础能力和行业组件,均打包为HAR包被基础特性层的业务模块引用。
公共基础能力包含账号管理、动态布局等工具,公共类型定义,网络库,以及弹窗、加载等公共组件。
行业组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块,支持开发者在开发中单独集成使用,详见业务组件设计章节。

本模板整体工程分包及介绍如下所示:
· 详细工程结构可见工程结构章节。

2. 业务组件设计
为支持开发者单独获取特定场景的页面和功能,本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块,不依赖公共基础能力包,开发者可以单独集成,开箱即用,降低使用难度。
例如开发者已搭建了一个自己的新闻工程,只想单独取用本模板中的广告功能,可根据本模板中module_advertisement模块的README文件中的快速入门步骤,将该模块单独集成在自己的工程中。

三、 行业场景技术方案
1. 账号管理
1) 场景说明
支持华为账号一键登录及其他方式(账号密码登录、微信登录)。
用户登录后展示昵称和头像,点击用户信息栏可进入用户主页,查看并编辑个人信息和历史动态。

2) 技术方案
· 华为账号一键登录
通过Account Kit实现华为账号一键登录,并获取用户手机号,关联应用已有用户。
· 微信登录
根据鸿蒙接入指南接入微信SDK,可通过跳转微信并获取微信用户授权进行登录。
· 头像修改
通过Scenario Fusion Kit提供的选择头像Button快速拉起头像选择页面,供用户完成华为账号头像或其他头像的选择与展示。
3) 代码参考
· 部分核心代码参见账号管理实现章节。
2. 内容分享
1) 场景说明
· 用户可在首页-新闻详情,视频,互动等多个页面点击分享按钮,拉起分享面板。
· 用户可通过以下方式实现内容分享。
点击微信、朋友圈、QQ按钮拉起对应应用进行分享操作;
点击生成海报按钮将对应内容生成为携带二维码的海报,分享给上述应用或保存在本地;
点击复制链接将url存入剪切板;
点击系统分享拉起系统分享,支持华为分享,传入小艺智能空间等多种分享方式。

2) 技术方案
· 微信分享
根据微信鸿蒙SDK接入指南接入微信SDK后,可通过分享功能开发手册调用指定API拉起微信并实现内容分享。
根据QQ鸿蒙SDK接入指南接入QQ SDK后,可通过调用分享接口拉起QQ并实现内容分享。
· 生成二维码海报并保存
通过系统组件QRCode将分享内容转换为字符串并写入,直接生成对应二维码。
通过弹窗授权保存媒体库资源的方式获取用户授权,并将海报存入相册,无需申请相册管理模块权限
ohos.permission.WRITE_IMAGEVIDEO。
· 复制链接
通过Basic Services Kit中的pasteboard进行内容复制。
· 系统分享
通过Share Kit接入系统分享面板并发起分享。
3) 代码参考
部分核心代码参见内容分享实现章节。
3. 扫码识别
1) 场景说明
用户可通过首页右上角的扫码按钮拉起扫码界面,通过摄像头或相册图片完成扫码操作。
应用识别出有效二维码信息可跳转并访问对应内容。

2) 技术方案
· 使用Scan Kit提供的默认界面扫码能力,可实现系统级体验一致的扫码界面以及相册扫码入口。
· 开发者也可以通过自定义界面扫码实现更定制化的界面样式和功能。
3) 代码参考
· 部分核心代码参见扫码识别实现章节。
4. 视频播放
1) 场景说明
支持竖屏、全屏、长按倍速视频播放,支持当前视频播放完毕后自动续播下一个。
支持用户上下滑动查看上一个或下一个视频。

2) 技术方案
· 使用Swiper组件+LazyForEach懒加载实现上下滑动视频翻页的效果,并最大限度的降低应用内存占用,提升滑动帧率。
· 使用AVPlayer进行视频播放,实现播放事件的监听,及全屏、倍速等播放形式的设置。
· 使用gesture手势响应实现长按倍速等手势事件
3) 代码参考
· 部分核心代码参见视频播放实现章节。
5. 应用设置
1) 场景说明
支持应用通用设置。
隐私设置:支持打开或关闭个性化推荐,关闭后首页顶部导航栏不展示推荐栏。
通知开关:支持打开或关闭推送通知,关闭后不接收云端推送消息。
播放与网络设置:支持修改非WLAN网络下的图片和视频播放设置,支持修改视频完播操作和自动播放设置。
清理缓存:支持一键清理应用内缓存。
夜间模式:支持手动开启或关闭应用内夜间模式。
字体大小:支持手动调节应用内字体大小。
检测版本:检测当前安装的应用版本是否为最新的应用市场在架版本。

2) 技术方案
· 播放与网络设置
使用Network Kit管理网络连接,获取并监控设备的网络状态,进行全局存储。
在图片展示或视频播放页面获取网络状态变量,在流量状态下进行提示或省流处理。
· 清理缓存
通过Core File Kit查询应用缓存大小并展示。
使用基础文件操作接口获取缓存目录后遍历目录内的文件并删除。
· 夜间模式和字体大小
通过Ability Kit中环境变量的查询与设置实现应用深浅色模式和字体大小的切换。
· 检测版本
通过AppGallery Kit主动检查应用是否存在新版本,实现版本检测、显示更新提醒功能。
3) 代码参考
· 部分核心代码参见应用设置实现章节。

四、 行业场景创新特性
1. 预加载
在应用启动前或初始化阶段,为避免出现首页内容加载慢、白屏等情况,可以通过接入预加载提升应用首开速度,提升用户体验。
本模板使用将首页推荐的新闻资源,在安装应用时通过预加载提前缓存到本地。用户首次访问应用时,直接从缓存中获取数据。减少了从服务器重新下载资源的时间,大大提升了应用首开速度。
同时集成了H5预加载组件FastWeb,对【我的-消息】中的私信对话H5界面进行预渲染、预编译,有效提升应用内H5的加载性能。
部分核心代码参见预加载实现章节。

2. 广告
为实现流量变现,应用可以通过接入Ads Kit的流量变现服务实现横幅广告、开屏广告、贴片广告等多种形式的广告服务,向用户提供个性化的营销活动或商业广告。
本模板构建了开屏广告和原生广告,多样化呈现广告信息。
部分核心代码参见广告实现章节。

3. 内容推送
应用可以通过接入Push Kit实现从云端到终端的消息推送通道,向应用实时推送消息,提升用户的感知度和活跃度。
本模板集成推送通知消息能力,向用户推送指定新闻内容,可在终端设备的通知中心、锁屏、横幅等展示,用户点击后拉起应用。
部分核心代码参见内容推送实现章节。

4. AI朗读
用户在接收新闻资讯时,除了常规的文本浏览,还可以通过AI朗读来获取信息。
本模板通过接入Speech Kit的朗读控件,提供了一键播放新闻朗读,并实现朗读内容滚动展示的功能,在用户不方便查看屏幕文字或想通过音频收听内容的时候获取新闻信息。
部分核心代码参见AI朗读实现章节。

五、 模板代码
1. 工程结构(下载模板)
详细代码结构如下所示:





2. 关键代码解读
本篇代码非应用的全量代码,只包括应用的部分能力的关键代码。
若需获取全量代码,请查看模板集成章节。
1) 账号管理实现
· 华为账号一键登录


· 微信登录

2) 内容分享实现
· 微信分享

· QQ分享


· 系统分享

3) 扫码识别实现
· 二维码信息识别

4) 视频播放实现
· 视频跟手上下滑动效果实现


5) 应用设置实现
· 清理缓存


· 检测版本

6) 预加载实现
· 推荐新闻列表云函数

· 端侧集成安装预加载

7) 广告实现
· 请求广告


8) 内容推送实现
· 获取云端推送

9) AI朗读实现
· 朗读控件



3. 模板集成
本模板提供了两种代码集成方式,供开发者自由选用。
1) 整体集成(下载模板)
开发者可以选择直接基于模板工程开发自己的应用工程。
· 模板代码获取:
通过IDE插件创建模板工程,开发指导。
通过生态市场下载源码, 下载模板。
通过开源仓访问源码,仓库地址。
· 打开模板工程,根据README说明中的快速入门章节,将自己的应用信息配置在模板工程内,即可运行并查看模板效果。

· 对接开发者自己的服务器接口,转换数据结构,展示真实的云侧数据。
ComprehensiveNews/commons/lib_news_api/src/main/ets/services文件中的接口当前为本地mock数据,开发者可根据业务需要替换为真实的服务器接口,并进行云侧数据结构与端侧数据结构的对接转换。

根据自己的业务内容修改模板,进行定制化开发。
2) 按需集成
若开发者已搭建好自己的应用工程,但暂未实现其中的部分场景能力,可以选择取用其中的业务组件,集成在自己的工程中。
· 组件代码获取:
通过IDE插件下载组件源码。开发指导
通过生态市场下载组件源码。 下载地址
· 下载组件源码,根据README中的说明,将组件包配置在自己的工程中。

· 根据API参考和示例代码,将组件集成在自己的对应场景中。
以上是第二期“新闻行业-综合新闻”行业优秀案例的内容,更多行业敬请期待~
欢迎下载使用行业模板“点击下载”,若您有体验和开发问题,或者迫不及待想了解XX行业的优秀案例,欢迎在评论区留言,小编会快马加鞭为您解答~
HarmonyOS官方模板优秀案例系列持续更新, 点击查看往期案例汇总贴, 点击收藏 “♥
”方便查找!【互动有礼】邀请你成为HarmonyOS官方模板产品经理,优化方案由你制定!点击参加
HarmonyOS组件模板相关推荐:鸿蒙应用开发者激励计划2025,点击查看