文章的目的为了记录使用Arkts 进行Harmony app 开发学习的经历。本职为嵌入式软件开发，公司安排开发app，临时学习，完成app的开发。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。
相关链接：
开源 Arkts 鸿蒙应用 开发（一）工程文件分析-CSDN博客
开源 Arkts 鸿蒙应用 开发（二）封装库.har制作和应用-CSDN博客
开源 Arkts 鸿蒙应用 开发（三）Arkts的介绍-CSDN博客
开源 Arkts 鸿蒙应用 开发（四）布局和常用控件-CSDN博客
开源 Arkts 鸿蒙应用 开发（五）控件组成和复杂控件-CSDN博客
开源 Arkts 鸿蒙应用 开发（六）数据持久--文件和首选项存储-CSDN博客
开源 Arkts 鸿蒙应用 开发（七）数据持久--sqlite关系数据库-CSDN博客
开源 Arkts 鸿蒙应用 开发（八）多媒体--相册和相机-CSDN博客
开源 Arkts 鸿蒙应用 开发（九）通讯--tcp客户端-CSDN博客
开源 Arkts 鸿蒙应用 开发（十）通讯--Http-CSDN博客
开源 Arkts 鸿蒙应用 开发（十一）证书和包名修改-CSDN博客
开源 Arkts 鸿蒙应用 开发（十二）传感器的使用-CSDN博客
推荐链接：
开源 java android app 开发（一）开发环境的搭建-CSDN博客
开源 java android app 开发（二）工程文件结构-CSDN博客
开源 java android app 开发（三）GUI界面布局和常用组件-CSDN博客
开源 java android app 开发（四）GUI界面重要组件-CSDN博客
开源 java android app 开发（五）文件和数据库存储-CSDN博客
开源 java android app 开发（六）多媒体使用-CSDN博客
开源 java android app 开发（七）通讯之Tcp和Http-CSDN博客
开源 java android app 开发（八）通讯之Mqtt和Ble-CSDN博客
开源 java android app 开发（九）后台之线程和服务-CSDN博客
开源 java android app 开发（十）广播机制-CSDN博客
开源 java android app 开发（十一）调试、发布-CSDN博客
开源 java android app 开发（十二）封库.aar-CSDN博客
推荐链接：
开源C# .net mvc 开发（一）WEB搭建_c#部署web程序-CSDN博客
开源 C# .net mvc 开发（二）网站快速搭建_c#网站开发-CSDN博客
开源 C# .net mvc 开发（三）WEB内外网访问(VS发布、IIS配置网站、花生壳外网穿刺访问)_c# mvc 域名下不可訪問內網,內網下可以訪問域名-CSDN博客
开源 C# .net mvc 开发（四）工程结构、页面提交以及显示_c#工程结构-CSDN博客
开源 Arkts 鸿蒙应用 开发（十）通讯--Http数据传输-CSDN博客开源 C# .net mvc 开发（五）常用代码快速开发_c# mvc开发-CSDN博客
本章内容主HarmonyOS next 系统上的本机音频怎么播放，实现了一个简易的音乐播放器，可以播放App资源文件夹下的3首mp3。
1.代码结构分析
2.文件分析说明
3.显示效果
一、代码结构分析
需要添加和修改的文件如下:
entry/src/main/ets/pages 文件夹下需要有App.ets,Index.et,List.ets。
entry/src/main/resoures/base/profile/main_pages.json 页面配置文件也需要修改
entry/src/main/resoures/rawfile 文件加下需要有3个.mp3文件
二、文件分析说明
2.1 List.ets显示了音乐的列表，选择以后，跳转到Index.ets页面播放相应的音乐
以下为 List.ets代码
import { router } from '@kit.ArkUI';
import storage from './App';
@Entry(storage)
@Component
struct Index {
@LocalStorageLink('myData') myData: string = 'test_01';
// 列表数据 - 字符串数组
private dataList: string[] = [
"test_01",
"test_02",
"test_03",
];
build() {
Column() {
// 列表标题
Text('音乐列表')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.margin({ top: 20, bottom: 10 })
// ListView 实现
List({ space: 10 }) {
ForEach(this.dataList, (item: string) => {
ListItem() {
Text(item)
.fontSize(18)
.width('100%')
.height(60)
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
.borderRadius(8)
}
.onClick(() => {
this.myData = item.toString();
console.log("myData1",this.myData);
// 点击跳转到详情页，传递当前项内容
router.push({
url: 'pages/Index',
});
})
})
}
.width('100%')
.layoutWeight(1) // 占据剩余空间
.margin(10)
.divider({
strokeWidth: 1,
color: '#EEEEEE',
startMargin: 20,
endMargin: 20
})
}
.width('100%')
.height('100%')
.backgroundColor('#F5F5F5')
}
}
2.2 Index.ets 文件，通过AVPlayer可以实现端到端播放原始媒体资源。
1）播放的全流程包含：创建AVPlayer，设置播放资源，设置播放参数（音量/倍速/焦点模式），播放控制（播放/暂停/跳转/停止），重置，销毁资源。
播放状态变化示意图
2）函数分析
AVPlayer封装
使用@ohos.multimedia.media模块的AVPlayer实现媒体播放
提供play()、pause()、seek()、setSpeed()等基本控制方法
通过fdSrc从资源文件加载媒体
状态管理：
监听stateChange事件处理播放器状态（idle/initialized/prepared/playing等）
播放器初始化
async avSetupAudio() {
// 获取资源文件描述符
let fileDescriptor = await this.context.resourceManager.getRawFd(this.fileName);
let avFileDescriptor = { fd: fileDescriptor.fd, offset: fileDescriptor.offset, length: fileDescriptor.length };
// 创建AVPlayer实例
this.avPlayer = await media.createAVPlayer();
// 设置回调
await this.setAVPlayerCallback(...);
// 设置播放源
this.avPlayer.fdSrc = avFileDescriptor;
}状态回调处理
this.avPlayer.on('stateChange', async (state, reason) => {
switch (state) {
case 'initialized':
// 设置Surface并准备播放
this.avPlayer.surfaceId = this.surfaceId;
this.avPlayer.prepare();
break;
case 'prepared':
// 开始播放并设置初始倍速
this.avPlayer.play();
break;
case 'playing':
// 更新UI状态
break;
// 其他状态处理...
}
});3）以下为Index.ets代码
/*
* Copyright (c) 2023-2025 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import display from '@ohos.display';
import emitter from '@ohos.events.emitter';
import { common } from '@kit.AbilityKit';
import media from '@ohos.multimedia.media';
import { router } from '@kit.ArkUI';
import storage from './App';
const PROPORTION = 0.99; // 占屏幕比例
const SURFACE_W = 0.9; // 表面宽比例
const SURFACE_H = 1.78; // 表面高比例
const SET_INTERVAL = 100; // interval间隔时间
const TIME_ONE = 60000;
const TIME_TWO = 1000;
const SPEED_ZERO = 0;
const SPEED_ONE = 1;
const SPEED_TWO = 2;
const SPEED_THREE = 3;
const SPEED_COUNT = 4;
let innerEventFalse: emitter.InnerEvent = {
eventId: 1,
priority: emitter.EventPriority.HIGH
};
let innerEventTrue: emitter.InnerEvent = {
eventId: 2,
priority: emitter.EventPriority.HIGH
};
let innerEventWH: emitter.InnerEvent = {
eventId: 3,
priority: emitter.EventPriority.HIGH
};
@Entry(storage)
@Component
struct Index {
@LocalStorageLink('myData') myData: string = '';
tag: string = 'AVPlayManager';
private xComponentController: XComponentController = new XComponentController();
private avPlayer: media.AVPlayer | null = null;
private surfaceId: string = '';
private intervalID: number = -1;
private seekTime: number = -1;
private context: common.UIAbilityContext | undefined = undefined;
private count: number = 0;
@State fileName: string = 'test_01.mp3';
@State isSwiping: boolean = false; // 用户滑动过程中
@State isPaused: boolean = true; // 暂停播放
@State XComponentFlag: boolean = false;
@State speedSelect: number = 0; // 倍速选择
@State speedList: Resource[] = [$r('app.string.video_speed_1_0X'), $r('app.string.video_speed_1_25X'), $r('app.string.video_speed_1_75X'), $r('app.string.video_speed_2_0X')];
@StorageLink('durationTime') durationTime: number = 0; // 视频总时长
@StorageLink('currentTime') currentTime: number = 0; // 视频当前时间
@StorageLink('speedName') speedName: Resource = $r('app.string.video_speed_1_0X');
@StorageLink('speedIndex') speedIndex: number = 0; // 倍速索引
@State surfaceW: number | null = null;
@State surfaceH: number | null = null;
@State percent: number = 0;
@State windowWidth: number = 300;
@State windowHeight: number = 200;
getDurationTime(): number {
return this.durationTime;
}
getCurrentTime(): number {
return this.currentTime;
}
timeConvert(time: number): string {
let min: number = Math.floor(time / TIME_ONE);
let second: string = ((time % TIME_ONE) / TIME_TWO).toFixed(0);
// return `${min}:${(+second < TIME_THREE ? '0' : '') + second}`;
second = second.padStart(2, '0');
return `${min}:${second}`;
}
async msleepAsync(ms: number): Promise<boolean> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(true)
}, ms)
})
}
async avSetupAudio() {
// 通过UIAbilityContext的resourceManager成员的getRawFd接口获取媒体资源播放地址。
// 返回类型为{fd,offset,length},fd为HAP包fd地址，offset为媒体资源偏移量，length为播放长度。
if (this.context == undefined) return;
let fileDescriptor = await this.context.resourceManager.getRawFd(this.fileName);
let avFileDescriptor: media.AVFileDescriptor =
{ fd: fileDescriptor.fd, offset: fileDescriptor.offset, length: fileDescriptor.length };
if (this.avPlayer) {
console.info(`${this.tag}: init avPlayer release2createNew`);
this.avPlayer.release();
await this.msleepAsync(1500);
}
// 创建avPlayer实例对象
this.avPlayer = await media.createAVPlayer();
// 创建状态机变化回调函数
await this.setAVPlayerCallback((avPlayer: media.AVPlayer) => {
this.percent = avPlayer.width / avPlayer.height;
this.setVideoWH();
this.durationTime = this.getDurationTime();
setInterval(() => { // 更新当前时间
if (!this.isSwiping) {
this.currentTime = this.getCurrentTime();
}
}, SET_INTERVAL);
});
// 为fdSrc赋值触发initialized状态机上报
this.avPlayer.fdSrc = avFileDescriptor;
}
avPlay(): void {
if (this.avPlayer) {
try {
this.avPlayer.play();
} catch (e) {
console.error(`${this.tag}: avPlay = ${JSON.stringify(e)}`);
}
}
}
avPause(): void {
if (this.avPlayer) {
try {
this.avPlayer.pause();
console.info(`${this.tag}: avPause==`);
} catch (e) {
console.error(`${this.tag}: avPause== ${JSON.stringify(e)}`);
}
}
}
async avSeek(seekTime: number, mode: SliderChangeMode): Promise<void> {
if (this.avPlayer) {
try {
console.info(`${this.tag}: videoSeek seekTime== ${seekTime}`);
this.avPlayer.seek(seekTime, 2);
this.currentTime = seekTime;
} catch (e) {
console.error(`${this.tag}: videoSeek== ${JSON.stringify(e)}`);
}
}
}
avSetSpeed(speed: number): void {
if (this.avPlayer) {
try {
this.avPlayer.setSpeed(speed);
console.info(`${this.tag}: avSetSpeed enum ${speed}`);
} catch (e) {
console.error(`${this.tag}: avSetSpeed == ${JSON.stringify(e)}`);
}
}
}
// 注册avplayer回调函数
async setAVPlayerCallback(callback: (avPlayer: media.AVPlayer) => void, vType?: number): Promise<void> {
// seek操作结果回调函数
if (this.avPlayer == null) {
console.error(`${this.tag}: avPlayer has not init!`);
return;
}
this.avPlayer.on('seekDone', (seekDoneTime) => {
console.info(`${this.tag}: setAVPlayerCallback AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
});
this.avPlayer.on('speedDone', (speed) => {
console.info(`${this.tag}: setAVPlayerCallback AVPlayer speedDone, speed is ${speed}`);
});
// error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
this.avPlayer.on('error', (err) => {
console.error(`${this.tag}: setAVPlayerCallback Invoke avPlayer failed ${JSON.stringify(err)}`);
if (this.avPlayer == null) {
console.error(`${this.tag}: avPlayer has not init on error`);
return;
}
this.avPlayer.reset();
});
// 状态机变化回调函数
this.avPlayer.on('stateChange', async (state, reason) => {
if (this.avPlayer == null) {
console.info(`${this.tag}: avPlayer has not init on state change`);
return;
}
switch (state) {
case 'idle': // 成功调用reset接口后触发该状态机上报
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state idle called.`);
break;
case 'initialized': // avplayer 设置播放源后触发该状态上报
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state initialized called.`);
if (this.surfaceId) {
this.avPlayer.surfaceId = this.surfaceId; // 设置显示画面，当播放的资源为纯音频时无需设置
console.info(`${this.tag}: setAVPlayerCallback this.avPlayer.surfaceId = ${this.avPlayer.surfaceId}`);
this.avPlayer.prepare();
}
break;
case 'prepared': // prepare调用成功后上报该状态机
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state prepared called.`);
this.avPlayer.on('bufferingUpdate', (infoType: media.BufferingInfoType, value: number) => {
console.info(`${this.tag}: bufferingUpdate called, infoType value: ${infoType}, value:${value}}`);
})
this.durationTime = this.avPlayer.duration;
this.currentTime = this.avPlayer.currentTime;
this.avPlayer.play(); // 调用播放接口开始播放
console.info(`${this.tag}:
setAVPlayerCallback speedSelect: ${this.speedSelect}, duration: ${this.durationTime}`);
if (this.speedSelect != -1) {
switch (this.speedSelect) {
case SPEED_ZERO:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_00_X);
break;
case SPEED_ONE:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_25_X);
break;
case SPEED_TWO:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_75_X);
break;
case SPEED_THREE:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_2_00_X);
break;
}
}
callback(this.avPlayer);
break;
case 'playing': // play成功调用后触发该状态机上报
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state playing called.`);
if (this.count !== 0) {
if (this.intervalID != -1) {
clearInterval(this.intervalID)
}
this.intervalID = setInterval(() => { // 更新当前时间
AppStorage.setOrCreate('durationTime', this.durationTime);
AppStorage.setOrCreate('currentTime', this.currentTime);
}, 100);
let eventDataTrue: emitter.EventData = {
data: {
'flag': true
}
};
let innerEventTrue: emitter.InnerEvent = {
eventId: 2,
priority: emitter.EventPriority.HIGH
};
emitter.emit(innerEventTrue, eventDataTrue);
} else {
setTimeout(() => {
console.info('AVPlayer playing wait to pause');
this.avPlayer?.pause(); // 播放3s后调用暂停接口暂停播放。
}, 3000);
}
this.count++;
break;
case 'completed': // 播放结束后触发该状态机上报
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state completed called.`);
let eventDataFalse: emitter.EventData = {
data: {
'flag': false
}
};
let innerEvent: emitter.InnerEvent = {
eventId: 1,
priority: emitter.EventPriority.HIGH
};
emitter.emit(innerEvent, eventDataFalse);
if (this.intervalID != -1) {
clearInterval(this.intervalID)
}
this.avPlayer.off('bufferingUpdate')
AppStorage.setOrCreate('currentTime', this.durationTime);
break;
case 'released':
console.info(`${this.tag}: setAVPlayerCallback released called.`);
break
case 'stopped':
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state stopped called.`);
break
case 'error':
console.error(`${this.tag}: setAVPlayerCallback AVPlayer state error called.`);
break
case 'paused':
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state paused called.`);
setTimeout(() => {
console.info('AVPlayer paused wait to play again');
this.avPlayer?.play(); // 暂停3s后再次调用播放接口开始播放。
}, 3000);
break
default:
console.info(`${this.tag}: setAVPlayerCallback AVPlayer state unknown called.`);
break;
}
});
// 时间上报监听函数
this.avPlayer.on('timeUpdate', (time: number) => {
this.currentTime = time;
});
}
aboutToAppear() {
this.windowWidth = display.getDefaultDisplaySync().width;
this.windowHeight = display.getDefaultDisplaySync().height;
this.surfaceW = this.windowWidth * SURFACE_W;
this.surfaceH = this.surfaceW / SURFACE_H;
this.isPaused = true;
this.context = getContext(this) as common.UIAbilityContext;
}
aboutToDisappear() {
if (this.avPlayer == null) {
console.info(`${this.tag}: avPlayer has not init aboutToDisappear`);
return;
}
this.avPlayer.release((err) => {
if (err == null) {
console.info(`${this.tag}: videoRelease release success`);
} else {
console.error(`${this.tag}: videoRelease release failed, error message is = ${JSON.stringify(err.message)}`);
}
});
emitter.off(innerEventFalse.eventId);
}
onPageHide() {
this.avPause();
this.isPaused = false;
}
onPageShow() {
//const params = router.getParams();
//this.fileName = params.toString();
console.log("myData2",this.myData);
this.fileName = this.myData+".mp3";
console.log("myData2",this.fileName);
emitter.on(innerEventTrue, (res: emitter.EventData) => {
if (res.data) {
this.isPaused = res.data.flag;
this.XComponentFlag = res.data.flag;
}
});
emitter.on(innerEventFalse, (res: emitter.EventData) => {
if (res.data) {
this.isPaused = res.data.flag;
}
});
emitter.on(innerEventWH, (res: emitter.EventData) => {
if (res.data) {
this.windowWidth = res.data.width;
this.windowHeight = res.data.height;
this.setVideoWH();
}
});
}
setVideoWH(): void {
if (this.percent >= 1) { // 横向视频
this.surfaceW = Math.round(this.windowWidth * PROPORTION);
this.surfaceH = Math.round(this.surfaceW / this.percent);
} else { // 纵向视频
this.surfaceH = Math.round(this.windowHeight * PROPORTION);
this.surfaceW = Math.round(this.surfaceH * this.percent);
}
}
@Builder
CoverXComponent() {
XComponent({
// 装载视频容器
id: 'xComponent',
type: XComponentType.SURFACE,
controller: this.xComponentController
})
.id('VideoView')
.visibility(this.XComponentFlag ? Visibility.Visible : Visibility.Hidden)
.onLoad(() => {
this.surfaceId = this.xComponentController.getXComponentSurfaceId();
this.avSetupAudio();
})
.height(`${this.surfaceH}px`)
.width(`${this.surfaceW}px`)
}
build() {
Column() {
Stack() {
Column() {
this.CoverXComponent()
}
.align(Alignment.TopStart)
.margin({ top: 80 })
.id('VideoView')
.justifyContent(FlexAlign.Center)
Row(){
Image($r('app.media.vinyl'))
.width('100%')
.height('40%')
}
Text()
.height(`${this.surfaceH}px`)
.width(`${this.surfaceW}px`)
.margin({ top: 80 })
.backgroundColor(Color.Black)
.opacity($r('app.float.size_zero_five'))
.visibility(this.isSwiping ? Visibility.Visible : Visibility.Hidden)
Row() {
Text(this.timeConvert(this.currentTime))
.id("currentTime")
.fontSize($r('app.float.size_24'))
.opacity($r('app.float.size_1'))
.fontColor($r("app.color.slider_selected"))
Text("/" + this.timeConvert(this.durationTime))
.id("durationTime")
.fontSize($r('app.float.size_24'))
.opacity($r('app.float.size_1'))
.fontColor(Color.White)
}
.margin({ top: 80 })
.visibility(this.isSwiping ? Visibility.Visible : Visibility.Hidden)
Column() {
Blank()
Column() {
// 进度条
Row() {
Row() {
// 播放、暂停键
Image(this.isPaused ? $r("app.media.ic_video_play") : $r("app.media.ic_video_pause"))// 暂停/播放
.id(this.isPaused ? 'pause' : 'play')
.width($r('app.float.size_40'))
.height($r('app.float.size_40'))
.onClick(() => {
if (this.isPaused) {
this.avPause();
this.isPaused = false;
} else {
this.avPlay();
this.isPaused = true;
}
})
// 左侧时间
Text(this.timeConvert(this.currentTime))
.id("currentTimeText")
.fontColor(Color.White)
.textAlign(TextAlign.End)
.fontWeight(FontWeight.Regular)
.margin({ left: $r('app.float.size_10') })
}
// 进度条
Row() {
Slider({
value: this.currentTime,
min: 0,
max: this.durationTime,
style: SliderStyle.OutSet
})
.id('Slider')
.blockColor(Color.White)
.trackColor(Color.Gray)
.selectedColor($r("app.color.slider_selected"))
.showTips(false)
.onChange((value: number, mode: SliderChangeMode) => {
if (this.seekTime !== value) {
this.seekTime = value;
this.avSeek(Number.parseInt(value.toFixed(0)), mode);
}
})
}
.layoutWeight(1)
Row() {
// 右侧时间
Text(this.timeConvert(this.durationTime))
.id("durationTimeText")
.fontColor(Color.White)
.fontWeight(FontWeight.Regular)
// 倍速按钮
Button(this.speedName, { type: ButtonType.Normal })
.border({ width: $r('app.float.size_1'), color: Color.White })
.width(75)
.height($r('app.float.size_40'))
.fontSize($r('app.float.size_15'))
.borderRadius($r('app.float.size_24'))
.fontColor(Color.White)
.backgroundColor(Color.Black)
.opacity($r('app.float.size_1'))
.margin({ left: $r('app.float.size_10') })
.id('Speed')
.onClick(() => {
this.speedIndex = (this.speedIndex + 1) % SPEED_COUNT;
this.speedSelect = this.speedIndex;
this.speedName = this.speedList[this.speedIndex];
if(!this.avPlayer) return;
switch (this.speedSelect) {
case 0:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_00_X);
break;
case 1:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_25_X);
break;
case 2:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_75_X);
break;
case 3:
this.avSetSpeed(media.PlaybackSpeed.SPEED_FORWARD_2_00_X);
break;
}
})
}
}
.justifyContent(FlexAlign.Center)
.padding({ left: $r('app.float.size_25'), right: $r('app.float.size_30') })
.width('100%')
}
.width('100%')
.justifyContent(FlexAlign.Center)
}
.width('100%')
.height('100%')
}
.backgroundColor(Color.Black)
.height('90%')
.width('100%')
Row() {
Text(this.fileName)
.fontSize($r('app.float.size_20'))
.fontColor(Color.White)
.opacity($r('app.float.size_zero_six'))
.fontWeight(FontWeight.Regular)
.textAlign(TextAlign.Center)
}
Row() {
Text("")
.fontSize($r('app.float.size_20'))
.fontColor(Color.White)
.opacity($r('app.float.size_zero_six'))
.fontWeight(FontWeight.Regular)
.textAlign(TextAlign.Center)
}
}.backgroundColor(Color.Black)
.height('100%')
.width('100%')
}
}
2.3 App.ets文件，通过LocalStorage实现组件间数据共享
// App.ets
const storage = new LocalStorage();
export default storage;三、显示效果
