目录
一.编写对网易云音乐api发起请求的代码
二.编写视频项(组件)
三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现])
四.编写视频详情页
成品图:
准备工作:
——在pages下新建两个page(index,video_detail)mv首页和视频详情
——在根目录下创建components,并在其中创建一个component(video-item)视频项
——在根目录下创建service,并在其中创建api_video.js和index.js,用于对api发起请求
——在utils下创建format.wxs,用于数据格式的转换【下附format的代码】
//数据处理
function formatCount(count){var counter = parseInt(count)if(counter > 100000000){return (counter / 100000000).toFixed(1) + "亿"}else if(counter > 10000){return (counter / 10000).toFixed(1) + "万"}else {return counter + ""}
}
//往左边加零
function padLeftZero(time){time = time + ""//先在前面加两个0,然后从字符串长度位开始截取return ("00" + time).slice(time.length)
}
//时间转换
function formatDuration(duration)
{//转成秒数duration = duration / 1000//取整数部分,除以60得到分钟数var minute = Math.floor(duration / 60)//取余数部分的秒数var second = Math.floor(duration % 60)return padLeftZero(minute) + ":" + padLeftZero(second)
}
module.exports = {formatCount:formatCount,formatDuration:formatDuration
}
——在根目录下创建images,并在其中创建bannar,用于轮播图的展示【下附图片】
一.编写对网易云音乐api发起请求的代码
①service/index.js
const BASE_URL = "https://autumnfish.cn" //网易云音乐api接口,如果接口失效了,可以百度重新搜索一个进行替换,或者在本地开一个api服务器也行.
//创建一个类,赋予它请求接口的方式
class MusicRequest{request(url,method,params){return new Promise((resolve,reject)=>{wx.request({url: BASE_URL+url,data:params,method:method,success:res=>resolve(res.data),fail:err=>reject(err)})})}get(url,params){return this.request(url,"GET",params)}post(url,params){return this.request(url,"POST",params)}
}
//向外抛出一个对象
export default new MusicRequest();
②service/api_video.js
import musicRequest from './index';//获取热门视频
export function getTopMV(offset,limit=10){return musicRequest.get("/top/mv",{offset,limit})
}//获取视频地址
export function getMVURL(id){return musicRequest.get("/mv/url",{id})
}//获取视频详情信息
export function getMVDetail(id){return musicRequest.get("/mv/detail",{mvid:id})
}//获取其他相关的视频
export function getRelatedVideo(id){return musicRequest.get("/related/allvideo",{id})
}
二.编写视频项(组件)
①components/video-item/index.wxml
<!--components/video-item/index.wxml-->
<wxs src="../../utils/format.wxs" module="format"/>
<view class="item"><view class="album"><image class="image" src="{{item.cover}}" mode="widthFix" /><view class="info"><view class="count">{{format.formatCount(item.playCount)}}</view><view class="duration">{{format.formatDuration(item.mv.videos[0].duration)}}</view></view></view><view class="content">{{item.name}} - {{item.artistName}}</view>
</view>
②components/video-item/index.js (这里主要接收外部传进组件的数据item)
// components/video-item/index.js
Component({/*** 组件的属性列表*/properties: {item:Object},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})
③components/video-item/index.wxss
.item{width: 100%;
}
.album{position: relative;border-radius: 12rpx;overflow: hidden;display: flex;
}
.image{width: 100%;
}
.album .info{width: 100%;position: absolute;bottom: 10rpx;color: white;display: flex;justify-content: space-between;font-size: 24rpx;padding: 0 10rpx;
}
.info .count{padding-left: 36rpx;position: relative;
}
.info .duration{padding-right: 18rpx;
}
.info .count::before{content: "";position: absolute;left: -2rpx;top: 4rpx;width: 30rpx;height: 24rpx;background-size: cover;background-image: url("data:image/jpeg;base64,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");
}
.content{margin-top: 10rpx;font-size: 28rpx;/*显示两行,超出部分使用省略号显示*/text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -moz-box;-moz-line-clamp: 2;-moz-box-orient: vertical;word-wrap: break-word;word-break: break-all;white-space: normal;overflow: hidden;
}
三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现])
①pages/index/index.js
import {getTopMV} from '../../service/api_video'
Page({/*** 页面的初始数据*/data: {MVData:[],//视频列表信息hasMore:true,//是否还有更多swiperHeight:"",//轮播图的高度orignIndex:Math.floor(Math.random()*30),//从[0,30)中取任意一个小数(向下取整)作为初始点orignCount:10,//每次请求获取10条数据},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getTopMVData(this.data.orignIndex)console.log("初始点:"+this.data.orignIndex);},
/*** 由于载入图片之后,无法与swiper同高,所以加入下面的逻辑 * bindload载入时触发,获取载入图片之后dom的矩形信息==>* wx.createSelectorQuery().select(".swiper-image").boundingClientRect();* 如果是e.detail.height就是原图片的高度,性质不同。*/queryRect:function(e) {let $this = this;const query = wx.createSelectorQuery();query.select(".swiper-image").boundingClientRect();query.exec(res=>{$this.setData({swiperHeight:res[0].height+"px"})})},//点击视频跳入详情页videoItemClick:function(e) {//获取当前视频的idconst id = e.currentTarget.dataset.id//navigateTo会保留当前页面,并跳转到下个页面wx.navigateTo({url: '/pages/video_detail/index?id='+id,})},getTopMVData:async function(offset,str) {//如果是上拉,并且当前数据组的下次请求没有更多的数据了,则终止请求if(str === "reachbottom" && !this.data.hasMore) return// 获取从某个点开始的视频列表const res = await getTopMV(offset)// 获取当前的视频列表let newData = this.data.MVData// 如果是下拉刷新,直接覆盖视频列表if(str==="pulldown") {console.log("下拉了");newData = res.data}else{newData = newData.concat(res.data)}// 如果是上拉获取更多视频,则将新旧列表进行拼接// 更新视频列表,以及请求获取视频列表之后是否还有更多数据的判断变量this.setData({MVData:newData,hasMore: res.hasMore //是否还有更多})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {//下拉刷新->随机刷新视频列表的初始点let orignIndex = Math.floor(Math.random()*30)this.setData({orignIndex})console.log("刷新后:"+this.data.orignIndex);this.getTopMVData(orignIndex,"pulldown")},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {//上拉获取更多数据->在原本的初始点上+当前视频列表的长度来作为此次请求的初始点this.getTopMVData(this.data.orignIndex+this.data.MVData.length,"reachbottom")},})
②pages/index/index.json (这里要引入组件以及启动page的下拉触发函数)
{"enablePullDownRefresh": true,"backgroundTextStyle": "dark","usingComponents": {"video-item":"/components/video-item/index"}
}
③pages/index/index.wxml
<swiper class="swiper" autoplay indicator-dots circular interval="{{2000}}" style="height: {{swiperHeight}};"><block wx:for="{{[1,2,3,4,5,6,7]}}" wx:key="index"><swiper-item class="swiper-item"><image class="swiper-image" bindload="queryRect" src="/images/bannar/{{item}}.jpg" mode="widthFix" /></swiper-item></block>
</swiper>
<view class="video"><view class="item" wx:for="{{MVData}}" wx:key="index"><video-item item="{{item}}" data-id="{{item.id}}" bindtap="videoItemClick"></video-item></view>
</view>
④pages/index/index.wxss
page{padding: 0 20rpx;
}
.swiper{width: 95%;border-radius: 10rpx;overflow: hidden;transform: translateY(0);
}
.swiper-image{width: 100%;
}
.video{margin-top: 20rpx;width: 95%;display: flex;flex-wrap: wrap;justify-content: space-between;
}
.item{width: 48%;margin-top: 20rpx;
}
四.编写视频详情页
①pages/video_detail/index.js
// pages/video_detail/index.js
import {getMVDetail,getMVURL,getRelatedVideo} from '../../service/api_video'
Page({/*** 页面的初始数据*/data: {mvInfo:{},url:"",relatedData:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {//获取跳转时传入的idvar id = options.idthis.getMVData(id)},getMVData:function(id){getMVDetail(id).then(res=>{this.setData({mvInfo:res.data})})getMVURL(id).then(res=>{this.setData({url:res.data.url})})getRelatedVideo(id).then(res=>{this.setData({relatedData:res.data})})console.log(this);},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
②pages/video_detail/index.wxml
<!--pages/video_detail/index.wxml-->
<wxs src="../../utils/format.wxs" module="format"/>
<video src="{{url}}" class="video"></video>
<view class="detail"><view class="name">{{mvInfo.name}}</view><view class="singer">{{mvInfo.artistName}}</view><view class="info">{{format.formatCount(mvInfo.playCount)}}播放-{{mvInfo.publishTime}}</view>
</view>
<view class="related"><view wx:for="{{relatedData}}" class="item" wx:key="index"><view class="image"><image src="{{item.coverUrl}}" mode=""/><view class="imageInfo"><view class="count">{{format.formatCount(item.playTime)}}</view></view></view><view class="relatedInfo"><view class="title">{{item.title}}</view><view class="user"><block wx:for="{{item.creator}}" wx:key="index">{{item.userName}}<block wx:if="{{!index==item.creator.length}}">/</block></block></view></view></view>
</view>
③pages/video_detail/index.wxss
/* pages/video_detail/index.wxss */
.video{width: 100%;
}
.detail{margin: 20rpx 0 90rpx 50rpx;
}
.detail .name{font-weight: bold;
}
.detail .singer{font-size: 13px;margin: 10rpx 0; color: gray;
}
.detail .info{font-size: 13px;color: gray;
}
.related{margin: 0 50rpx;
}
.item{display: flex;margin-bottom: 20rpx;width: 100%;
}
.item .image{width: 40%;height: 150rpx;margin-right: 20rpx;position: relative;
}
.item image{width: 100%;height: 100%;border-radius: 5px;
}
.item .relatedInfo{width: 58%;
}
.item .relatedInfo .title{font-size: 15px;
}
.item .relatedInfo .user{font-size: 12px;margin-top: 20rpx;color: gray;
}
.imageInfo {width: 100%;position: absolute;bottom: 10rpx;color: white;display: flex;justify-content: flex-end;font-size: 24rpx;
}
.imageInfo .count{padding-left: 36rpx;padding-right: 10rpx;position: relative;
}
.imageInfo .count::before{content: "";position: absolute;left: -2rpx;top: 4rpx;width: 30rpx;height: 24rpx;background-size: cover;background-image: url("data:image/jpeg;base64,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");
}