devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

码农武：网易云音乐微信小程序开发流程

作者：小小林熬夜学编程 | 2024-02-12 14:58:54

赞

踩

码农武：网易云音乐微信小程序开发流程
  • 开发环境（微信/node.js环境）
  • 开发工具（微信开发者工具）
  • Node.js代理服务器
  • 网易云音乐开发接口API

项目介绍：

        网易云音乐界面

                

        数据渲染

                

                

                 真实接口请求的数据，数据渲染

        动态效果

                

        功能实现

                

                音乐播放，暂停，下一曲

项目实现：

        开发准备：

                注册成为微信小程序开发者

                微信公众平台

                下载微信开发者工具

                新建项目：

                        项目目录了解：

                        

                        components----组件文件夹

                        pages------------页面文件夹

                        utils--------------封装业务逻辑文件

                        app.js-----------全局功能实现文件（App对象，注册）

                        app.json--------全局配置文件

                        app.wxss-------全局样式设置

                安装Node.js环境

                

下载安装：

        测试：

        

        启动代理服务器：

        

             进入当前文件夹：

                

        进入命令行：

        

        注意：如果没有npm,需要先安装NODEMON

        服务器启动成功

        网易云音乐接口API

        

        https://binaryify.github.io/NeteaseCloudMusicApi/#/

      项目实现：

        首页搭建：

                pages新建首页：

                

                结构实现代码

                        头部：

                        

轮播图区域代码实现：

导航区域结构实现：

推荐歌曲区域结构

样式设置：

       

  1. /* pages/index/index.wxss */
  2. /* 搜索 */
  3. .header {
  4.   display: flex;
  5.   padding: 10rpx;
  6. }
  7. .header image{
  8.   width: 60rpx;
  9.   height: 60rpx;
  10. }
  11. .header .search {
  12.   border: 1rpx solid #eee;
  13.   margin: 0 10rpx;
  14.   border-radius: 10rpx;
  15.   font-size: 26rpx;
  16.   text-align: center;
  17.   line-height: 60rpx;
  18.   color: #d43c33;
  19.   /*flex-grow:可拉伸  flex-shrink:可压缩  flex-basic：当前元素的宽度*/
  20.   /*flex: flex-grow:0,flex-shrink:1,flex-basic:auto*/
  21.   /*flex:1 flex-grow:1,flex-shrink:1,flex-basic:0%*/
  22.   /*flex:auto flex-grow:1,flex-shrink:1,flex-basic:auto*/
  23.   flex: 1;
  24. }
  25. /* 轮播图 */
  26. .banners{
  27.   width: 100%;
  28.   height: 300rpx;
  29. }
  30.  
  31. .banners image{
  32.   width: 100%;
  33.   height: 100%;
  34. }
  35.  
  36. .navContainer{
  37.   display: flex;
  38. }
  39.  
  40. .navItem{
  41.   display: flex;
  42.   flex-direction: column;
  43.   align-items: center;
  44.   width: 20%;
  45. }
  46. /* 矢量图 */
  47. .navItem .iconfont{
  48.   width: 100rpx;
  49.   height: 100rpx;
  50.   border-radius: 50%;
  51.   text-align: center;
  52.   line-height: 100rpx;
  53.   background: rgb(240,19,19);
  54.   font-size: 50rpx;
  55.   color: #fff;
  56.   margin: 20rpx 0;
  57. }
  58.  
  59. .navItem text{
  60.   font-size: 26rpx;
  61. }
  62. /* 推荐歌曲 */
  63. .recommendContainer{
  64.   padding: 20rpx;
  65. }
  66.  
  67. /* 内容推荐区 */
  68. .recommendScroll{
  69.   display: flex;
  70.   height: 270rpx;
  71. }
  72. .scrollItem{
  73.   width: 200rpx;
  74.   margin-right: 20rpx;
  75. }
  76. .scrollItem image{
  77.   width: 200rpx;
  78.   height: 200rpx;
  79.   border-radius: 10rpx;
  80. }
  81. .scrollItem text{
  82.   font-size: 24rpx;
  83.   /* 多行文本溢出隐藏 省略号代替 */
  84.   overflow: hidden;
  85.   text-overflow: ellipsis;
  86.   display: -webkit-box;
  87.   -webkit-box-orient: vertical;/*设置纵向对齐*/
  88.   -webkit-line-clamp: 2;/*设置盒子行数*/
  89. }
  90. /* 排行榜 */
  91. .topList{
  92.   padding: 20rpx;
  93. }
  94. .topListSwiper{
  95.   height: 440rpx;
  96. }
  97. .swiperItem{
  98.   width: 95%;
  99.   background-color: rgb(248, 248, 248);
  100.   border-radius: 10rpx;
  101. }
  102. .swiperItem .title{
  103.   font-size: 30rpx;
  104.   line-height: 80rpx;
  105.   padding-left: 10rpx;
  106. }
  107. .musicItem{
  108.   /* 一个元素为flex，子元素自动变成block */
  109.   display: flex;
  110. }
  111. .musicItem image{
  112.   width: 100rpx;
  113.   height: 100rpx;
  114.   margin-bottom: 20rpx;
  115.   border-radius: 6rpx;
  116.   padding-left: 10rpx;
  117. }
  118. .musicItem .count{
  119.   width: 100rpx;
  120.   height: 100rpx;
  121.   text-align: center;
  122.   line-height: 100rpx;
  123. }
  124. .musicItem .musicName{
  125.   height: 100rpx;
  126.   line-height: 100rpx;
  127.   max-width: 400rpx;
  128.   white-space: nowrap;
  129.   overflow: hidden;
  130.   text-overflow: ellipsis;
  131. }

功能实现：

  1. // pages/index/index.js
  2. import request from '../../utils/request'
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     bannerList:[],//轮播图数据
  10.     recommendList:[],//推荐歌单数据
  11.     topList:[],//排行榜数据
  12.   },
  13.  
  14.   /**
  15.    * 生命周期函数--监听页面加载
  16.    */
  17.   onLoad: async function (options) {
  18.     //滑块数据
  19.     let bannerListData = await request('/banner', {type:2});
  20.     this.setData({
  21.       bannerList: bannerListData.banners
  22.     })
  23.     //推荐歌单数据
  24.     let recommendListData = await request('/personalized', {limit:10})
  25.     this.setData({
  26.       recommendList: recommendListData.result
  27.     })
  28.     //排行榜数据
  29.     let index = 0;
  30.     let resultArr = [];
  31.     while(index<5){
  32.       let topListData = await request('/top/list', {idx:index++});
  33.       let topListItem = {name: topListData.playlist.name, tracks: topListData.playlist.tracks.slice(0, 3)};
  34.       resultArr.push(topListItem);
  35.       //拿到数据就渲染到页面，但是渲染次数多
  36.       this.setData({
  37.         topList: resultArr
  38.       })
  39.     }
  40.   },
  41.   //跳转到每日推荐歌曲页面
  42.   toRecommendSong(){
  43.     wx.navigateTo({
  44.       url: '/pages/recommendSong/recommendSong',
  45.     })
  46.   },
  47.   //跳转到搜索页面
  48.   toSearch(){
  49.     wx.navigateTo({
  50.       url: '/pages/search/search',
  51.     })
  52.   },
  53.  
  54.   toSongDetail(event){
  55.     wx.navigateTo({
  56.       url: '/pages/songDetail/songDetail?song=' + event.currentTarget.id
  57.     })
  58.   },
  59.   //跳转到歌单歌曲列表页面
  60.   toPlayList(event){
  61.     wx.navigateTo({
  62.       url: '/pages/playlist/playlist?id=' + event.currentTarget.id
  63.     })
  64.   },
  65.  
  66.   /**
  67.    * 生命周期函数--监听页面初次渲染完成
  68.    */
  69.   onReady: function () {
  70.  
  71.   },
  72.  
  73.   /**
  74.    * 生命周期函数--监听页面显示
  75.    */
  76.   onShow: function () {
  77.  
  78.   },
  79.  
  80.   /**
  81.    * 生命周期函数--监听页面隐藏
  82.    */
  83.   onHide: function () {
  84.  
  85.   },
  86.  
  87.   /**
  88.    * 生命周期函数--监听页面卸载
  89.    */
  90.   onUnload: function () {
  91.  
  92.   },
  93.  
  94.   /**
  95.    * 页面相关事件处理函数--监听用户下拉动作
  96.    */
  97.   onPullDownRefresh: function () {
  98.  
  99.   },
  100.  
  101.   /**
  102.    * 页面上拉触底事件的处理函数
  103.    */
  104.   onReachBottom: function () {
  105.  
  106.   },
  107.  
  108.   /**
  109.    * 用户点击右上角分享
  110.    */
  111.   onShareAppMessage: function () {
  112.  
  113.   }
  114. })

个人中心页面搭建：

        目录：

界面搭建代码：

  1. <!--pages/personal/personal.wxml-->
  2. <view class="personalContainer">
  3.   <view class="user-section">
  4.     <image class="bg" src="/static/images/personal/bgImg2.jpg"></image>
  5.     <view class="user-info-box" bindtap="toLogin">
  6.       <view class="portrait-box">
  7.         <image class="portrait" src='{{userInfo.avatarUrl ? userInfo.avatarUrl : "/static/images/personal/missing-face.png"}}'></image>
  8.       </view>
  9.       <view class="info-box">
  10.         <text class="username">{{userInfo.nickname ? userInfo.nickname : "游客"}}</text>
  11.       </view>
  12.     </view>
  13.  
  14.     <view class="vip-card-box">
  15.       <image class="card-bg" src="/static/images/personal/vip-card-bg.png" mode=""></image>
  16.       <view class="b-btn">
  17.         立即开通
  18.       </view>
  19.       <view class="tit">
  20.         <!-- 会员图标-->
  21.         <text class="iconfont icon-huiyuan"></text>
  22.         会员
  23.       </view>
  24.       <text class="e-m">manster union</text>
  25.       <text class="e-b">开通会员听歌, 撸代码</text>
  26.     </view>
  27.   </view>
  28.  
  29.  
  30.   <view
  31.     class="cover-container"
  32.     bindtouchstart="handleTouchStart"
  33.     bindtouchmove="handleTouchMove"
  34.     bindtouchend="handleTouchEnd"
  35.     style="transform: {{coverTransform}};transition: {{coverTransition}}"
  36.   >
  37.     <image class="arc" src="/static/images/personal/arc.png"></image>
  38.     <!-- 个人中心导航 -->
  39.     <view class="nav-section">
  40.       <view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
  41.         <text class="iconfont icon-xiaoxi"></text>
  42.         <text>我的消息</text>
  43.       </view>
  44.       <view class="nav-item"   hover-class="common-hover" hover-stay-time="50">
  45.         <text class="iconfont icon-haoyou"></text>
  46.         <text>我的好友</text>
  47.       </view>
  48.       <view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
  49.         <text class="iconfont icon-geren"></text>
  50.         <text>个人主页</text>
  51.       </view>
  52.       <view class="nav-item" hover-class="common-hover"  hover-stay-time="50">
  53.         <text class="iconfont icon-gexingzhuangban"></text>
  54.         <text>个性装扮</text>
  55.       </view>
  56.     </view>
  57.  
  58.     <!-- 个人中心列表 -->
  59.     <view class="personalContent">
  60.       <view class="recentPlayContainer">
  61.         <text class="title">最近播放</text>
  62.         <!-- 最近播放记录 -->
  63.         <scroll-view wx:if="{{recentPlayList.length}}" scroll-x="true" class="recentScroll" enable-flex="true">
  64.           <view class="recentItem" wx:for="{{recentPlayList}}" wx:key="id">
  65.             <image src="{{item.song.al.picUrl}}"></image>
  66.           </view>
  67.         </scroll-view>
  68.         <view wx:else>暂无播放记录</view>
  69.       </view>
  70.  
  71.       <view class="cardList">
  72.         <view class="card-item">
  73.           <text class="title">我的音乐</text>
  74.           <text class="more"> > </text>
  75.         </view>
  76.         <view class="card-item">
  77.           <text class="title">我的收藏</text>
  78.           <text class="more"> > </text>
  79.         </view>
  80.         <view class="card-item">
  81.           <text class="title">我的电台</text>
  82.           <text class="more"> > </text>
  83.         </view>
  84.       </view>
  85.     </view>
  86.   </view>
  87.  
  88.   <!-- 退出登录按钮 -->
  89.   <view hidden="{{!isLogin}}">
  90.     <button class="logout-btn" bindtap="logout">退出登录</button>
  91.   </view>
  92. </view>

样式设置代码：

  1. /* pages/personal/personal.wxss */
  2. /* pages/personal/personal.wxss */
  3. .personalContainer {
  4.   width: 100%;
  5.   height: 100%;
  6.  
  7. }
  8.  
  9. .personalContainer .user-section {
  10.   height: 520rpx;
  11.   position: relative;
  12.   padding: 100rpx 30rpx 0;
  13. }
  14. .user-section .bg {
  15.   position: absolute;
  16.   left: 0;
  17.   top: 0;
  18.   width: 100%;
  19.   height: 100%;
  20.   opacity: 0.7;
  21.   filter: blur(1px);
  22. }
  23.  
  24.  
  25. .user-info-box{
  26.   height: 180rpx;
  27.   display:flex;
  28.   align-items:center;
  29.   position:relative;
  30.   z-index: 1;
  31. }
  32.  
  33. .user-info-box .portrait{
  34.   width: 130rpx;
  35.   height: 130rpx;
  36.   border:5rpx solid #fff;
  37.   border-radius: 50%;
  38. }
  39. .user-info-box .username{
  40.   font-size: 24;
  41.   color: #303133;
  42.   margin-left: 20rpx;
  43. }
  44.  
  45. /* vip-box */
  46. .vip-card-box {
  47.   position: relative;
  48.   display: flex;
  49.   flex-direction: column;
  50.   background: rgba(0, 0, 0, .7);
  51.   height: 240rpx;
  52.   color: #f7d680;
  53.   border-radius: 16rpx 16rpx 0 0;
  54.   padding: 20rpx 24rpx;
  55. }
  56.  
  57.  
  58. .vip-card-box .card-bg{
  59.   position:absolute;
  60.   top: 20rpx;
  61.   right: 0;
  62.   width: 380rpx;
  63.   height: 260rpx;
  64. }
  65.  
  66. .vip-card-box .b-btn{
  67.   position: absolute;
  68.   right: 20rpx;
  69.   top: 16rpx;
  70.   width: 132rpx;
  71.   height: 40rpx;
  72.   text-align: center;
  73.   line-height: 40rpx;
  74.   font-size: 22rpx;
  75.   color: #36343c;
  76.   border-radius: 20px;
  77.   background: #f9e6af;
  78.   z-index: 1;
  79. }
  80.  
  81. .vip-card-box .b-btn{
  82.   position: absolute;
  83.   right: 20rpx;
  84.   top: 16rpx;
  85.   width: 132rpx;
  86.   height: 40rpx;
  87.   text-align: center;
  88.   line-height: 40rpx;
  89.   font-size: 22rpx;
  90.   color: #36343c;
  91.   border-radius: 20px;
  92.   /*background: linear-gradient(left, #f9e6af, #ffd465);*/ /*渐变不生效*/
  93.   background: #f9e6af;
  94.   z-index: 1;
  95. }
  96.  
  97. .vip-card-box .tit {
  98.   font-size: 22rpx;
  99.   color: #f7d680;
  100.   margin-bottom: 28rpx;
  101. }
  102. .vip-card-box .tit .iconfont{
  103.   color: #f6e5a3;
  104.   margin-right: 16rpx;
  105. }
  106.  
  107.  
  108.  
  109.  
  110. .vip-card-box .e-m{
  111.   font-size: 34rpx;
  112.   margin-top: 10rpx;
  113. }
  114. .vip-card-box .e-b{
  115.   font-size: 24rpx;
  116.   color: #d8cba9;
  117.   margin-top: 10rpx;
  118. }
  119.  
  120.  
  121. .cover-container{
  122.   margin-top: -150rpx;
  123.   padding: 0 30rpx;
  124.   position:relative;
  125.   background: #f5f5f5;
  126.   padding-bottom: 20rpx;
  127. }
  128.  
  129. .cover-container .arc{
  130.   position:absolute;
  131.   left: 0;
  132.   top: -34rpx;
  133.   width: 100%;
  134.   height: 36rpx;
  135. }
  136.  
  137.  
  138. /* 导航部分 */
  139. .cover-container .nav-section {
  140.   display: flex;
  141.   background: #fff;
  142.   padding: 20rpx 0;
  143.   border-radius: 15rpx;
  144. }
  145.  
  146.  
  147. .nav-section .nav-item {
  148.   width: 25%;
  149.   box-sizing: border-box;
  150.   display: flex;
  151.   flex-direction: column;
  152.   align-items: center;
  153. }
  154.  
  155. .nav-section .nav-item .iconfont {
  156.   font-size: 50rpx;
  157.   color: #d43c33;
  158.   line-height: 70rpx;
  159. }
  160.  
  161. .nav-section .nav-item text:last-child {
  162.   font-size: 22rpx;
  163.  
  164. }
  165.  
  166.  
  167. /* 个人中心列表 */
  168. .personalContent {
  169.   background: #fff;
  170.   margin-top: 20rpx;
  171. }
  172.  
  173. /* 最近播放 */
  174. .personalContent .scrollView {
  175.   display: flex;
  176.   height: 160rpx;
  177. }
  178. .personalContent .recentPlay {
  179.   display: flex;
  180. }
  181.  
  182. .recentPlayContainer .title {
  183.   padding-left: 20rpx;
  184.   font-size: 26rpx;
  185.   color: #333;
  186.   line-height: 80rpx;
  187. }
  188.  
  189. .personalContent .recentPlay image {
  190.   width: 160rpx;
  191.   height: 160rpx;
  192.   margin-left: 20rpx;
  193.   border-radius: 20rpx;
  194. }
  195.  
  196.  
  197. .cardList {
  198.   margin-top: 20rpx;
  199.  
  200. }
  201. .cardList .card-item{
  202.   border-top: 1rpx solid #eee;
  203.   height: 80rpx;
  204.   line-height: 80rpx;
  205.   padding: 10rpx;
  206.   font-size: 26rpx;
  207.   color: #333;
  208. }
  209. .cardList .card-item .more {
  210.   float: right;
  211. }
  212.  
  213. /*最近播放记录*/
  214. .recentScroll {
  215.   display: flex;
  216.   height: 200rpx;
  217. }
  218. .recentItem {
  219.   margin: 0 20rpx;
  220. }
  221. .recentItem image{
  222.   width: 200rpx;
  223.   height: 200rpx;
  224.   border-radius: 10rpx;
  225. }
  226.  
  227. .logout-btn {
  228.   margin-top: 5rpx;
  229. }

功能实现：

  1. // pages/personal/personal.js
  2. import request from '../../utils/request'
  3. let startY = 0;//手指起始坐标
  4. let moveY = 0;//手指移动坐标
  5. let moveDistance = 0;//手指移动距离
  6. Page({
  7.  
  8.   /**
  9.    * 页面的初始数据
  10.    */
  11.   data: {
  12.     coverTransform: 'translateY(0)',
  13.     coverTransition: '',
  14.     userInfo: {},
  15.     recentPlayList: [],//播放记录
  16.     isLogin: false //控制退出登录显示
  17.   },
  18.  
  19.   /**
  20.    * 生命周期函数--监听页面加载
  21.    */
  22.   onLoad: function (options) {
  23.     //读取用户基本信息
  24.     let userInfo = wx.getStorageSync('userInfo');
  25.     if(userInfo){
  26.       //更新用户信息
  27.       this.setData({
  28.         userInfo: JSON.parse(userInfo),
  29.         isLogin: true
  30.       })
  31.       //播放记录
  32.       this.getUserRecentPlayList(this.data.userInfo.userId)
  33.     }
  34.   },
  35.  
  36.   //获取用户播放记录
  37.   async getUserRecentPlayList(userId){
  38.     let recentPlayListData = await request('/user/record',{uid: userId,type: 0});
  39.     let index = 0;
  40.     let recentPlayList = recentPlayListData.allData.splice(0,10).map(item=>{
  41.       item.id = index++;
  42.       return item;
  43.     })
  44.     this.setData({
  45.       recentPlayList: recentPlayList
  46.     })
  47.   },
  48.  
  49.   handleTouchStart(event){
  50.     this.setData({
  51.       coverTransition: ''
  52.     })
  53.     //起始手指坐标
  54.     startY = event.touches[0].clientY;
  55.   },
  56.   handleTouchMove(event){
  57.     moveY = event.touches[0].clientY;
  58.     moveDistance = moveY - startY;
  59.  
  60.     if(moveDistance <= 0){
  61.       return;
  62.     }
  63.     if(moveDistance >= 80){
  64.       moveDistance = 80;
  65.     }
  66.  
  67.     //动态更新coverTransform
  68.     this.setData({
  69.       coverTransform: 'translateY('+moveDistance+'rpx)'
  70.     })
  71.   },
  72.   handleTouchEnd(){
  73.         //重置coverTransform
  74.         this.setData({
  75.           coverTransform: 'translateY(0)',
  76.           coverTransition: 'transform 1s linear'
  77.         })
  78.   },
  79.   //登录跳转
  80.   toLogin(){
  81.     wx.navigateTo({
  82.       url: '/pages/login/login',
  83.     })
  84.   },
  85.   //退出登录
  86.   logout(){
  87.     //服务端退出登录状态
  88.     let status = request('/logout');
  89.     console.log(status)
  90.     //删除客户端信息
  91.     wx.removeStorageSync('userInfo')
  92.     this.setData({
  93.       userInfo: {},
  94.       isLogin: false
  95.     })
  96.     wx.navigateTo({
  97.       url: '/pages/login/login',
  98.     })
  99.     wx.showToast({
  100.       title: '退出登录',
  101.       icon: 'success'
  102.     })
  103.   },
  104.   /**
  105.    * 生命周期函数--监听页面初次渲染完成
  106.    */
  107.   onReady: function () {
  108.  
  109.   },
  110.  
  111.   /**
  112.    * 生命周期函数--监听页面显示
  113.    */
  114.   onShow: function () {
  115.  
  116.   },
  117.  
  118.   /**
  119.    * 生命周期函数--监听页面隐藏
  120.    */
  121.   onHide: function () {
  122.  
  123.   },
  124.  
  125.   /**
  126.    * 生命周期函数--监听页面卸载
  127.    */
  128.   onUnload: function () {
  129.  
  130.   },
  131.  
  132.   /**
  133.    * 页面相关事件处理函数--监听用户下拉动作
  134.    */
  135.   onPullDownRefresh: function () {
  136.  
  137.   },
  138.  
  139.   /**
  140.    * 页面上拉触底事件的处理函数
  141.    */
  142.   onReachBottom: function () {
  143.  
  144.   },
  145.  
  146.   /**
  147.    * 用户点击右上角分享
  148.    */
  149.   onShareAppMessage: function () {
  150.  
  151.   }
  152. })

推荐歌曲区域：

目录：

推荐歌曲结构代码：

  1. <!--pages/recommendSong/recommendSong.wxml-->
  2. <view class="recommendSongContainer">
  3.   <!-- 头部 -->
  4.   <view class="header">
  5.     <image src="/static/images/recommendSong/recommend.jpg"></image>
  6.     <view class="date">
  7.       <text class="year">{{year}} / </text>
  8.       <text class="month">{{month}} / </text>
  9.       <text class="day">{{day}}</text>
  10.     </view>
  11.   </view>
  12.   <!-- 列表区域 -->
  13.   <view class="ListContainer">
  14.     <view class="listHeader">
  15.       <text>播放全部</text>
  16.       <text class="changeMore">多选</text>
  17.     </view>
  18.     <!-- 歌曲 -->
  19.     <scroll-view scroll-y="true" class="listScroll">
  20.       <view class="scrollItem" wx:for="{{recommendList}}" wx:key="id" data-index="{{index}}" data-song="{{item}}" bindtap="toSongDetail">
  21.         <image src="{{item.album.picUrl}}"></image>
  22.         <view class="musicInfo">
  23.           <text class="musicName">{{item.name}}</text>
  24.           <text class="musicAuthor">{{item.artists[0].name}}</text>
  25.         </view>
  26.         <text class="iconfont icon-icon"></text>
  27.       </view>
  28.     </scroll-view>
  29.   </view>
  30. </view>

推荐歌曲样式代码：

  1. /* pages/recommendSong/recommendSong.wxss */
  2. /* 头部 */
  3. .recommendSongContainer .header {
  4.   position: relative;
  5.   width: 100%;
  6.   height: 300rpx;
  7. }
  8. .recommendSongContainer .header image {
  9.   width: 100%;
  10.   height: 100%;
  11. }
  12. .recommendSongContainer .header .date {
  13.   position: absolute;
  14.   left: 30%;
  15.   top:20%;
  16.  
  17.   width: 300rpx;
  18.   height: 100rpx;
  19.   text-align: center;
  20.   line-height: 100rpx;
  21.   color: #B9B3E1;
  22.   font-size: 40rpx;
  23. }
  24. .date .month {
  25.   font-size: 60rpx;
  26. }
  27. /* 列表 */
  28. .ListContainer {
  29.   position: relative;
  30.   top: -20rpx;
  31.   padding: 0 20rpx;
  32.   border-radius: 30rpx;
  33.   background: #fff;
  34. }
  35. .listHeader {
  36.   height: 80rpx;
  37.   line-height: 80rpx;
  38.  
  39. }
  40. .listHeader .changeMore {
  41.   float: right;
  42. }
  43. /* 歌曲 */
  44. .listScroll {
  45.   height: calc(100vh - 380rpx);/*整体高度减去除了scroll-view的元素的高度，即可得到只使得scroll-view元素滑动效果*/
  46. }
  47. .scrollItem {
  48.   display: flex;
  49.   position: relative;
  50.   margin-bottom: 20rpx;
  51. }
  52. .scrollItem image {
  53.   height: 80rpx;
  54.   width: 80rpx;
  55.   border-radius: 8rpx;
  56. }
  57. .musicInfo {
  58.   display: flex;
  59.   flex-direction: column;
  60.   margin-left: 20rpx;
  61. }
  62. .musicInfo text {
  63.   height: 40rpx;
  64.   line-height: 40rpx;
  65.   font-size: 26rpx;
  66.   max-width: 400rpx;/*最长文本长度*/
  67.   white-space: nowrap;/*不允许换行*/
  68.   overflow: hidden;/*超过部分隐藏*/
  69.   text-overflow: ellipsis;/*超过部分换为省略号*/
  70. }
  71. .scrollItem .iconfont{
  72.   position: absolute;
  73.   right: 10rpx;
  74.   width: 80rpx;
  75.   height: 80rpx;
  76.   text-align: right;
  77. }

功能实现代码：

  1. // pages/recommendSong/recommendSong.js
  2. import PubSub from 'pubsub-js';
  3. import request from '../../utils/request'
  4. Page({
  5.  
  6.   /**
  7.    * 页面的初始数据
  8.    */
  9.   data: {
  10.     year: '',//年
  11.     month: '',//月
  12.     day: '',//天
  13.     recommendList: [],//推荐列表数据
  14.     index: 0,//音乐下标
  15.   },
  16.  
  17.   /**
  18.    * 生命周期函数--监听页面加载
  19.    */
  20.   onLoad: function (options) {
  21.     //判断用户是否登录
  22.     let userIinfo = wx.getStorageSync('userInfo');
  23.     if(!userIinfo){
  24.       wx.showToast({
  25.         title: '请先进行登录',
  26.         icon: 'none',
  27.         success: ()=>{
  28.           //跳转至登录界面
  29.           wx.reLaunch({
  30.             url: '/pages/login/login',
  31.           })
  32.         }
  33.       })
  34.     }
  35.     let nowTime = new Date();
  36.     //更新日期
  37.     this.setData({
  38.       day: nowTime.getDate(),
  39.       month: nowTime.getMonth() + 1,
  40.       year: nowTime.getFullYear()
  41.     })
  42.  
  43.     //获取每日推荐的数据
  44.     this.getRecommendList();
  45.  
  46.     //订阅来自songDetail页面发布的消息
  47.     PubSub.subscribe('switchMusic',(msg,type) => {
  48.       let {recommendList,index} = this.data;
  49.       if(type === 'pre'){//上一首
  50.         (index === 0) && (index = recommendList.length);
  51.         index -= 1;
  52.       }else{//下一首
  53.         (index === recommendList.length - 1) && (index = -1);
  54.         index += 1;
  55.       }
  56.  
  57.       //更新下标
  58.       this.setData({
  59.         index: index
  60.       })
  61.  
  62.       let musicId = recommendList[index].id;
  63.       //将音乐id回传给songDetail页面
  64.       PubSub.publish('musicId',musicId);
  65.     })
  66.   },
  67.   
  68.   //获取每日推荐数据
  69.   async getRecommendList(){
  70.     let recommendListData = await request('/recommend/songs');
  71.     
  72.     this.setData({
  73.       recommendList: recommendListData.recommend
  74.     })
  75.  
  76.   },
  77.   //跳转至songDetail页面
  78.   toSongDetail(event){
  79.     let {song,index} = event.currentTarget.dataset;
  80.  
  81.     this.setData({
  82.       index: index
  83.     })
  84.     //路由跳转传参：query参数
  85.     wx.navigateTo({
  86.       url: '/pages/songDetail/songDetail?song=' + song.id
  87.     })
  88.   },
  89.  
  90.   /**
  91.    * 生命周期函数--监听页面初次渲染完成
  92.    */
  93.   onReady: function () {
  94.   
  95.   },
  96.  
  97.   /**
  98.    * 生命周期函数--监听页面显示
  99.    */
  100.   onShow: function () {
  101.  
  102.   },
  103.  
  104.   /**
  105.    * 生命周期函数--监听页面隐藏
  106.    */
  107.   onHide: function () {
  108.  
  109.   },
  110.  
  111.   /**
  112.    * 生命周期函数--监听页面卸载
  113.    */
  114.   onUnload: function () {
  115.  
  116.   },
  117.  
  118.   /**
  119.    * 页面相关事件处理函数--监听用户下拉动作
  120.    */
  121.   onPullDownRefresh: function () {
  122.  
  123.   },
  124.  
  125.   /**
  126.    * 页面上拉触底事件的处理函数
  127.    */
  128.   onReachBottom: function () {
  129.  
  130.   },
  131.  
  132.   /**
  133.    * 用户点击右上角分享
  134.    */
  135.   onShareAppMessage: function () {
  136.  
  137.   }
  138. })

播放歌曲页面：

目录：

结构代码：

  1. <!--pages/songDetail/songDetail.wxml-->
  2. <view class="songDetailContainer">
  3.  
  4.   <view class="musicAuthor">{{song.ar[0].name}}</view>
  5.   <view class="circle"></view>
  6.   
  7.   <!-- 摇杆 -->
  8.   <image class="needle {{isPlay && 'needleRotate'}}" src="/static/images/song/needle.png"></image>
  9.   <!-- 磁盘 -->
  10.   <view class="discContainer {{isPlay && 'discAnimation'}}">
  11.     <image class="disc" src="/static/images/song/disc.png"></image>
  12.     <!-- 歌曲封面图 -->
  13.     <image class="musicImg" src="{{song.al.picUrl}}"></image>
  14.   </view>
  15.   <!-- 歌词 -->
  16.   <view class="scrollLrc">
  17.     <text>{{currentLyric}}</text>
  18.   </view>
  19.   <!-- 进度条控制 -->
  20.   <view class="progressControl">
  21.     <text>{{currentTime}}</text>
  22.     <!-- 总进度条 -->
  23.     <view class="barControl">
  24.       <!-- 实时进度条 -->
  25.       <view class="audio-currentTime-Bar" style="width: {{currentWidth + 'rpx'}}">
  26.         <!-- 小圆球 -->
  27.         <view class="audio-circle"></view>
  28.       </view>
  29.     </view>
  30.     <text>{{durationTime}}</text>
  31.   </view>
  32.  
  33.   <!-- 歌曲播放控制 -->
  34.   <view class="musicControl">
  35.     <text class="iconfont icon-random"></text>
  36.     <text class="iconfont icon-diyigeshipin" id="pre" bindtap="handleSwitch"></text>
  37.     <text class="iconfont {{isPlay ? 'icon-zanting' : 'icon-kaishi'}} big" bindtap="handleMusicPlay"></text>
  38.     <text class="iconfont icon-zuihouyigeshipin" id="next" bindtap="handleSwitch"></text>
  39.     <text class="iconfont icon-liebiao"></text>
  40.   </view>
  41.  
  42. </view>

样式代码：

  1. /* pages/songDetail/songDetail.wxss */
  2. .songDetailContainer {
  3.   height: 100%;
  4.   background: rgba(0,0,0,0.5);
  5.   display: flex;
  6.   flex-flow: column;
  7.   align-items: center;
  8. }
  9. /* 底座 */
  10. .circle {
  11.   position: relative;
  12.   z-index: 100;
  13.   width: 60rpx;
  14.   height: 60rpx;
  15.   border-radius: 50%;
  16.   background: #fff;
  17.   margin: 10rpx 0;
  18. }
  19. /* 摇杆 */
  20. .needle {
  21.   position: relative;
  22.   z-index: 99;
  23.   top: -40rpx;
  24.   left: 56rpx;
  25.   width: 192rpx;
  26.   height: 274rpx;
  27.   transform-origin: 40rpx 0;
  28.   transform: rotate(-20deg);
  29.   transition: transform 1s;
  30. }
  31. /* 摇杆落下 */
  32. .needleRotate {
  33.   transform: rotate(0deg);
  34. }
  35. .discContainer {
  36.   position: relative;
  37.   top: -170rpx;
  38.   width: 598rpx;
  39.   height: 598rpx;
  40. }
  41. .discAnimation {
  42.   animation: disc 20s linear infinite;
  43.   animation-delay: 1s;
  44. }
  45. /*设置动画帧 1.from to(只有起始帧和结束帧)  2.百分比(不止两帧)*/
  46. @keyframes disc{
  47.   from {
  48.     transform: rotate(0deg);
  49.   }
  50.   to {
  51.     transform: rotate(360deg);
  52.   }
  53. }
  54. /* 磁盘 */
  55. .disc {
  56.   width: 100%;
  57.   height: 100%;
  58. }
  59. /* 歌曲封面 */
  60. .musicImg {
  61.   position: absolute;
  62.   top: 0;
  63.   left: 0;
  64.   bottom: 0;
  65.   right: 0;
  66.   margin: auto;
  67.   width: 370rpx;
  68.   height: 370rpx;
  69.   border-radius: 50%;
  70. }
  71. /* 歌词显示 */
  72. .scrollLrc {
  73.   position: absolute;
  74.   bottom: 280rpx;
  75.   width: 640rpx;
  76.   height: 120rpx;
  77.   line-height: 120rpx;
  78.   text-align: center;
  79. }
  80. /* 底部控制器 */
  81. .musicControl {
  82.   position: absolute;
  83.   bottom: 40rpx;
  84.   left: 0;
  85.   border-top: 1rpx solid #fff;
  86.   width: 100%;
  87.   display: flex;
  88. }
  89. .musicControl text {
  90.   width: 20%;
  91.   height: 120rpx;
  92.   line-height: 120rpx;
  93.   text-align: center;
  94.   color: #fff;
  95.   font-size: 50rpx;
  96. }
  97. .musicControl text.big {
  98.   font-size: 80rpx;
  99. }
  100. /* 进度条控制 */
  101. .progressControl {
  102.   position: absolute;
  103.   bottom: 200rpx;
  104.   width: 640rpx;
  105.   height: 80rpx;
  106.   line-height: 80rpx;
  107.   display: flex;
  108. }
  109. .barControl {
  110.   position: relative;
  111.   width: 450rpx;
  112.   height: 4rpx;
  113.   background: rgba(0,0,0,0.4);
  114.   margin: auto;
  115. }
  116. .audio-currentTime-Bar {
  117.   position: absolute;
  118.   top: 0;
  119.   left: 0;
  120.   z-index: 1;
  121.   height: 4rpx;
  122.   background: red;
  123. }
  124. /* 小圆球 */
  125. .audio-circle {
  126.   position: absolute;
  127.   right: -12rpx;
  128.   top: -4rpx;
  129.   width: 12rpx;
  130.   height: 12rpx;
  131.   border-radius: 50%;
  132.   background: #fff;
  133. }

功能代码:

  1. // pages/songDetail/songDetail.js
  2. import PubSub from 'pubsub-js';
  3. import moment from 'moment';
  4. import request from '../../utils/request';
  5. //获取全局实例
  6. const appInstance = getApp();
  7. Page({
  8.  
  9.   /**
  10.    * 页面的初始数据
  11.    */
  12.   data: {
  13.     isPlay: false,//标识播放状态
  14.     song: {},//歌曲详情对象
  15.     musicId: '',//歌曲Id
  16.     currentTime: '00:00',//当前时长
  17.     durationTime:'00:00',//总时长
  18.     currentWidth: 0,//实时进度条宽度
  19.     lyric: [],//歌词
  20.     lyricTime: 0,//歌词对应的时间
  21.     currentLyric: "",//当前歌词对象
  22.   },
  23.  
  24.   /**
  25.    * 生命周期函数--监听页面加载
  26.    */
  27.   onLoad: function (options) {
  28.     //options路由跳转参数
  29.     let musicId = options.song;
  30.     this.setData({
  31.       musicId: musicId
  32.     })
  33.     this.getMusicInfo(musicId);
  34.     this.getLyric(musicId);
  35.     //判断当前页面音乐是否在播放
  36.     if(appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId){
  37.       //修改当前页面音乐播放状态
  38.       this.setData({
  39.         isPlay: true
  40.       })
  41.     }
  42.  
  43.     //创建控制音乐播放实例对象
  44.     this.backgroundAudioManager = wx.getBackgroundAudioManager();
  45.     //监视音乐播放与暂停
  46.     this.backgroundAudioManager.onPlay(()=>{
  47.       //修改音乐播放状态
  48.       this.changePlayState(true);
  49.  
  50.       appInstance.globalData.musicId = musicId;
  51.     });
  52.     this.backgroundAudioManager.onPause(()=>{
  53.       this.changePlayState(false);
  54.     });
  55.     this.backgroundAudioManager.onStop(()=>{
  56.       this.changePlayState(false);
  57.     });
  58.     //音乐播放自然结束
  59.     this.backgroundAudioManager.onEnded(()=>{
  60.       //切歌
  61.       PubSub.publish('switchMusic','next');
  62.       this.setData({
  63.         currentWidth: 0,
  64.         currentTime: '00:00',
  65.         lyric: [],
  66.         lyricTime: 0,
  67.       })
  68.     })
  69.     //监听音乐实时播放的进度
  70.     this.backgroundAudioManager.onTimeUpdate(() => {
  71.       //获取歌词对应时间
  72.       let lyricTime = Math.ceil(this.backgroundAudioManager.currentTime); 
  73.       let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss');
  74.       let currentWidth = (this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration) * 450;
  75.  
  76.       this.setData({
  77.         lyricTime,
  78.         currentTime,
  79.         currentWidth
  80.       })
  81.  
  82.       this.getCurrentLyric();
  83.     })
  84.  
  85.   },
  86.  
  87.   //修改播放状态
  88.   changePlayState(isPlay){
  89.     this.setData({
  90.       isPlay: isPlay
  91.     })
  92.     //修改全局播放状态
  93.     appInstance.globalData.isMusicPlay = isPlay;
  94.   },
  95.   //点击暂停/播放的回调
  96.   handleMusicPlay(){
  97.     //修改是否播放的状态
  98.     let isPlay = !this.data.isPlay;
  99.     // this.setData({
  100.     //   isPlay: isPlay
  101.     // })
  102.     let {musicId} = this.data;
  103.     this.musicControl(isPlay,musicId);
  104.   },
  105.   //请求歌曲信息
  106.   async getMusicInfo(musicId){
  107.     let songData = await request('/song/detail',{ids: musicId});
  108.     let durationTime = moment(songData.songs[0].dt).format('mm:ss');
  109.     this.setData({
  110.       song: songData.songs[0],
  111.       durationTime: durationTime
  112.     })
  113.     //动态修改窗口标题
  114.     wx.setNavigationBarTitle({
  115.       title: this.data.song.name
  116.     })
  117.   },
  118.  
  119.   //歌曲播放控制功能
  120.   async musicControl(isPlay,musicId){
  121.  
  122.     if(isPlay){//音乐播放
  123.       //获取音频资源
  124.       let musicLinkData = await request('/song/url',{id: musicId})
  125.       let musicLink = musicLinkData.data[0].url;
  126.       console.log(musicLink)
  127.       if(musicLink === null){
  128.         wx.showToast({
  129.           title: '请开通会员后听取',
  130.           icon: 'none'
  131.         })
  132.         return;
  133.       }
  134.       //歌曲播放
  135.       this.backgroundAudioManager.src = musicLink;
  136.       this.backgroundAudioManager.title = this.data.song.name;
  137.     }else{//音乐暂停
  138.       this.backgroundAudioManager.pause();
  139.     }
  140.   },
  141.  
  142.   //歌曲切换
  143.   handleSwitch(event){
  144.     //切换类型
  145.     let type = event.currentTarget.id;
  146.  
  147.     //关闭当前播放音乐
  148.     this.backgroundAudioManager.stop();
  149.  
  150.     //订阅来自recommendSong页面
  151.     PubSub.subscribe('musicId',(msg,musicId) => {
  152.       //获取歌曲
  153.       this.getMusicInfo(musicId);
  154.       //自动播放当前音乐
  155.       this.musicControl(true,musicId);
  156.       //取消订阅
  157.       PubSub.unsubscribe('musicId');
  158.     })
  159.     //发布消息数据给recommendSong页面
  160.     PubSub.publish('switchMusic',type);
  161.   },
  162.  
  163.   //获取歌词
  164.   async getLyric(musicId){
  165.     let lyricData = await request("/lyric", {id: musicId});
  166.     let lyric = this.formatLyric(lyricData.lrc.lyric);
  167.   },
  168.  
  169.   //传入初始歌词文本text
  170.   formatLyric(text) {
  171.     let result = [];
  172.     let arr = text.split("\n"); //原歌词文本已经换好行了方便很多，我们直接通过换行符“\n”进行切割
  173.     let row = arr.length; //获取歌词行数
  174.     for (let i = 0; i < row; i++) {
  175.       let temp_row = arr[i]; //现在每一行格式大概就是这样"[00:04.302][02:10.00]hello world";
  176.       let temp_arr = temp_row.split("]");//我们可以通过“]”对时间和文本进行分离
  177.       let text = temp_arr.pop(); //把歌词文本从数组中剔除出来，获取到歌词文本了！
  178.       //再对剩下的歌词时间进行处理
  179.       temp_arr.forEach(element => {
  180.         let obj = {};
  181.         let time_arr = element.substr(1, element.length - 1).split(":");//先把多余的“[”去掉，再分离出分、秒
  182.         let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); //把时间转换成与currentTime相同的类型，方便待会实现滚动效果
  183.         obj.time = s;
  184.         obj.text = text;
  185.         result.push(obj); //每一行歌词对象存到组件的lyric歌词属性里
  186.       });
  187.     }
  188.     result.sort(this.sortRule) //由于不同时间的相同歌词我们给排到一起了，所以这里要以时间顺序重新排列一下
  189.     this.setData({
  190.       lyric: result
  191.     })
  192.   },
  193.   sortRule(a, b) { //设置一下排序规则
  194.     return a.time - b.time;
  195.   },
  196.  
  197.   //控制歌词播放
  198.   getCurrentLyric(){
  199.     let j;
  200.     for(j=0; j<this.data.lyric.length-1; j++){
  201.       if(this.data.lyricTime == this.data.lyric[j].time){
  202.         this.setData({
  203.           currentLyric : this.data.lyric[j].text
  204.         })
  205.       }
  206.     }
  207.   },
  208.  
  209.   /**
  210.    * 生命周期函数--监听页面初次渲染完成
  211.    */
  212.   onReady: function () {
  213.  
  214.   },
  215.  
  216.   /**
  217.    * 生命周期函数--监听页面显示
  218.    */
  219.   onShow: function () {
  220.  
  221.   },
  222.  
  223.   /**
  224.    * 生命周期函数--监听页面隐藏
  225.    */
  226.   onHide: function () {
  227.  
  228.   },
  229.  
  230.   /**
  231.    * 生命周期函数--监听页面卸载
  232.    */
  233.   onUnload: function () {
  234.  
  235.   },
  236.  
  237.   /**
  238.    * 页面相关事件处理函数--监听用户下拉动作
  239.    */
  240.   onPullDownRefresh: function () {
  241.  
  242.   },
  243.  
  244.   /**
  245.    * 页面上拉触底事件的处理函数
  246.    */
  247.   onReachBottom: function () {
  248.  
  249.   },
  250.  
  251.   /**
  252.    * 用户点击右上角分享
  253.    */
  254.   onShareAppMessage: function () {
  255.  
  256.   }
  257. })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/77869
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号