同步操作将从 长江丶/Netease-music 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
omix(小程序全局状态管理框架,类 vuex)
flyio(http 请求库)
wxs(小程序的一套脚本语言) https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
Vant Weapp(小程序UI组件库)
area.js(省市区列表数据)
...
wxs实现过滤器效果
//创建wxs文件,包含定义与输出
var DateFr = {
getDate: function (time) {
if (!time) return '';
var date = getDate(time);
var M = date.getMonth() + 1;
var y = date.getFullYear();
var d = date.getDate();
if (M < 10) M = "0" + M;
if (d < 10) d = "0" + d;
return y + '.' + M + '.' + d;
},
}
module.exports = {
getTime: DateFr.getTime
}
//在你要使用的界面中用wxs标签引入刚才定义的过滤器
<wxs module="DateFr" src="wxs文件路径"></wxs>
//使用过滤器
DateFr.getTime(需要过滤的数据)
背景音乐的播放、监听及其他操作
设置音乐管理器
//利用wx.getBackgroundAudioManager()来获取小程序的后台音乐管理器
const bgm = wx.getBackgroundAudioManager()
//此时,bgm这个实例就可以用来控制后台音乐管理器
bgm.title = playNow.title
bgm.epname = playNow.epname
bgm.singer = playNow.singer
bgm.coverImgUrl = playNow.coverImgUrl
bgm.src = playNow.src//当src设置之后音乐管理器就直接开始播放音乐
监听管理器
//监听自然播放结束
bgm.onEnded(() => {this.playNext()})
//监听用户触发下一曲按钮
bgm.onNext(() => {this.playNext()})
//监听用户触发上一曲按钮
bgm.onPrev(() => {this.playPrev()})
//监听用户触发播放按钮
bgm.onPlay(() => {this.setData({play: true})})
//监听用户触发停止按钮
bgm.onPause(() => {this.setData({play: false})})
//监听音乐播放进度
bgm.onTimeUpdate(() => {
可使用bgm.duration等获取当前歌曲的长度和播放状态
})
拉取进度条
//利用.seek()的方法可以设置拉取进度条的效果
bgm.seek(位置)
事件操作与动画之间的同步
//利用背景音乐管理器的onTimeUpdate监听来控制动画,当打开监听时就触发动画,由于动画是循环动画,设置了定时器,所以可以在监听中使用
!bgm.paused && !this.data.timer ? this.goAnimation() : ''
//如果定时器不存在并且歌曲正在播放,则触发动画
var cdmove = wx.createAnimation({
duration: 500,
timingFunction: 'linear'
});
var controlMove = wx.createAnimation({
duration: 500,
timingFunction: 'linear',
transformOrigin: '20.93% 22.37% 0'
});
let n = this.data.n
//定时器获取状态并控制动画
let timer = setInterval(() => {
if (this.data.play) {
cdmove.rotate(n * 20).step();
controlMove.rotate(-10).step();
this.setData({
cdmove: cdmove.export(),
controlMove: controlMove.export(),
n: n
})
n++
} else {
clearInterval(timer)
controlMove.rotate(-40).step();
this.setData({
controlMove: controlMove.export(),
timer: null
})
}
}, 500)
//控制cd与操作杆移动并输出
cdmove.rotate(n * 20).step();
controlMove.rotate(-10).step();
this.setData({
cdmove: cdmove.export(),
controlMove: controlMove.export(),
timer: timer
})
播放列表管理
由于是背景音乐管理,所以列表存放于全局,本项目使用的是omix,类似于vue的vuex;当有歌曲加入列表,就立即存放在omix的store中,此时就可以用全局mini播放器或者播放页面来管理。
//playlist为播放列表,playIndex为当前播放歌曲的序列号
//实现单体删除功能
let playIndex = this.store.data.playIndex
let playlist = this.store.data.playlist
this.store.data.playlist = playlist.filter(item => item.id !== e.currentTarget.dataset.id)
playIndex > e.currentTarget.dataset.index ? this.store.data.playIndex = playIndex - 1 : ''
//全体删除(首先停止音乐播放,清空omix中存放的数据)
this.store.data.bgm.stop()
this.store.data.bgm = null
this.store.data.playIndex = 0
this.store.data.playlist = []
scroll-view的运用(锚点跳转和滚动时的界面效果变换)
scroll-view提供了几种跳转方式,本项目主要运用scroll-up与scroll-into-view
//wxml中给两个属性设置变量
scroll-up={{scrollUp}} scroll-into-view={{toId}}
//触发事件给scrollUp赋值(距离scroll-view顶部的高度)
//toId赋值(需要跳转到的元素的id名称)
自定义导航栏的位置大小设置
//JSON文件设置自定义导航栏
"navigitionStyle":"custom"
//利用getSystemInfo来调取statusBar的高度和屏幕高度,方便后期制作页面滚动效果
wx.getSystemInfo({
success (res) {
res.statusBarHeight,
res.screenHeight,
}
})
//获取到statusBar后可以设置导航栏的位置和大小,高度为44px,距离顶部statusBarHeight
//设置fixed定位和z-index提高层级可保持自定义导航栏的头部置顶
滚动触发的效果不佳 图片资源过大,filter:blur占用资源巨大,导致详情页滚动时的效果触发有延时。 没有办法,只能减少滤镜的使用,开发者工具会出现滚动延时,但真机测试正常。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。