微信小程序初学——音乐播放器

Posted 2023-04-09 十四是40

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序初学——音乐播放器相关的知识，希望对你有一定的参考价值。

一、项目效果展示

音乐推荐页面展示
播放器展示
播放列表展示

二、项目结构

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

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

开发者工具创建空白项目：
新建项目 —— 设置项目名称和路径 —— 选择你注册的AppID —— 不使用云服务 —— 选择javascript基础模板 —— 点击确定创建项目
修改app.json


  "pages":[
    "pages/index1/index1",
    "pages/index1/info",
    "pages/index1/play",
    "pages/index1/playlist",
    "pages/index/index",
    "pages/header/header",
    "pages/footer/footer",
    "pages/logs/logs"
  ],
  "window":
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle":"black"
  ,
  "style": "v2",
  "sitemapLocation": "sitemap.json"

在index1中编写顶部tab导航栏、中部content内容区页面和底部player音乐播放栏
在info中编写音乐推荐页面
在play中编写播放器页面
在playlist中编写播放列表页面

三、项目实现

（一）index1

index1.wxml代码：

<view class="tab">
    <view class="tab-item item==0?'active':''" bindtap="changeItem" data-item="0">音乐推荐</view>
    <view class="tab-item  item==1?'active':''" bindtap="changeItem" data-item="1">播放器</view>
    <view class="tab-item  item==2?'active':''" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content" style="color: #ffffff;">
    <swiper current="item" bindchange="changeTab">
        <swiper-item>
            <include src="./info"></include>
        </swiper-item>
        <swiper-item>
            <include src="./play"></include>
        </swiper-item>
        <swiper-item>
            <include src="./playlist"></include>
        </swiper-item>
    </swiper>

</view>
<view class="player">
    <image src="play.coverImage"></image>
    <view class="player-info">
        <view>play.title</view>
        <view class="player-info-auth">play.singer</view>
    </view>
    <view class="player-controls">
        <image src="../images/01.png"></image>
        <image wx:if=" state=='paused' " src="../images/02.png" bindtap="play"></image>
        <image wx:if=" state=='running' " src="../images/02stop.png" bindtap="pause"></image>
        <image src="../images/03.png" bindtap="next"></image>
    </view>
</view>

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

<swiper>
  <swiper-item style="background:#ccc">0</swiper-item>
  <swiper-item style="background:#ddd">1</swiper-item>
  <swiper-item style="background:#eee">2</swiper-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>

滚动事件

    // tab切换
    changeTab: function(e) 
      this.setData(
        tab: e.detail.current
      )
    ,

通过滚动事件切换页面

第三章音乐推荐

一、任务分析

音乐推荐页面结构图

二、组件介绍

scroll-view组件的属性及说明

可选值	说明	默认
scroll-x	Boolean	允许横向滚动，默认为false
scroll-y	Boolean	允许纵向滚动，默认为false
scroll-top	Number / String	设置竖向滚动条的位置
scroll-left	Number / String	设置横向滚动条的位置
bindscrolltoupper	EventHandle	滚动到顶部/左边时触发的事件
bindscrolltolower	EventHandle	滚动到底部/右边时触发的事件
scroll-with-animation	Boolean	滚动到顶部/左边时触发的事件
scroll-into-view	String	设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）
bindscroll	EventHandle	滚动时触发的事件

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

在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>私人FM</text>
    </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
        
                
                    
                    许嵩音乐智能问答系统微信小程序之音乐播放器 - 项目简介 
项目简介.
音乐播放器搭建.
获取数据及文本分类
智能客服聊天界面.
连接前端微信小程序输入和后端python，并返回值
连接知识图谱 
你还在为白色情人节、黑色情人节、五颜六色情人节该送女朋友什么礼物二发愁吗？你还在为不知道怎么博得女神欢心只能做舔狗发愁吗？你还在被人说不懂浪漫，不懂得制造惊喜而发愁吗？兄弟们，来看看这个私人订制的音乐播放器吧！
 众所周知，女生是一种非常喜欢追星的生物，在她们心目中往往偶像的地位至高无上。如果你摸清楚她们的喜好，定制一款私人音乐播放器，在节日的时候以二维码的形式发送给她，当她扫描二维码打开微信小程序，看到她的idol出现在上面，天哪！没有女生能够抗拒，一定痛哭流涕，感激涕零！到那个时候，我们的努力也就有了希望的曙光！
 本着代码搬运工的原则，本菜狗的宗旨一直是“不生产代码，只做代码的搬运工”。在写音乐播放器的时候，室友看了看说“哇，你好厉害啊！竟然能播放音乐”，“嘿嘿，哪里哪里，不过是站在巨人的肩膀上”。在本次音乐播放器中我们使用的是QQ音乐的api，不过我后来看到有好多人也会用酷狗音乐的api，貌似也是十分好用，大家可以根据自己的喜好来。
 进入正题！ 
代码下载链接：https://download.csdn.net/download/weixin_46570668/19428284.
 首先在app.js里面设置我们想要的idol在QQ音乐中对应的编码 
globalData: {
    userInfo: null,
    selectsinger: {id: "000CK5xN3yZDJt", name: "许嵩", avatar: "https://y.gtimg.cn/music/photo_new/T001R300x300M000000CK5xN3yZDJt.jpg?max_age=2592000"},
    hash:null,
    theSongList:null,
    playlist:null,
    latelySong:null
  }
 
比如许嵩在QQ音乐中的id为"000CK5xN3yZDJt"
 你想用哪个明星，就将这里改掉就可以啦，一些常用的明星在QQ音乐中的id如下（排名不分先后）： 
idol selectsinger
王一博 {id: “004OG5IM1BYEI3”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000004OG5IM1BYEI3.jpg?max_age=2592000”, name: “王一博”}
周杰伦 {id: “0025NhlN2yWrP4”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000”, name: “周杰伦”}
汪苏泷 {id: “001z2JmX09LLgL”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000001z2JmX09LLgL.jpg?max_age=2592000”, name: “汪苏泷”}
徐良 {id: “004aRKga0CXIPm”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000004aRKga0CXIPm.jpg?max_age=2592000”, name: “徐良”}
肖战 {id: “0022eAG537I1bg”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M0000022eAG537I1bg.jpg?max_age=2592000”, name: “肖战”}
Bigbang {id: “004AlfUb0cVkN1”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000004AlfUb0cVkN1.jpg?max_age=2592000”, name: “BIGBANG”}
EXO {id: “001QVwtq3l8cKC”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000001QVwtq3l8cKC.jpg?max_age=2592000”, name: “EXO”}
BTS {id: “001TpDgn4SxyJn”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000001TpDgn4SxyJn.jpg?max_age=2592000”, name: “BTS”}
薛之谦 {id: “002J4UUk29y8BY”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000002J4UUk29y8BY.jpg?max_age=2592000”, name: “薛之谦”}
先举着几个例子吧，大家有想问的可以私信我，将app.js这里改掉就可以了。
 将app.js改好之后，点击播放应该就可以看到你想看到的界面啦，比如说我这个就可以看到
 接下来我们来看看首页
 
 我给这个微信小程序取名“松鼠小屋”，有没有很可爱，这个名字在app.json里面改掉 
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#5F9EA0",
    "navigationBarTitleText": "松鼠小屋",
    "navigationBarTextStyle": "white"
  },
 
背景图片可以在index/index.wxml下面改掉 
<view class="container">
<!-- 背景图片 start-->
<block>
  <view class='bg_shade'></view>
  <image src="../../img/beijing1.png" class="bg_img"></image>
</block>
 
除此之外，别忘记将search/search.wxml里面的背景图片也改掉。
 完成这些之后，恭喜你，你已经完成这个私人订制的音乐播放器啦！是不是很有成就感，嘿嘿！
 一起来快乐听歌吧！

idol	selectsinger
王一博	{id: “004OG5IM1BYEI3”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000004OG5IM1BYEI3.jpg?max_age=2592000”, name: “王一博”}
周杰伦	{id: “0025NhlN2yWrP4”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000”, name: “周杰伦”}
汪苏泷	{id: “001z2JmX09LLgL”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000001z2JmX09LLgL.jpg?max_age=2592000”, name: “汪苏泷”}
徐良	{id: “004aRKga0CXIPm”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000004aRKga0CXIPm.jpg?max_age=2592000”, name: “徐良”}
肖战	{id: “0022eAG537I1bg”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M0000022eAG537I1bg.jpg?max_age=2592000”, name: “肖战”}
Bigbang	{id: “004AlfUb0cVkN1”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000004AlfUb0cVkN1.jpg?max_age=2592000”, name: “BIGBANG”}
EXO	{id: “001QVwtq3l8cKC”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000001QVwtq3l8cKC.jpg?max_age=2592000”, name: “EXO”}
BTS	{id: “001TpDgn4SxyJn”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000001TpDgn4SxyJn.jpg?max_age=2592000”, name: “BTS”}
薛之谦	{id: “002J4UUk29y8BY”, avatar: “https://y.gtimg.cn/music/photo_new/T001R300x300M000002J4UUk29y8BY.jpg?max_age=2592000”, name: “薛之谦”}

微信小程序 初学——音乐播放器

一、项目效果展示

二、项目结构

三、项目实现

（一）index1

三、编写页面结构和样式

第三章 音乐推荐

一、任务分析

二、组件介绍

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

许嵩音乐智能问答系统微信小程序之音乐播放器 - 项目简介

微信小程序初学——音乐播放器

第三章音乐推荐