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

微信小程序之网易云音乐小案例_微信小程序网易云代码

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

赞

踩

微信小程序网易云代码

目录

一.编写对网易云音乐api发起请求的代码

二.编写视频项（组件）

三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现])

四.编写视频详情页

成品图:

准备工作:

——在pages下新建两个page(index,video_detail)mv首页和视频详情

——在根目录下创建components,并在其中创建一个component(video-item)视频项

——在根目录下创建service,并在其中创建api_video.js和index.js,用于对api发起请求

——在utils下创建format.wxs,用于数据格式的转换【下附format的代码】

  1. //数据处理
  2. function formatCount(count){
  3.   var counter = parseInt(count)
  4.   if(counter > 100000000){
  5.     return (counter / 100000000).toFixed(1) + "亿"
  6.   }else if(counter > 10000){
  7.     return (counter / 10000).toFixed(1) + "万"
  8.   }else {
  9.     return counter + ""
  10.   }
  11. }
  12. //往左边加零
  13. function padLeftZero(time){
  14.   time = time + ""
  15.   //先在前面加两个0，然后从字符串长度位开始截取
  16.   return ("00" + time).slice(time.length)
  17. }
  18. //时间转换
  19. function formatDuration(duration)
  20. {
  21.   //转成秒数
  22.   duration = duration / 1000
  23.   //取整数部分，除以60得到分钟数
  24.   var minute = Math.floor(duration / 60)
  25.   //取余数部分的秒数
  26.   var second = Math.floor(duration % 60)
  27.  
  28.   return padLeftZero(minute) + ":" + padLeftZero(second) 
  29. }
  30. module.exports = {
  31.   formatCount:formatCount,
  32.   formatDuration:formatDuration
  33. }

 ——在根目录下创建images，并在其中创建bannar，用于轮播图的展示【下附图片】

一.编写对网易云音乐api发起请求的代码

①service/index.js

  1. const BASE_URL = "https://autumnfish.cn" //网易云音乐api接口,如果接口失效了,可以百度重新搜索一个进行替换,或者在本地开一个api服务器也行.
  2. //创建一个类，赋予它请求接口的方式
  3. class MusicRequest{
  4.  request(url,method,params){
  5.     return new Promise((resolve,reject)=>{
  6.       wx.request({
  7.         url: BASE_URL+url,
  8.         data:params,
  9.         method:method,
  10.         success:res=>resolve(res.data),
  11.         fail:err=>reject(err)
  12.       })
  13.     })
  14.   }
  15.    get(url,params){
  16.     return this.request(url,"GET",params)
  17.   }
  18.    post(url,params){
  19.     return this.request(url,"POST",params)
  20.   }
  21. }
  22. //向外抛出一个对象
  23. export default new MusicRequest();

②service/api_video.js

  1. import musicRequest from './index';
  2.  
  3. //获取热门视频
  4. export function getTopMV(offset,limit=10){
  5.   return musicRequest.get("/top/mv",{offset,limit})
  6. }
  7.  
  8. //获取视频地址
  9. export function getMVURL(id){
  10.   return musicRequest.get("/mv/url",{id})
  11. }
  12.  
  13. //获取视频详情信息
  14. export function getMVDetail(id){
  15.   return musicRequest.get("/mv/detail",{mvid:id})
  16. }
  17.  
  18. //获取其他相关的视频
  19. export function getRelatedVideo(id){
  20.   return musicRequest.get("/related/allvideo",{id})
  21. }

二.编写视频项（组件）

①components/video-item/index.wxml

  1. <!--components/video-item/index.wxml-->
  2. <wxs src="../../utils/format.wxs" module="format"/>
  3. <view class="item">
  4.   <view class="album">
  5.     <image class="image" src="{{item.cover}}" mode="widthFix" />
  6.     <view class="info">
  7.       <view class="count">
  8.         {{format.formatCount(item.playCount)}}
  9.       </view>
  10.       <view class="duration">
  11.         {{format.formatDuration(item.mv.videos[0].duration)}}
  12.       </view>
  13.     </view>
  14.   </view>
  15.   <view class="content">
  16.     {{item.name}} - {{item.artistName}}
  17.   </view>
  18. </view>

②components/video-item/index.js (这里主要接收外部传进组件的数据item)

  1. // components/video-item/index.js
  2. Component({
  3.   /**
  4.    * 组件的属性列表
  5.    */
  6.   properties: {
  7.     item:Object
  8.   },
  9.  
  10.   /**
  11.    * 组件的初始数据
  12.    */
  13.   data: {
  14.   },
  15.  
  16.   /**
  17.    * 组件的方法列表
  18.    */
  19.   methods: {
  20.  
  21.   }
  22. })

 ③components/video-item/index.wxss

  1. .item{
  2.   width: 100%;
  3. }
  4. .album{
  5.   position: relative;
  6.   border-radius: 12rpx;
  7.   overflow: hidden;
  8.   display: flex;
  9. }
  10. .image{
  11.   width: 100%;
  12. }
  13. .album .info{
  14.   width: 100%;
  15.   position: absolute;
  16.   bottom: 10rpx;
  17.   color: white;
  18.   display: flex;
  19.   justify-content: space-between;
  20.   font-size: 24rpx;
  21.   padding: 0 10rpx;
  22. }
  23. .info .count{
  24.   padding-left: 36rpx;
  25.   position: relative;
  26. }
  27. .info .duration{
  28.   padding-right: 18rpx;
  29. }
  30. .info .count::before{
  31.   content: "";
  32.   position: absolute;
  33.   left: -2rpx;
  34.   top: 4rpx;
  35.   width: 30rpx;
  36.   height: 24rpx;
  37.   background-size: cover;
  38.   background-image: url("data:image/jpeg;base64,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");
  39. }
  40. .content{
  41.   margin-top: 10rpx;
  42.   font-size: 28rpx;
  43.   /*显示两行，超出部分使用省略号显示*/
  44.   text-overflow: ellipsis;
  45.   display: -webkit-box;
  46.   -webkit-line-clamp: 2;
  47.   -webkit-box-orient: vertical;
  48.   display: -moz-box;
  49.   -moz-line-clamp: 2;
  50.   -moz-box-orient: vertical;
  51.   word-wrap: break-word;
  52.   word-break: break-all;
  53.   white-space: normal;
  54.   overflow: hidden;
  55. }

三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现])

 ①pages/index/index.js

  1. import {getTopMV} from '../../service/api_video'
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     MVData:[],//视频列表信息
  9.     hasMore:true,//是否还有更多
  10.     swiperHeight:"",//轮播图的高度
  11.     orignIndex:Math.floor(Math.random()*30),//从[0,30)中取任意一个小数(向下取整)作为初始点
  12.     orignCount:10,//每次请求获取10条数据
  13.   },
  14.  
  15.   /**
  16.    * 生命周期函数--监听页面加载
  17.    */
  18.   onLoad: function (options) {
  19.     this.getTopMVData(this.data.orignIndex)
  20.     console.log("初始点:"+this.data.orignIndex);
  21.   },
  22. /**
  23.    * 由于载入图片之后,无法与swiper同高,所以加入下面的逻辑 
  24.    * bindload载入时触发,获取载入图片之后dom的矩形信息==>
  25.    * wx.createSelectorQuery().select(".swiper-image").boundingClientRect();
  26.    * 如果是e.detail.height就是原图片的高度,性质不同。
  27.    */
  28.   queryRect:function(e) {
  29.     let $this = this;
  30.     const query = wx.createSelectorQuery();
  31.     query.select(".swiper-image").boundingClientRect();
  32.     query.exec(res=>{
  33.       $this.setData({
  34.         swiperHeight:res[0].height+"px"
  35.       })
  36.     })
  37.   },
  38.   //点击视频跳入详情页
  39.   videoItemClick:function(e) {
  40.     //获取当前视频的id
  41.     const id = e.currentTarget.dataset.id
  42.     //navigateTo会保留当前页面,并跳转到下个页面
  43.     wx.navigateTo({
  44.       url: '/pages/video_detail/index?id='+id,
  45.     })
  46.   },
  47.  getTopMVData:async function(offset,str) {
  48.    //如果是上拉，并且当前数据组的下次请求没有更多的数据了，则终止请求
  49.    if(str === "reachbottom" && !this.data.hasMore) return
  50.     // 获取从某个点开始的视频列表
  51.     const res = await getTopMV(offset)
  52.     // 获取当前的视频列表
  53.     let newData = this.data.MVData
  54.     // 如果是下拉刷新,直接覆盖视频列表
  55.     if(str==="pulldown") {
  56.       console.log("下拉了");
  57.       newData = res.data
  58.     }
  59.     else{newData = newData.concat(res.data)}// 如果是上拉获取更多视频,则将新旧列表进行拼接
  60.     // 更新视频列表,以及请求获取视频列表之后是否还有更多数据的判断变量
  61.     this.setData({
  62.       MVData:newData,
  63.       hasMore: res.hasMore //是否还有更多
  64.     })
  65.  },
  66.  
  67.   /**
  68.    * 页面相关事件处理函数--监听用户下拉动作
  69.    */
  70.   onPullDownRefresh: function () {
  71.     //下拉刷新->随机刷新视频列表的初始点
  72.     let orignIndex = Math.floor(Math.random()*30)
  73.     this.setData({orignIndex})
  74.     console.log("刷新后:"+this.data.orignIndex);
  75.     this.getTopMVData(orignIndex,"pulldown")
  76.   },
  77.  
  78.   /**
  79.    * 页面上拉触底事件的处理函数
  80.    */
  81.   onReachBottom: function () {
  82.     //上拉获取更多数据->在原本的初始点上+当前视频列表的长度来作为此次请求的初始点
  83.     this.getTopMVData(this.data.orignIndex+this.data.MVData.length,"reachbottom")
  84.   },
  85.  
  86. })

 ②pages/index/index.json (这里要引入组件以及启动page的下拉触发函数)

  1. {
  2.   "enablePullDownRefresh": true,
  3.   "backgroundTextStyle": "dark",
  4.   "usingComponents": {
  5.     "video-item":"/components/video-item/index"
  6.     }
  7. }

③pages/index/index.wxml 

  1. <swiper class="swiper" autoplay indicator-dots circular interval="{{2000}}" style="height: {{swiperHeight}};">
  2.   <block wx:for="{{[1,2,3,4,5,6,7]}}" wx:key="index">
  3.     <swiper-item class="swiper-item">
  4.       <image class="swiper-image" bindload="queryRect" src="/images/bannar/{{item}}.jpg" mode="widthFix" />
  5.     </swiper-item>
  6.   </block>
  7. </swiper>
  8. <view class="video">
  9.   <view class="item" wx:for="{{MVData}}" wx:key="index">
  10.   <video-item item="{{item}}" data-id="{{item.id}}" bindtap="videoItemClick"></video-item>
  11.   </view>
  12. </view>

 ④pages/index/index.wxss

  1. page{
  2.   padding: 0 20rpx;
  3. }
  4. .swiper{
  5.   width: 95%;
  6.   border-radius: 10rpx;
  7.   overflow: hidden;
  8.   transform: translateY(0);
  9. }
  10. .swiper-image{
  11.   width: 100%;
  12. }
  13. .video{
  14.   margin-top: 20rpx;
  15.   width: 95%;
  16.   display: flex;
  17.   flex-wrap: wrap;
  18.   justify-content: space-between;
  19. }
  20. .item{
  21.   width: 48%;
  22.   margin-top: 20rpx;
  23. }

四.编写视频详情页

①pages/video_detail/index.js

  1. // pages/video_detail/index.js
  2. import {getMVDetail,getMVURL,getRelatedVideo} from '../../service/api_video'
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     mvInfo:{},
  10.     url:"",
  11.     relatedData:[]
  12.   },
  13.  
  14.   /**
  15.    * 生命周期函数--监听页面加载
  16.    */
  17.   onLoad(options) {
  18.     //获取跳转时传入的id
  19.     var id = options.id
  20.     this.getMVData(id)
  21.   },
  22.  
  23.   getMVData:function(id){
  24.     getMVDetail(id).then(res=>{
  25.       this.setData({mvInfo:res.data})
  26.     })
  27.     getMVURL(id).then(res=>{
  28.       this.setData({url:res.data.url})
  29.     })
  30.     getRelatedVideo(id).then(res=>{
  31.       this.setData({relatedData:res.data})
  32.     })
  33.     console.log(this);
  34.   },
  35.  
  36.   /**
  37.    * 生命周期函数--监听页面初次渲染完成
  38.    */
  39.   onReady() {
  40.  
  41.   },
  42.  
  43.   /**
  44.    * 生命周期函数--监听页面显示
  45.    */
  46.   onShow() {
  47.  
  48.   },
  49.  
  50.   /**
  51.    * 生命周期函数--监听页面隐藏
  52.    */
  53.   onHide() {
  54.  
  55.   },
  56.  
  57.   /**
  58.    * 生命周期函数--监听页面卸载
  59.    */
  60.   onUnload() {
  61.  
  62.   },
  63.  
  64.   /**
  65.    * 页面相关事件处理函数--监听用户下拉动作
  66.    */
  67.   onPullDownRefresh() {
  68.  
  69.   },
  70.  
  71.   /**
  72.    * 页面上拉触底事件的处理函数
  73.    */
  74.   onReachBottom() {
  75.  
  76.   },
  77.  
  78.   /**
  79.    * 用户点击右上角分享
  80.    */
  81.   onShareAppMessage() {
  82.  
  83.   }
  84. })

②pages/video_detail/index.wxml

  1. <!--pages/video_detail/index.wxml-->
  2. <wxs src="../../utils/format.wxs" module="format"/>
  3. <video src="{{url}}" class="video"></video>
  4. <view class="detail">
  5.   <view class="name">
  6.     {{mvInfo.name}}
  7.   </view>
  8.   <view class="singer">
  9.     {{mvInfo.artistName}}
  10.   </view>
  11.   <view class="info">
  12.     {{format.formatCount(mvInfo.playCount)}}播放-{{mvInfo.publishTime}}
  13.   </view>
  14. </view>
  15. <view class="related">
  16.   <view wx:for="{{relatedData}}" class="item"  wx:key="index">
  17.   <view class="image">
  18.     <image src="{{item.coverUrl}}" mode=""/>
  19.     <view class="imageInfo">
  20.       <view class="count">
  21.         {{format.formatCount(item.playTime)}}
  22.       </view>
  23.     </view>
  24.     
  25.   </view>
  26.     <view class="relatedInfo">
  27.       <view class="title">
  28.         {{item.title}}
  29.       </view>
  30.       <view class="user">
  31.       <block wx:for="{{item.creator}}" wx:key="index">
  32.         {{item.userName}}
  33.         <block wx:if="{{!index==item.creator.length}}">/</block>
  34.       </block>
  35.       </view>
  36.     </view>
  37.   </view>
  38. </view>

③pages/video_detail/index.wxss

  1. /* pages/video_detail/index.wxss */
  2. .video{
  3.   width: 100%;
  4. }
  5. .detail{
  6.   margin: 20rpx 0 90rpx 50rpx;
  7. }
  8. .detail .name{
  9.   font-weight: bold;
  10. }
  11. .detail .singer{
  12.   font-size: 13px;
  13.   margin: 10rpx 0; 
  14.   color: gray;
  15. }
  16. .detail .info{
  17.   font-size: 13px;
  18.   color: gray;
  19. }
  20. .related{
  21.   margin: 0 50rpx;
  22. }
  23. .item{
  24.   display: flex;
  25.   margin-bottom: 20rpx;
  26.   width: 100%;
  27. }
  28. .item .image{
  29.   width: 40%;
  30.   height: 150rpx;
  31.   margin-right: 20rpx;
  32.   position: relative;
  33. }
  34. .item image{
  35.   width: 100%;
  36.   height: 100%;
  37.   border-radius: 5px;
  38. }
  39. .item .relatedInfo{
  40.   width: 58%;
  41. }
  42. .item .relatedInfo .title{
  43.   font-size: 15px;
  44. }
  45. .item .relatedInfo .user{
  46.   font-size: 12px;
  47.   margin-top: 20rpx;
  48.   color: gray;
  49. }
  50. .imageInfo {
  51.   width: 100%;
  52.   position: absolute;
  53.   bottom: 10rpx;
  54.   color: white;
  55.   display: flex;
  56.   justify-content: flex-end;
  57.   font-size: 24rpx;
  58. }
  59. .imageInfo .count{
  60.   padding-left: 36rpx;
  61.   padding-right: 10rpx;
  62.   position: relative;
  63. }
  64. .imageInfo .count::before{
  65.   content: "";
  66.   position: absolute;
  67.   left: -2rpx;
  68.   top: 4rpx;
  69.   width: 30rpx;
  70.   height: 24rpx;
  71.   background-size: cover;
  72.   background-image: url("data:image/jpeg;base64,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");
  73. }
  74.

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

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

  

闽ICP备14008679号