HarmonyOS 鸿蒙Next Arkui 音乐播放器开发实例

HarmonyOS 鸿蒙Next Arkui 音乐播放器开发实例 最近接的项目，做了一个音乐播放器，因为没有权限放视频，只能先放几张照片

实现的功能：

1. 音乐列表
2. 加载进度
3. 单曲循环、顺序播放、随机播放
4. 上一首下一首
5. 歌单

第一部分：音乐列表

Scroll(){
    Column(){
        ForEach(this.yinyue,(item)=>{
            list_yinyue({
                info:item,
                click:()=>{
                    zy.page().go('yinyue',{mid:item.id,uid:this.uid})
                }
            })
        })
    }
}

然后是list_yinyue的组件部分

@Preview
@Componentstruct list_yinyue {
  @State info:any = {}
  build(){
    Row(){
      Image(baseimg+this.info.img).width(75).height(75)
      Column(){
         Row(){
           Text(this.info.name).width('100%').fontSize(23)
         }.width('100%').margin({bottom:22})
        Row(){
          Text('演唱者：'+this.info.singer).width('100%').fontSize(18)
        }.width('100%')
      }.width('60%').margin({left:10})
      .height(75)
      Image($r('app.media.bofang')).width(45).height(45)
        .onClick(()=>{
          this.click();
        })
    }.shadow({
      radius: 5,
      color: '#DCDCDC',
      offsetX: 8,
      offsetY: 8
    }).width('96%')
    .height(100)
    .backgroundColor('white')
    .justifyContent(FlexAlign.Start)
    .padding({left:10,right:10})
    .margin({
      left:'2%',
      right:'2%',
      top:10
    })
  }

最后是连接后端获取数据

@State yinyue:Array<object>=[];
  aboutToAppear(){
    s.g('p/gethome',{
      s:(d)=>{
        if(d.code == 200){
          this.yinyue = d.mp3;
          this.shipin  = d.video;
        }
      }
    })
  }

我这里是写在aboutToAppear里了，因为这个是在build之前去执行，速度能快一点

至于这个s的写法，是我自己封装的函数库

浏览过百更新下一期