微信小程序——云音乐界面

2023年7月29日上午5:12 • 人工智能 • 阅读 59

文章目录

第一章开发前的准备
*
一、项目展示
二、项目分析
三、项目初始化
第二章标签页切换
*
一、任务分析
二、常用组件介绍
三、编写页面结构和样式
第三章音乐推荐
*
一、任务分析
二、组件介绍
三、编写音乐推荐页面结构和样式
第四章播放器
*
一、任务分析
二、组件介绍
三、实现播放器功能
四、编写播放器页面
第五章播放列表
*
一、任务分析
二、实现播放列表功能
三、测试播放列表切换功能

第一章开发前的准备

一、项目展示

音乐小程序项目效果展示
音乐推荐页面展示
播放器展示
播放列表展示

; 二、项目分析

音乐小程序项目页面结构：

1.tab导航栏
2.content内容区
3.player音乐播放器控件

标签功能app.js应用程序的逻辑文件app.json应用程序的配置文件pages/index/index.jsindex页面的逻辑文件pages/index/index.jsonindex页面的配置文件pages/index/index.wxssindex页面的样式文件

三、项目初始化

开发者工具创建空白项目：
创建完成的页面

修改 app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

删除 index.wxml、 index.wxss里的内容使其成为一个空白的页面

第二章标签页切换

一、任务分析

标签页和页面（ info.wxml、play.wxml、palylist.wxml）结构图：

; 二、常用组件介绍

swiper常用属性：

可选值说明默认indicator-dotsBoolean是否显示面板指示点，默认为falseindicator-colorColor指示点颜色，默认为rgba(0,0,0,.3)indicator-active-colorColor当前选中的指示点颜色，默认为#000000autoplayBoolean是否自动切换，默认为falsecurrentNumber当前所在滑块的index，默认为0current-item-idString当前所在滑块的item-id（不能同时指定current）intervalNumber自动切换时间间隔（毫秒），默认为5000durationNumber滑动动画时长（毫秒），默认为500circularBoolean是否采用衔接滑动，默认为falseverticalBoolean滑动方向是否为纵向，默认为falsebindchangeEventHandlecurrent改变时会触发change事件

swiper组件编写滑动页面结构：

<swiper>
  <swiper-item style="background:#ccc">0swiper-item>
  <swiper-item style="background:#ddd">1swiper-item>
  <swiper-item style="background:#eee">2swiper-item>
swiper>

三、编写页面结构和样式

在 pages/index/index.wxml编写页面和 tab导航栏


<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表view>
view>

<view class="content">view>

<view class="player">view>

在 pages/index/index.wxss编写页面样式和 tab导航栏样式

page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;

}

.tab {
  display: flex;
}

.tab-item {
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}
.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

添加页面 info.wxml、playlist.wxml、play.wxml文件
实现标签页切换，通过滚动事件切换页面效果


<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表view>
view>

<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <include src="info.wxml">include>
    swiper-item>
    <swiper-item>
      <include src="play.wxml">include>
    swiper-item>
    <swiper-item>
      <include src="playlist.wxml">include>
    swiper-item>
  swiper>
view>

<view class="player">view>

滚动事件


    changeTab: function(e) {
      this.setData({
        tab: e.detail.current
      })
    },

通过滚动事件切换页面

第三章音乐推荐

一、任务分析

音乐推荐页面结构图

; 二、组件介绍

scroll-view组件的属性及说明

可选值说明默认scroll-xBoolean允许横向滚动，默认为falsescroll-yBoolean允许纵向滚动，默认为falsescroll-topNumber / String设置竖向滚动条的位置scroll-leftNumber / String设置横向滚动条的位置bindscrolltoupperEventHandle滚动到顶部/左边时触发的事件bindscrolltolowerEventHandle滚动到底部/右边时触发的事件scroll-with-animationBoolean滚动到顶部/左边时触发的事件scroll-into-viewString设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）bindscrollEventHandle滚动时触发的事件

三、编写音乐推荐页面结构和样式

在 info.wxml里实现内容区域滚动和轮播图


<scroll-view class="content-info" scroll-y>

  <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
    <swiper-item>
      <image src="/images/banner.jpg" />
    swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    swiper-item>
  swiper>
scroll-view>

.content-info {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.content-info-slide {
  height: 302rpx;
  margin-bottom: 20px;
}

.content-info-slide image {
  width: 100%;
  height: 100%;
}

实现展示
在 info.html里实现功能按钮


  <view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FMtext>
    view>
    <view>
      <image src="/images/05.png" />
      <text>每日歌曲推荐text>
    view>
    <view>
      <image src="/images/06.png" />
      <text>云音乐新歌榜text>
    view>
  view>


.content-info-portal {
  display: flex;
  margin-bottom: 15px;
}

.content-info-portal>view {
  flex: 1;
  font-size: 11pt;
  text-align: center;
}

.content-info-portal image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}

实现展示
flex布局实现热门音乐的页面布局


  <view class="content-info-list">
    <view class="list-title">推荐歌曲view>
    <view class="list-inner">
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>紫罗兰view>
      view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>五月之歌view>
      view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>菩提树view>
      view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>欢乐颂view>
      view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>安魂曲view>
      view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>摇篮曲view>
      view>
    view>
  view>


.content-info-list {
  font-size: 11pt;
  margin-bottom: 20rpx;
}

.content-info-list > .list-title {
  margin: 20rpx 35rpx;
}

.content-info-list > .list-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}

.content-info-list > .list-inner > .list-item {
  flex: 1;
}

.content-info-list > .list-inner > .list-item > image {
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}

.content-info-list > .list-inner > .list-item > view {
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;

}

实现展示
在 index.wxml里编写底部播放器


<view class="player">
  <image class="player-cover" src="/images/cover.jpg" />
  <view class="player-info">
    <view class="player-info-title">钢琴协奏曲view>
    <view class="player-info-singer">肖邦view>
  view>
  <view class="player-controls">

    <image src="/images/01.png" bindtap="changePage" data-page="2" />

    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />

    <image src="/images/03.png" bindtap="next" />
  view>
view>
view>

底部播放器样式


.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.player-info-singer {
  color: #888;
}

.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

测试效果

第四章播放器

一、任务分析

播放器标签页结构图：
播放器具体功能分析

1.音乐信息：显示当前播放曲目的标题和艺术家
2.专辑封面：当音乐播放时，专辑封面会顺时针旋转
3.播放进度：显示播放进度，调节音乐进度

二、组件介绍

audioCtx对象声明的方式

var audioCtx = wx.createInnerAudioContext();

音频 API接口的属性及说明

可选值名称说明属性 src 音频资源的地址，用于直接播放 startTime 开始播放的位置（秒），默认为0 autoplay 是否自动开始播放，默认为false loop 是否循环播放，默认为false volume 音量。范围0~1。默认为1 duration 音频的长度（秒）。在当前有合法的src时返回（只读） currentTime 音频的播放位置（秒）。在当前有合法的src时返回（只读） paused 开始播放的位置（秒），默认为0

三、实现播放器功能

在 index.js里定义基础播放列表和音乐状态数据


  data: {
    item: 0,
    tab: 0,

    playlist: [{
      id: 1,
      title: '玫瑰花的葬礼',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/78393.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 2,
      title: '幻听',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/59696.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 3,
      title: '清明雨上',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/36119.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 4,
      title: '灰色头像',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/59697.mp3',
      coverImgUrl: '/images/cover.jpg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },

在 index.js编辑音乐播放逻辑代码


    audioCtx: null,
    onReady: function() {
      this.audioCtx = wx.createInnerAudioContext()

      this.setMusic(0)
      var that = this

      this.audioCtx.onError(function() {
        console.log('播放失败：' + that.audioCtx.src)
      })

      this.audioCtx.onEnded(function() {
        that.next()
      })

      this.audioCtx.onPlay(function() {})
      this.audioCtx.onTimeUpdate(function() {
        that.setData({
          'play.duration': formatTime(that.audioCtx.duration),
          'play.currentTime': formatTime(that.audioCtx.currentTime),
          'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
        })
      })

      function formatTime(time) {
        var minute = Math.floor(time / 60) % 60;
        var second = Math.floor(time) % 60
        return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
      }
    },

    setMusic: function(index) {
      var music = this.data.playlist[index]
      this.audioCtx.src = music.src
      this.setData({
        playIndex: index,
        'play.title': music.title,
        'play.singer': music.singer,
        'play.coverImgUrl': music.coverImgUrl,
        'play.currentTime': '00:00',
        'play.duration': '00:00',
        'play.percent': 0
      })
    },

修改底部播放器的结构代码


<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{{play.title}}view>
    <view class="player-info-singer">{{play.singer}}view>
  view>
  <view class="player-controls">

    <image src="/images/01.png" bindtap="changePage" data-page="2" />

    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />

    <image src="/images/03.png" bindtap="next" />
  view>
view>

底部播放器样式代码


.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.player-info-singer {
  color: #888;
}

.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

底部播放器播放功能
在indexjs里编写底部播放器暂停/播放按钮控制歌曲以及播放器切换下一曲歌曲功能


  play: function() {
    this.audioCtx.play()
    this.setData({
      state: 'running'
    })
  },

  pause: function() {
    this.audioCtx.pause()
    this.setData({
      state: 'paused'
    })
  },

  next: function() {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

测试底部播放功能

四、编写播放器页面

在 play.wxml编写播放器页面代码


<view class="content-play">

  <view class="content-play-info">
    <text>{{play.title}}text>
    <view>—— {{play.singer}} ——view>
  view>

  <view class="content-play-cover">
    <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  view>

  <view class="content-play-progress">
    <text>{{play.currentTime}}text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
    view>
    <text>{{play.duration}}text>
  view>
view>

查看页面
在 index.wxss编写播放器样式


.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.content-play-info > view {
  color: #888;
  font-size: 11pt;
}

.content-play-cover image {
  animation: rotateImage 10s linear infinite;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 1px solid #333;
}

@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.content-play-progress {
  display: flex;
  align-items: center;
  margin: 0 35rpx;
  font-size: 9pt;
  text-align: center;
}

.content-play-progress > view {
  flex: 1;
}

查看播放器页面
测试播放器页面旋转

第五章播放列表

一、任务分析

播放器列表结构

; 二、实现播放列表功能

在 playlist.wxml编写播放列表结构

<scroll-view class="content-playlist" scroll-y>
  <view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">
    <image class="playlist-cover" src="{{item.coverImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{{item.title}}view>
      <view class="playlist-info-singer">{{item.singer}}view>
    view>
    <view class="playlist-controls">
      <text wx:if="{{index==playIndex}}">正在播放text>
    view>
  view>
scroll-view>

查看结果
在 index.wxss编写播放列表样式


.playlist-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333;
  height: 112rpx;
}

.playlist-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.playlist-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.playlist-info-singer {
  color: #888;
}

.playlist-controls {
  font-size: 10pt;
  margin-right: 20rpx;
  color: #c25b5b;
}

查看结果
在 index.js里实现播放列表的切换功能


    change: function(e) {
      this.setMusic(e.currentTarget.dataset.index)
      this.play()
  }

三、测试播放列表切换功能

播放列表测试

Original: https://blog.csdn.net/weixin_52112640/article/details/128248335
Author: Chen Mon
Title: 微信小程序——云音乐界面

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/721789/

转载文章受原作者版权保护。转载请注明原作者出处！

人工智能

【自取】最近整理的，有需要可以领取学习：

Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言刷题答案下载！

Pytorch环境配置——cuda、、cudnn、torch、torchvision对应版本（最全）及安装方法

Pytorch环境配置——cuda、、cudnn、torch、torchvision对应版本（最全）及安装方法一、查询可支持的最高cuda版本二、查看cuda、cudnn、py…

人工智能 2023年7月24日
0077
深度学习、机器学习毕业设计 – 选题建议

以下为学长手动整理深度学习算法类业设计项目，完全可以作为当前较新的毕业设计题目选择方向。基于卷积神经网络的图像风格化处理基于卷积神经网络的图像修复系统设计与实现基于深度学习的…

人工智能 2023年6月15日
0076
Keras构建用于分类任务的Transformer（Vision Transformer/VIT）

文章目录一、Vision Transformer (ViT)详细信息二、Vision Transformer结构三、Keras实现 * 3.1 相关包 3.2 数据读取 3….

人工智能 2023年7月1日
0096
【蓝桥杯冲击国赛计划第5天】哈希表

文章目录 1. 哈希表（散列表） * 1.1 定义 1.2 哈希表的作用 1.3 如何映射 1.4 哈希冲突 1.5 公共溢出区 1.6 哈希表的缺陷 1.7 实例「弗里的的语言」…

人工智能 2023年6月29日
0081
【图像处理】浅谈直方图

对于”直方图”，我想绝大部分人都不会陌生，毕竟在数学中很早就遇见过，而图像的直方图（图1），从事图像相关工作的朋友肯定是再熟悉不过了。可谓是最基础不过的知识…

人工智能 2023年6月20日
00188
win10安装cuda10.2和对应的cudnn版本

win10安装cuda10.2和对应的cudnn版本查看自己电脑的显卡版本 1、点击”开始”键，打开NVIDIA控制面板，查看自己电脑的显卡版本，打开后点…

人工智能 2023年6月25日
0075
清晰、幽默、轻松地深入理解YOLOv5网络结构和一些细节（查阅无数资料文献总结）

最近的一篇关于YOLOv5检测小目标博客的点击量很高，没想到YOLOv5还是很有影响力的。既然这样，今天本人就本着幽默、清晰、轻松的风格带大家深入了解一下YOLOv5那倾倒众生的网…

人工智能 2023年6月24日
0095
【源码】YOLOv5云端API部署

简介这是一个YOLOv5的云端部署代码，其存在的主要目的是为了解决将YOLOv5训练出来的权重或者官方权重简单快速的部署上云服务或者Docker中，并且可以通过POST请求在任意…

人工智能 2023年7月10日
0049
【回归预测】MATLAB 实现基于BP神经网络的多变量回归预测

（1）神经元激活函数: 线性激活函数purelin、对数S型激活函数logsig、双曲线正切S型激活函数tansig。（2）BP神经网络生成函数newff 它是用来生成BP神经网…

人工智能 2023年6月12日
0088
Anaconda+tensorflow+pycharm使用全套流程

提前百度查好这3个要安装程序之间的版本对应关系，选择自己需要的；本文安装的是： Anaconda 3-5.3.0(python 3.7) tensorflow 1.14 pych…

人工智能 2023年5月24日
0068
【论文精读】TMI2021医学图像分割 SMU-Net

TMI2021医学图像分割论文 SMU-Net: Saliency-guided Morphology-aware U-Net for Breast Lesion Segmenta…

人工智能 2023年6月15日
0064
KNN算法

k近邻法(k-nearest neighbor, kNN)是1967年由Cover T和Hart P提出的一种基本分类与回归方法。它的工作原理是：存在一个样本数据集合，也称作为训练…

人工智能 2023年7月1日
00121
Matlab分类识别实战||基于神经网络的深水船水声音数据集的识别与分类（GoogLeNet+SqueezeNet+AlexNet）

目录一、前言二、数据集.mat文件三、数据集的处理四、数据信号图示五、创建时频图六、GoogLeNet训练 6.1 加载训练模型 6.2 修改网络参数 6.3 设置训练…

人工智能 2023年6月30日
00100
单细胞测序数据分析——细胞通讯 CellChat

一、CellChat介绍特别好的文章：CellChat细胞通讯分析（上）–文献解读 – 知乎 (zhihu.com)https://zhuanlan.zh…

人工智能 2023年7月14日
0070
编程初学者如何使用搜索引擎

或许你会认为这篇文章的内容极为基础。事实上，我也是这么觉得的。但从很多同学的留言来看，还是有必要简单地科普一下，分享我的一点”搜索”经验。如果你在学习编程…

人工智能 2023年6月4日
0063
用自编码器实现信用卡数据集的异常检测(详细)，Pytorch版本

1.自动编码器(Auto encoder) 自动编码器(au toencoder) 是神经网络的一种，该网络可以看作由两部分组成：一个编码器和一个生成重构的解码器)。传统上，自动编…

人工智能 2023年7月13日
0058

2024 年 5 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

微信小程序——云音乐界面

文章目录

一、项目展示

; 二、项目分析

三、项目初始化

一、任务分析

; 二、常用组件介绍

三、编写页面结构和样式

一、任务分析

; 二、组件介绍

三、编写音乐推荐页面结构和样式

一、任务分析

二、组件介绍

三、实现播放器功能

四、编写播放器页面

一、任务分析

; 二、实现播放列表功能

三、测试播放列表切换功能

大家都在看