首頁>商情資訊>行業(yè)新聞

HarmonyOS官方模板優(yōu)秀案例（第2期：新聞行業(yè) · 綜合新聞）

2025-9-10 14:36:00

鴻蒙生態(tài)為開發(fā)者提供海量的HarmonyOS模板/組件，助力開發(fā)效率原地起飛一鍵直達(dá)生態(tài)市場組件&模板市場 , 快速應(yīng)用DevEco Studio插件市場集成組件&模板

鴻蒙生態(tài)為開發(fā)者提供海量的HarmonyOS模板/組件，助力開發(fā)效率原地起飛

一鍵直達(dá)生態(tài)市場組件&模板市場 , 快速應(yīng)用DevEco Studio插件市場集成組件&模板

HarmonyOS官方模板優(yōu)秀案例第1期-便捷生活行業(yè)收到大家點贊

第2期-新聞行業(yè)小編加急上新啦！

本期案例內(nèi)容更豐富，增加“預(yù)加載”、“AI朗讀”等行業(yè)創(chuàng)新特性介紹

覆蓋20+行業(yè)，點擊查看往期案例匯總貼，持續(xù)更新，點擊收藏！一鍵三連！常看常新！

【第2期】新聞行業(yè) · 綜合新聞

一、概述

1. 行業(yè)洞察

1) 行業(yè)訴求：

· 新聞類應(yīng)用中，核心關(guān)鍵是內(nèi)容產(chǎn)出及內(nèi)容分發(fā)效率，當(dāng)前行業(yè)主要痛點是如何提升接收內(nèi)容效率以及廣告分發(fā)效率；

· 跨端場景使用是新聞類應(yīng)用的重要場景訴求，尤其是PC、PAD、及車機(jī)端等全場景的使用及流轉(zhuǎn)分發(fā)；

· 如何借助新技術(shù)實現(xiàn)精準(zhǔn)內(nèi)容分發(fā)，做到精準(zhǔn)生產(chǎn)、精準(zhǔn)傳播、精準(zhǔn)服務(wù)，是新聞類應(yīng)用開發(fā)者在思考的問題；

· 新聞類應(yīng)用需要為用戶帶來，自主可控、堅持貼近群眾服務(wù)群眾、易用、流暢、即時的應(yīng)用使用體驗。

2) 行業(yè)常用三方SDK

說明：“以上三方庫及鏈接僅為示例，三方庫由三方開發(fā)者獨立提供，以其官方內(nèi)容為準(zhǔn)”

2. 優(yōu)秀案例概覽（下載模板）

綜合新聞行業(yè)模板是基于以上行業(yè)分析實現(xiàn)的參考，為綜合新聞類應(yīng)用提供了常用功能的開發(fā)樣例，涵蓋新聞分類、列表、詳情，精選視頻，互動評論，內(nèi)容分享等多個實用場景。

· Stage開發(fā)模型 + 聲明式UI開發(fā)范式

· 分層架構(gòu)設(shè)計 + 組件化拆分，支持開發(fā)者在開發(fā)時既可以選擇完整使用模板，也可以根據(jù)需求單獨選用其中的業(yè)務(wù)組件。

· 集成華為賬號、分享、掃碼等一方服務(wù)和微信登錄等三方SDK，開發(fā)者僅需做少量配置和定制即可快速體驗相關(guān)能力。

· 集成預(yù)加載、推送服務(wù)、廣告服務(wù)、AI朗讀等創(chuàng)新特性，構(gòu)建更豐富更全面的模板體驗。

本模板主要頁面及核心功能如下所示：

二、應(yīng)用架構(gòu)設(shè)計

1. 分層模塊化設(shè)計

· 產(chǎn)品定制層：專注于滿足不同設(shè)備或使用場景的個性化需求，作為應(yīng)用的入口，是用戶直接互動的界面。

本實踐暫時只支持直板機(jī)，為單HAP包形式，包含路由根節(jié)點、底部導(dǎo)航欄等。

· 基礎(chǔ)特性層：用于存放相對獨立的功能UI和業(yè)務(wù)邏輯實現(xiàn)。

本實踐的基礎(chǔ)特性層將應(yīng)用功能拆分成6個相對獨立的業(yè)務(wù)功能模塊。

每個功能模塊都具備高內(nèi)聚、低耦合、可定制的特點，支持產(chǎn)品的靈活部署。

· 公共能力層：存放公共能力，包括公共UI組件、數(shù)據(jù)管理、外部交互和工具庫等共享功能。

本實踐的公共能力層分為公共基礎(chǔ)能力和行業(yè)組件，均打包為HAR包被基礎(chǔ)特性層的業(yè)務(wù)模塊引用。

公共基礎(chǔ)能力包含賬號管理、動態(tài)布局等工具，公共類型定義，網(wǎng)絡(luò)庫，以及彈窗、加載等公共組件。

行業(yè)組件將包含行業(yè)特點、可完全自閉環(huán)的能力抽出獨立的組件模塊，支持開發(fā)者在開發(fā)中單獨集成使用，詳見業(yè)務(wù)組件設(shè)計章節(jié)。

本模板整體工程分包及介紹如下所示：

· 詳細(xì)工程結(jié)構(gòu)可見工程結(jié)構(gòu)章節(jié)。

2. 業(yè)務(wù)組件設(shè)計

為支持開發(fā)者單獨獲取特定場景的頁面和功能，本模板將功能完全自閉環(huán)的部分能力抽離出獨立的行業(yè)組件模塊，不依賴公共基礎(chǔ)能力包，開發(fā)者可以單獨集成，開箱即用，降低使用難度。

例如開發(fā)者已搭建了一個自己的新聞工程，只想單獨取用本模板中的廣告功能，可根據(jù)本模板中module_advertisement模塊的README文件中的快速入門步驟，將該模塊單獨集成在自己的工程中。

三、行業(yè)場景技術(shù)方案

1. 賬號管理

1) 場景說明

支持華為賬號一鍵登錄及其他方式（賬號密碼登錄、微信登錄）。

用戶登錄后展示昵稱和頭像，點擊用戶信息欄可進(jìn)入用戶主頁，查看并編輯個人信息和歷史動態(tài)。

2) 技術(shù)方案

· 華為賬號一鍵登錄

通過Account Kit實現(xiàn)華為賬號一鍵登錄，并獲取用戶手機(jī)號，關(guān)聯(lián)應(yīng)用已有用戶。

· 微信登錄

根據(jù)鴻蒙接入指南接入微信SDK，可通過跳轉(zhuǎn)微信并獲取微信用戶授權(quán)進(jìn)行登錄。

· 頭像修改

通過Scenario Fusion Kit提供的選擇頭像Button快速拉起頭像選擇頁面，供用戶完成華為賬號頭像或其他頭像的選擇與展示。

3) 代碼參考

· 部分核心代碼參見賬號管理實現(xiàn)章節(jié)。

2. 內(nèi)容分享

1) 場景說明

· 用戶可在首頁-新聞詳情，視頻，互動等多個頁面點擊分享按鈕，拉起分享面板。

· 用戶可通過以下方式實現(xiàn)內(nèi)容分享。

點擊微信、朋友圈、QQ按鈕拉起對應(yīng)應(yīng)用進(jìn)行分享操作；

點擊生成海報按鈕將對應(yīng)內(nèi)容生成為攜帶二維碼的海報，分享給上述應(yīng)用或保存在本地；

點擊復(fù)制鏈接將url存入剪切板；

點擊系統(tǒng)分享拉起系統(tǒng)分享，支持華為分享，傳入小藝智能空間等多種分享方式。

2) 技術(shù)方案

· 微信分享

根據(jù)微信鴻蒙SDK接入指南接入微信SDK后，可通過分享功能開發(fā)手冊調(diào)用指定API拉起微信并實現(xiàn)內(nèi)容分享。

根據(jù)QQ鴻蒙SDK接入指南接入QQ SDK后，可通過調(diào)用分享接口拉起QQ并實現(xiàn)內(nèi)容分享。

· 生成二維碼海報并保存

通過系統(tǒng)組件QRCode將分享內(nèi)容轉(zhuǎn)換為字符串并寫入，直接生成對應(yīng)二維碼。

通過彈窗授權(quán)保存媒體庫資源的方式獲取用戶授權(quán)，并將海報存入相冊，無需申請相冊管理模塊權(quán)限
ohos.permission.WRITE_IMAGEVIDEO。

· 復(fù)制鏈接

通過Basic Services Kit中的pasteboard進(jìn)行內(nèi)容復(fù)制。

· 系統(tǒng)分享

通過Share Kit接入系統(tǒng)分享面板并發(fā)起分享。

3) 代碼參考

部分核心代碼參見內(nèi)容分享實現(xiàn)章節(jié)。

3. 掃碼識別

1) 場景說明

用戶可通過首頁右上角的掃碼按鈕拉起掃碼界面，通過攝像頭或相冊圖片完成掃碼操作。

應(yīng)用識別出有效二維碼信息可跳轉(zhuǎn)并訪問對應(yīng)內(nèi)容。

2) 技術(shù)方案

· 使用Scan Kit提供的默認(rèn)界面掃碼能力，可實現(xiàn)系統(tǒng)級體驗一致的掃碼界面以及相冊掃碼入口。

· 開發(fā)者也可以通過自定義界面掃碼實現(xiàn)更定制化的界面樣式和功能。

3) 代碼參考

· 部分核心代碼參見掃碼識別實現(xiàn)章節(jié)。

4. 視頻播放

1) 場景說明

支持豎屏、全屏、長按倍速視頻播放，支持當(dāng)前視頻播放完畢后自動續(xù)播下一個。

支持用戶上下滑動查看上一個或下一個視頻。

2) 技術(shù)方案

· 使用Swiper組件+LazyForEach懶加載實現(xiàn)上下滑動視頻翻頁的效果，并最大限度的降低應(yīng)用內(nèi)存占用，提升滑動幀率。

· 使用AVPlayer進(jìn)行視頻播放，實現(xiàn)播放事件的監(jiān)聽，及全屏、倍速等播放形式的設(shè)置。

· 使用gesture手勢響應(yīng)實現(xiàn)長按倍速等手勢事件

3) 代碼參考

· 部分核心代碼參見視頻播放實現(xiàn)章節(jié)。

5. 應(yīng)用設(shè)置

1) 場景說明

支持應(yīng)用通用設(shè)置。

隱私設(shè)置：支持打開或關(guān)閉個性化推薦，關(guān)閉后首頁頂部導(dǎo)航欄不展示推薦欄。

通知開關(guān)：支持打開或關(guān)閉推送通知，關(guān)閉后不接收云端推送消息。

播放與網(wǎng)絡(luò)設(shè)置：支持修改非WLAN網(wǎng)絡(luò)下的圖片和視頻播放設(shè)置，支持修改視頻完播操作和自動播放設(shè)置。

清理緩存：支持一鍵清理應(yīng)用內(nèi)緩存。

夜間模式：支持手動開啟或關(guān)閉應(yīng)用內(nèi)夜間模式。

字體大?。褐С质謩诱{(diào)節(jié)應(yīng)用內(nèi)字體大小。

檢測版本：檢測當(dāng)前安裝的應(yīng)用版本是否為最新的應(yīng)用市場在架版本。

2) 技術(shù)方案

· 播放與網(wǎng)絡(luò)設(shè)置

使用Network Kit管理網(wǎng)絡(luò)連接，獲取并監(jiān)控設(shè)備的網(wǎng)絡(luò)狀態(tài)，進(jìn)行全局存儲。

在圖片展示或視頻播放頁面獲取網(wǎng)絡(luò)狀態(tài)變量，在流量狀態(tài)下進(jìn)行提示或省流處理。

· 清理緩存

通過Core File Kit查詢應(yīng)用緩存大小并展示。

使用基礎(chǔ)文件操作接口獲取緩存目錄后遍歷目錄內(nèi)的文件并刪除。

通過Ability Kit中環(huán)境變量的查詢與設(shè)置實現(xiàn)應(yīng)用深淺色模式和字體大小的切換。

· 檢測版本

通過AppGallery Kit主動檢查應(yīng)用是否存在新版本，實現(xiàn)版本檢測、顯示更新提醒功能。

3) 代碼參考

· 部分核心代碼參見應(yīng)用設(shè)置實現(xiàn)章節(jié)。

四、行業(yè)場景創(chuàng)新特性

1. 預(yù)加載

在應(yīng)用啟動前或初始化階段，為避免出現(xiàn)首頁內(nèi)容加載慢、白屏等情況，可以通過接入預(yù)加載提升應(yīng)用首開速度，提升用戶體驗。

本模板使用將首頁推薦的新聞資源，在安裝應(yīng)用時通過預(yù)加載提前緩存到本地。用戶首次訪問應(yīng)用時，直接從緩存中獲取數(shù)據(jù)。減少了從服務(wù)器重新下載資源的時間，大大提升了應(yīng)用首開速度。

同時集成了H5預(yù)加載組件FastWeb，對【我的-消息】中的私信對話H5界面進(jìn)行預(yù)渲染、預(yù)編譯，有效提升應(yīng)用內(nèi)H5的加載性能。

部分核心代碼參見預(yù)加載實現(xiàn)章節(jié)。

2. 廣告

為實現(xiàn)流量變現(xiàn)，應(yīng)用可以通過接入Ads Kit的流量變現(xiàn)服務(wù)實現(xiàn)橫幅廣告、開屏廣告、貼片廣告等多種形式的廣告服務(wù)，向用戶提供個性化的營銷活動或商業(yè)廣告。

本模板構(gòu)建了開屏廣告和原生廣告，多樣化呈現(xiàn)廣告信息。

部分核心代碼參見廣告實現(xiàn)章節(jié)。

3. 內(nèi)容推送

應(yīng)用可以通過接入Push Kit實現(xiàn)從云端到終端的消息推送通道，向應(yīng)用實時推送消息，提升用戶的感知度和活躍度。

本模板集成推送通知消息能力，向用戶推送指定新聞內(nèi)容，可在終端設(shè)備的通知中心、鎖屏、橫幅等展示，用戶點擊后拉起應(yīng)用。

部分核心代碼參見內(nèi)容推送實現(xiàn)章節(jié)。

4. AI朗讀

用戶在接收新聞資訊時，除了常規(guī)的文本瀏覽，還可以通過AI朗讀來獲取信息。

本模板通過接入Speech Kit的朗讀控件，提供了一鍵播放新聞朗讀，并實現(xiàn)朗讀內(nèi)容滾動展示的功能，在用戶不方便查看屏幕文字或想通過音頻收聽內(nèi)容的時候獲取新聞信息。

部分核心代碼參見AI朗讀實現(xiàn)章節(jié)。

五、模板代碼

1. 工程結(jié)構(gòu)（下載模板）

詳細(xì)代碼結(jié)構(gòu)如下所示：

2. 關(guān)鍵代碼解讀

本篇代碼非應(yīng)用的全量代碼，只包括應(yīng)用的部分能力的關(guān)鍵代碼。

若需獲取全量代碼，請查看模板集成章節(jié)。

1) 賬號管理實現(xiàn)

· 華為賬號一鍵登錄

· 微信登錄

2) 內(nèi)容分享實現(xiàn)

· 微信分享

· QQ分享

· 系統(tǒng)分享

3) 掃碼識別實現(xiàn)

· 二維碼信息識別

4) 視頻播放實現(xiàn)

· 視頻跟手上下滑動效果實現(xiàn)

5) 應(yīng)用設(shè)置實現(xiàn)

· 清理緩存

· 檢測版本

6) 預(yù)加載實現(xiàn)

· 推薦新聞列表云函數(shù)

· 端側(cè)集成安裝預(yù)加載

7) 廣告實現(xiàn)

· 請求廣告

8) 內(nèi)容推送實現(xiàn)

· 獲取云端推送

9) AI朗讀實現(xiàn)

· 朗讀控件

3. 模板集成

本模板提供了兩種代碼集成方式，供開發(fā)者自由選用。

1) 整體集成（下載模板）

開發(fā)者可以選擇直接基于模板工程開發(fā)自己的應(yīng)用工程。

· 模板代碼獲?。?/p>

通過IDE插件創(chuàng)建模板工程，開發(fā)指導(dǎo)。

通過生態(tài)市場下載源碼，下載模板。

通過開源倉訪問源碼，倉庫地址。

· 打開模板工程，根據(jù)README說明中的快速入門章節(jié)，將自己的應(yīng)用信息配置在模板工程內(nèi)，即可運(yùn)行并查看模板效果。

· 對接開發(fā)者自己的服務(wù)器接口，轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)，展示真實的云側(cè)數(shù)據(jù)。

ComprehensiveNews/commons/lib_news_api/src/main/ets/services文件中的接口當(dāng)前為本地mock數(shù)據(jù)，開發(fā)者可根據(jù)業(yè)務(wù)需要替換為真實的服務(wù)器接口，并進(jìn)行云側(cè)數(shù)據(jù)結(jié)構(gòu)與端側(cè)數(shù)據(jù)結(jié)構(gòu)的對接轉(zhuǎn)換。