微信小程序开发———音乐播放器

目录 一 小程序主体功能介绍 二 常用组件和API介绍 音频API 常用组件 三 整体布局 数据定义 主体页面…

目录

一 小程序主体功能介绍

二 常用组件和API介绍

音频API

常用组件

三 整体布局

数据定义

主体页面

运行效果

四 播放器页面

布局部分

样式部分

运行效果

五 播放列表页面

布局部分

样式部分

运行效果

全部功能实现代码index.js


一 小程序主体功能介绍

本小程序主要实现,音乐的播放、暂停,下一曲的切换,以及播放列表和当前播放歌曲的详细信息查看等。

二 常用组件和API介绍

1.音频API

1.1 介绍

创建音频时需要先创建一个对象实例,从而引用该对象的方法和属性。

1.2 常用属性方法

属性

src:音频资源的地址;

autoplay:是否自动播放,默认false;

loop: 是否循环播放,默认为false;

startTime: 开始播放的位置,默认为0;

currentTime: 当前播放的位置;

duration: 音频的长度;

paused:当前暂停或停止的状态;

方法

play(): 播放;

stop(): 停止,再播放重头开始;

pause(): 暂停,再播放从当前位置开始;

seek(): 跳到指定的位置;

onError(): 音频播放错误事件;

onEnded(): 音频自然播放结束事件;

onPlay(): 音频播放事件;

onTimeUpdate(): 音频播放进度更新事件;

2.常用组件

2.1 swiper组件

介绍

swiper组件是滑块视图容器,经常用于实现轮播图,在音乐播放器小程序中可以实现标签页的切换。

属性

属性 类型 说明
indicator-dots Boolean 是否显示页面的指示点,默认为false
indicator-color Color 指示点的颜色
indicator-active-color Color 选中的指示点颜色
autoplay Boolean 是否自动切换,默认为false
current Number 当前所在滑块的index,默认为0
current-item-id String 当前所在滑块的item-id
interval Number 自动切换时间间隔(ms)
duration Number 滑动动画时长(ms)
bindchange EventHandle current改变时会触发change事件
circular Boolean 是否采用衔接滑动,默认false

代码使用

2.2 include代码引用

介绍

当一个wxml文件中代码过多,或wxml中有部分相同的代码时,可以将他们分离开,用include进行引入。

代码使用

2.3 scroll-view组件

介绍

scroll-view组件用于实现可滚动视图区域。一般来说,当页面高度超出了显示区域的高度时,先设置外层容器高度,使其低于内部容器高度,然后在外层容器样式中设置滚动方向即可。

属性

属性 说明
scroll-x

允许横向滚动,默认为false

scroll-y 允许纵向滚动,默认为false
scroll-top 设置竖向滚动条的位置
scroll-left 设置横向滚动条的位置
bindscrolltoupper 滚动到顶部/左边触发的事件
bindscrolltolower

滚动到底部/右边触发的事件

代码使用

在.js页面中可以添加scroll处理函数,来查看具体数值

2.4 slider组件

介绍

slider组件是小程序表单组件中的一种,用于滑动选择某一个值,在本项目中将用来实现播放器的进度条

属性

属性 说明
min 最小值,默认为0
max 最大值,默认为100
step 步长,取值大于0
value 当前取值,默认为0
activeColor 已选择的颜色,默认为#1aad19
backgroundColor 背景条颜色,默认为#e9e9e9
block-size 滑块的大小
block-color 滑块的颜色,默认为#ffffff
show-value 是否显示当前value,默认为false
bindchange 完成一次拖动后触发的事件
bindchanging 拖动过程中触发的事件

三 整体布局

1. 数据定义

1.1 路径

pages/index/index.js 文件的data对象定义基础数据playlist

1.2 数据

2. 主体页面

2.1 布局页面index.wxml

2.2 样式部分

2.3 底部播放、切换功能函数实现

3. 运行效果

四 播放器页面

1.布局部分

2. 样式部分

3. 运行效果

五 播放列表页面

1.布局部分

2.样式部分

3.运行效果

4.全部功能实现代码index.js

图片、音乐以及源码资源连接

链接: https://pan.baidu.com/s/1TS2fefu1hb5aEf7FSvqTHA 提取码: ibg5

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/7926.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部