HarmonyOS实战项目：创建一个分布式新闻阅读客户端

news/2025/11/26 8:56:30/文章来源:https://www.cnblogs.com/yangykaifa/p/19270965

概述：分布式新闻客户端的核心价值

分布式新闻阅读客户端是HarmonyOS分布式能力的典型应用场景，它实现了一次开发，多端部署的核心理念。通过本项目，你将掌握如何构建一个能够在手机、平板、智慧屏等设备间无缝切换和同步的新闻阅读应用。

本项目将展示以下关键特性：新闻列表的多设备同步、阅读状态的分布式共享、跨设备新闻内容流转。这些功能基于HarmonyOS的分布式数据管理和分布式任务调度能力实现。

环境配置与项目初始化

开发环境要求

DevEco Studio 4.0 Beta2或更高版本
HarmonyOS 5.0 SDK，API Version 12+
真机设备（需开启开发者模式）或模拟器

创建项目与配置权限

首先创建新项目，选择"Empty Ability"模板。在module.json5中配置必要的分布式权限：

{"module": {"requestPermissions": [{"name": "ohos.permission.DISTRIBUTED_DATASYNC","reason": "$string:distributed_datasync_reason","usedScene": {"ability": [".MainAbility"],"when": "inuse"}},{"name": "ohos.permission.GET_DISTRIBUTED_DEVICE_INFO"}]}
}

项目架构设计

代码结构规划

entry/src/main/ets/
├── common
│   ├── constants
│   └── utils
├── entryability
├── model           # 数据模型
├── pages           # 页面组件
├── view            # 可复用UI组件
├── viewmodel       # 视图模型
└── service         # 服务层

核心技术栈

UI框架: ArkUI声明式开发范式
数据同步: 分布式数据管理
网络请求: @ohos.net.http
设备管理: 设备发现与认证

实现新闻数据模型

定义新闻数据结构，支持分布式同步：

// model/NewsItem.ts
export class NewsItem {id: string = '';title: string = '';summary: string = '';source: string = '';publishTime: string = '';imageUrl: string = '';isRead: boolean = false;deviceId: string = '';  // 最后阅读的设备IDconstructor(data?: any) {if (data) {this.id = data.id || '';this.title = data.title || '';this.summary = data.summary || '';this.source = data.source || '';this.publishTime = data.publishTime || '';this.imageUrl = data.imageUrl || '';}}// 转换为可序列化对象toObject(): any {return {id: this.id,title: this.title,summary: this.summary,source: this.source,publishTime: this.publishTime,imageUrl: this.imageUrl,isRead: this.isRead,deviceId: this.deviceId};}
}

构建新闻列表页面

栅格布局适配多端

使用栅格布局系统实现不同屏幕尺寸的适配：

// pages/NewsListPage.ets
@Entry
@Component
struct NewsListPage {@State isLoading: boolean = true;@StorageLink('newsList') newsList: NewsItem[] = [];build() {Column() {// 标题栏Row() {Text('新闻头条').fontSize(24).fontWeight(FontWeight.Bold)Button('刷新').margin({ left: 20 }).onClick(this.refreshNews)}.padding(16).width('100%')// 新闻列表GridRow({columns: {sm: 4,md: 8,lg: 12},breakpoints: {value: ['320vp', '600vp', '840vp']},gutter: { x: 12 }}) {GridCol({span: { sm: 4, md: 8, lg: 8 },offset: { lg: 2 }}) {this.buildNewsList()}}.layoutWeight(1)}.height('100%').width('100%')}@BuilderbuildNewsList() {if (this.isLoading) {LoadingProgress().width(50).height(50).margin({ top: 100 })} else {List({ space: 10 }) {ForEach(this.newsList, (news: NewsItem) => {ListItem() {NewsCard({ news: news }).onClick(() => this.navigateToDetail(news))}}, (news: NewsItem) => news.id)}.width('100%').layoutWeight(1)}}
}

新闻卡片组件实现

// view/NewsCard.ets
@Component
struct NewsCard {@Prop news: NewsItembuild() {Row() {// 新闻图片if (this.news.imageUrl) {Image(this.news.imageUrl).width(120).height(80).objectFit(ImageFit.Cover).margin({ right: 12 }).borderRadius(8)}// 新闻内容Column() {Text(this.news.title).fontSize(18).fontColor(this.news.isRead ? '#666666' : '#000000').maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).margin({ bottom: 8 })Row() {Text(this.news.source).fontSize(12).fontColor('#888888')Text(this.news.publishTime).fontSize(12).fontColor('#888888').margin({ left: 10 })}.width('100%').justifyContent(FlexAlign.Start)}.layoutWeight(1)}.padding(12).borderRadius(8).backgroundColor(this.news.isRead ? '#F5F5F5' : '#FFFFFF').shadow({ radius: 2, color: '#10000000', offsetX: 0, offsetY: 1 }).width('100%').height(104)}
}

实现分布式数据同步

分布式数据管理服务

// service/NewsSyncService.ts
import distributedData from '@ohos.data.distributedData';
import deviceInfo from '@ohos.deviceInfo';
const STORE_ID = 'news_data_store';
const NEWS_KEY = 'synced_news_list';
export class NewsSyncService {private kvManager: distributedData.KVManager;private kvStore: distributedData.SingleKVStore;private deviceId: string = deviceInfo.deviceId;// 初始化分布式数据存储async init(): Promise {try {const config = {bundleName: 'com.example.newsapp',userInfo: {userId: 'defaultUser',userType: distributedData.UserType.SAME_USER_ID}};this.kvManager = distributedData.createKVManager(config);const options = {createIfMissing: true,encrypt: false,backup: false,autoSync: true,kvStoreType: distributedData.KVStoreType.SINGLE_VERSION};this.kvStore = await this.kvManager.getKVStore(STORE_ID, options);// 订阅数据变更this.kvStore.on('dataChange', distributedData.SubscribeType.SUBSCRIBE_TYPE_ALL,(data) => this.handleDataChange(data));} catch (error) {console.error('初始化分布式数据存储失败:', error);}}// 处理数据变更private handleDataChange(data: distributedData.ChangeNotification): void {if (data.insertEntries.length > 0 && data.insertEntries[0].key === NEWS_KEY) {try {const newsData = JSON.parse(data.insertEntries[0].value.value);AppStorage.setOrCreate('newsList', newsData);} catch (error) {console.error('解析同步数据失败:', error);}}}// 同步新闻列表到所有设备async syncNewsList(newsList: NewsItem[]): Promise {if (!this.kvStore) {await this.init();}try {const serializableList = newsList.map(item => item.toObject());await this.kvStore.put(NEWS_KEY, JSON.stringify(serializableList));} catch (error) {console.error('同步新闻列表失败:', error);}}// 更新单条新闻的阅读状态async updateNewsReadStatus(newsId: string, isRead: boolean): Promise {try {const currentListStr = await this.kvStore.get(NEWS_KEY);const currentList: NewsItem[] = currentListStr ?JSON.parse(currentListStr).map((item: any) => new NewsItem(item)) : [];const updatedList = currentList.map(item => {if (item.id === newsId) {const updated = new NewsItem(item);updated.isRead = isRead;updated.deviceId = this.deviceId;return updated;}return item;});await this.syncNewsList(updatedList);} catch (error) {console.error('更新阅读状态失败:', error);}}
}

新闻详情页实现

详情页布局与数据传递

// pages/NewsDetailPage.ets
@Entry
@Component
struct NewsDetailPage {@State currentNews: NewsItem = new NewsItem();private syncService: NewsSyncService = new NewsSyncService();onPageShow(params: any): void {if (params?.newsId) {const allNews: NewsItem[] = AppStorage.get('newsList') || [];this.currentNews = allNews.find(news => news.id === params.newsId) || new NewsItem();// 标记为已读并同步this.syncService.updateNewsReadStatus(params.newsId, true);}}build() {Column() {// 顶部导航栏this.buildHeader()// 新闻内容Scroll() {Column() {Text(this.currentNews.title).fontSize(22).fontWeight(FontWeight.Bold).margin({ bottom: 16 }).width('100%')Row() {Text(this.currentNews.source).fontSize(14).fontColor('#888888')Text(this.currentNews.publishTime).fontSize(14).fontColor('#888888').margin({ left: 10 })}.width('100%').margin({ bottom: 20 })if (this.currentNews.imageUrl) {Image(this.currentNews.imageUrl).width('100%').height(200).objectFit(ImageFit.Cover).margin({ bottom: 20 }).borderRadius(8)}Text(this.currentNews.summary).fontSize(16).lineHeight(24).width('100%')}.padding(16)}.layoutWeight(1)// 底部操作栏this.buildFooter()}.height('100%').width('100%')}@BuilderbuildFooter() {Column() {Divider().color('#E5E5E5').width('100%')GridRow({columns: { sm: 4, md: 8, lg: 12 },gutter: { x: 12 }}) {GridCol({ span: { lg: 8, offset: { lg: 2 } } }) {Row() {TextInput({ placeholder: '输入评论...' }).layoutWeight(1).margin({ right: 12 })// 分享按钮 - 实现跨设备流转Image($r('app.media.ic_share')).width(24).height(24).onClick(() => this.shareToDevice())}.padding(12)}}}.backgroundColor('#F8F8F8')}
}

实现设备发现与跨设备分享

设备管理功能

// service/DeviceManagerService.ts
import deviceManager from '@ohos.distributedHardware.deviceManager';
export class DeviceManagerService {private deviceMag: deviceManager.DeviceManager;// 获取可信设备列表async getTrustedDevices(): Promise {return new Promise((resolve, reject) => {deviceManager.createDeviceManager('com.example.newsapp', (err, data) => {if (err) {reject(err);return;}this.deviceMag = data;const devices = this.deviceMag.getTrustedDeviceListSync();resolve(devices);});});}// 释放设备管理实例release(): void {if (this.deviceMag) {this.deviceMag.release();}}
}

设备选择弹窗组件

// view/DeviceListDialog.ets
@CustomDialog
@Component
struct DeviceListDialog {@Consume newsItem: NewsItem;@Link deviceList: deviceManager.DeviceInfo[];@State selectedDevices: string[] = [];build() {Column() {Text('选择设备').fontSize(18).fontWeight(FontWeight.Bold).margin({ top: 20, bottom: 16 })List() {ForEach(this.deviceList, (device: deviceManager.DeviceInfo) => {ListItem() {Row() {Text(device.deviceName).fontSize(16).layoutWeight(1)Checkbox().select(this.selectedDevices.includes(device.deviceId)).onChange((isSelected) => {this.toggleDeviceSelection(device.deviceId, isSelected);})}.padding(12)}})}.layoutWeight(1)Row() {Button('取消').layoutWeight(1).onClick(() => this.controller.close())Button('确定').layoutWeight(1).onClick(() => this.confirmSelection())}.padding(16)}.height('60%').width('100%').backgroundColor(Color.White).borderRadius(16)}private toggleDeviceSelection(deviceId: string, selected: boolean): void {if (selected) {this.selectedDevices.push(deviceId);} else {const index = this.selectedDevices.indexOf(deviceId);if (index >= 0) {this.selectedDevices.splice(index, 1);}}}private confirmSelection(): void {// 实现跨设备启动逻辑this.startRemoteAbilities(this.selectedDevices, this.newsItem.id);this.controller.close();}private startRemoteAbilities(deviceIds: string[], newsId: string): void {deviceIds.forEach(deviceId => {const want = {deviceId: deviceId,bundleName: 'com.example.newsapp',abilityName: 'com.example.newsapp.MainAbility',parameters: {url: 'pages/NewsDetailPage',newsId: newsId}};// 启动远程AbilityfeatureAbility.startAbility(want).then(() => {console.info(`成功启动设备 ${deviceId} 上的应用`);}).catch((error) => {console.error(`启动设备 ${deviceId} 上的应用失败:`, error);});});}
}

网络请求服务封装

新闻API服务

// service/NewsService.ts
import http from '@ohos.net.http';
import { NewsItem } from '../model/NewsItem';
const NEWS_API = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY';
export class NewsService {private httpRequest = http.createHttp();// 获取新闻列表async fetchNewsList(): Promise {return new Promise((resolve, reject) => {this.httpRequest.request(NEWS_API,{method: 'GET',header: { 'Content-Type': 'application/json' }},(err, data) => {if (err) {reject(err);return;}if (data.responseCode === 200) {try {const result = JSON.parse(data.result.toString());const newsList = result.articles.map((article: any) =>new NewsItem({id: this.generateId(article.url),title: article.title,summary: article.description,source: article.source?.name,publishTime: article.publishedAt,imageUrl: article.urlToImage}));resolve(newsList);} catch (parseError) {reject(parseError);}} else {reject(new Error(`HTTP ${data.responseCode}`));}});});}private generateId(url: string): string {// 简单的ID生成逻辑return url.hashCode().toString();}
}

多端适配与响应式布局

基于栅格的响应式设计

// common/constants/Breakpoints.ets
export class CommonConstants {// 断点定义static readonly BREAKPOINT_SM: string = 'sm';    // 小屏设备 < 600vpstatic readonly BREAKPOINT_MD: string = 'md';    // 中屏设备 600vp - 840vpstatic readonly BREAKPOINT_LG: string = 'lg';    // 大屏设备 > 840vp// 栅格列数static readonly FOUR_COLUMN: number = 4;static readonly EIGHT_COLUMN: number = 8;static readonly TWELVE_COLUMN: number = 12;// 设备类型阈值static readonly SMALL_DEVICE_TYPE: number = 320;static readonly MIDDLE_DEVICE_TYPE: number = 600;static readonly LARGE_DEVICE_TYPE: number = 840;
}

应用入口与权限处理

MainAbility权限动态申请

// entryability/EntryAbility.ets
import Ability from '@ohos.app.ability.UIAbility';
import permission from '@ohos.abilityAccessCtrl';
export default class EntryAbility extends Ability {onWindowStageCreate(windowStage: any): void {// 动态申请分布式权限this.requestDistributedPermissions();windowStage.loadContent('pages/Index', (err, data) => {if (err) {console.error('加载页面失败:', err);}});}private async requestDistributedPermissions(): Promise {try {const permissions = ['ohos.permission.DISTRIBUTED_DATASYNC','ohos.permission.GET_DISTRIBUTED_DEVICE_INFO'];const atManager = permission.createAtManager();await atManager.requestPermissionsFromUser(this.context, permissions);} catch (error) {console.error('权限申请失败:', error);}}
}