原生微信小程序 “音乐播放器” 项目小小实战学习【组件/穿值/音乐API】

原生小程序  开发音乐播放器:

首先上效果图、源码:

 

组件框架 ,这里说下思路:

组件1:

swiper 组件 和 include 标签  这个轮播组件 都很熟悉吧  也没什么好说的啊  ,但这个项目中我们用来实现滑动他实现切换导航这个功能:

所以这里的知识点主要3个:

1. 轮播图组件 swiper 中的 current属性 可以设置显示的页面 参数为下标【0开始】

2.轮播图组件 swiper 中的 bindchange动作 这个动作如果轮播变换(切换) 那么导航条的背景颜色 和 字体颜色也就跟着变了

3.include 标签 ,这个标签相当于把一整个xxx.wxml 引入了进来 ,就简单的引入了进来,所以我们可以在其他单独页面上写三个导航项的内容


组件2:

scroll-view 组件  这个组件就是我们常见的那个滑块容器 ,不够的话 他会自己往下拓展的:

所以 这个组件往y延伸千万要注意这一点  即设置固定高度问题。

还有一点 :如果你想把这个组件的滚轮条去掉也是可以的  即:

这个组件API详看: 这个组件还有很多动作事件等你自己去发现。。。。

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html


组件3:

音乐滑块条实现: slider 组件  ,这玩意主要实现在下图:

所以这个组件 主要记住这几个就够用的了.




功能实现

先介绍 媒体播放API    以前的是标签 但是现在改革了 变成了 JS代码:

所以就是那个 wx.createInnerAudioContext()   

 

 

以上就是音乐API

这里注意几点: 第一就是 千万要等他(播放)了 才能获取到音频的信息,,,,获取信息的话首先得赋值src给音频对象。

  所以这里的思路就是 index 是曲目下标 然后获取信息 然后设置src 给 音频对象

2.播放音乐功能实现:

  其实也和很简单  首先播放起来  然后设置状态为running 【为什么设置状态running  因为后面配合动画转动【Css基础好的就懂了】】

3.暂停播放

    这个不多说 自己看

4.下一首音乐 实现

 

5.获取音乐的时长

 

逻辑就是 首先获取这个音乐的当前播放位置[单位 S] 和 总时长[单位 S] ,然后呢就是直接把这新建一个formathTime 转换一下成 “分:秒”,最后 的percent 呢 就是当前播放秒 / 总长度秒 * 100  就得到了当前播放的百分比  逻辑很简单哈。表示的话 直接显示 转换后的 currentTime  和  play.duration  即可。

6. 点击到导航栏切换 和  滑动swiper 切换导航栏

视图:

逻辑:

 7.播放的时候 专辑图片 旋转

CSS如下: 【动画】

其实也就是这几个功能了,,,注意点也有:

1. 主义this 穿透 ,这个this穿透JS开发经常发生 其实就是说 this 指向的是谁【调用者】你要很清楚!  

2. 初始化要设置一下东西,例:

完.  

没讲很全  主要是逻辑和组件的运用思维   希望各位朋友能学到多少 ,,,,emmm  谢谢大家阅读!

本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/15387341.html

原文地址:https://www.cnblogs.com/bi-hu/p/15387341.html