parent
acaa36edc9
commit
d33d0e9e39
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* Eslint config file
|
||||
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||
* Install the Eslint extension before using this feature.
|
||||
*/
|
||||
module.exports = {
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
ecmaFeatures: {
|
||||
modules: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
},
|
||||
globals: {
|
||||
wx: true,
|
||||
App: true,
|
||||
Page: true,
|
||||
getCurrentPages: true,
|
||||
getApp: true,
|
||||
Component: true,
|
||||
requirePlugin: true,
|
||||
requireMiniProgram: true,
|
||||
},
|
||||
// extends: 'eslint:recommended',
|
||||
rules: {},
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
// app.js
|
||||
App({
|
||||
onLaunch() {
|
||||
// 展示本地存储能力
|
||||
const logs = wx.getStorageSync('logs') || []
|
||||
logs.unshift(Date.now())
|
||||
wx.setStorageSync('logs', logs)
|
||||
|
||||
// 登录
|
||||
wx.login({
|
||||
success: res => {
|
||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||
}
|
||||
})
|
||||
},
|
||||
globalData: {
|
||||
userInfo: null
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "Weixin",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
},
|
||||
"style": "v2",
|
||||
"componentFramework": "glass-easel",
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"lazyCodeLoading": "requiredComponents",
|
||||
"requiredBackgroundModes": ["audio"]
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/**app.wxss**/
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 200rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 31 KiB |
@ -0,0 +1,144 @@
|
||||
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
|
||||
function formatTime(time){
|
||||
var minute=Math.floor(time/60)%60;
|
||||
var second=Math.floor(time)%60
|
||||
return(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second)
|
||||
}
|
||||
|
||||
|
||||
Page({
|
||||
data:{
|
||||
item:0,
|
||||
tab:0,
|
||||
|
||||
playlist:[{
|
||||
id:1,
|
||||
title:'祝你生日快乐',
|
||||
singer:'小丽',
|
||||
src:'http://127.0.0.1:3000/1.mp3',
|
||||
coverImgUrl:'/images/cover.jpg'
|
||||
},{
|
||||
id:2,
|
||||
title:'劳动最光荣',
|
||||
singer:'小朋',
|
||||
src:'http://127.0.0.1:3000/2.mp3',
|
||||
coverImgUrl:'/images/cover.jpg'
|
||||
},{
|
||||
id:3,
|
||||
title:'龙的传人',
|
||||
singer:'小华',
|
||||
src:'http://127.0.0.1:3000/3.mp3',
|
||||
coverImgUrl:'/images/cover.jpg'
|
||||
},{
|
||||
id:4,
|
||||
title:'小星星',
|
||||
singer:'小红',
|
||||
src:'http://127.0.0.1:3000/4.mp3',
|
||||
coverImgUrl:'/images/cover.jpg'
|
||||
}],
|
||||
|
||||
state:'running',
|
||||
playIndex:0,
|
||||
play:{
|
||||
currentTime:'00:00',
|
||||
duration:'00:00',
|
||||
percent:0,
|
||||
title:'',
|
||||
singer:'',
|
||||
coverImgUrl:'/images/cover.jpg',
|
||||
}
|
||||
},
|
||||
|
||||
changeItem:function(e){
|
||||
this.setData({
|
||||
item:e.target.dataset.item
|
||||
})
|
||||
},
|
||||
|
||||
changeTab:function(e){
|
||||
this.setData({
|
||||
tab:e.datail.current
|
||||
})
|
||||
},
|
||||
|
||||
audioBam:null,
|
||||
onReady: function () {
|
||||
this.audioBam=wx.getBackgroundAudioManager()
|
||||
this.setMusic(0)
|
||||
this.audioBam.onError(()=>{
|
||||
console.log('播放失败：'+this.audioBam.src)
|
||||
})
|
||||
this.audioBam.onEnded(()=>{
|
||||
this.next()
|
||||
})
|
||||
var updateTime=0
|
||||
this.audioBam.onTimeUpdate(()=>{
|
||||
var currentTime=parseInt(this.audioBam.currentTime)
|
||||
if(!this.sliderChangeLock&¤tTime!==updateTime){
|
||||
updateTime=currentTime
|
||||
this.setData({
|
||||
'play.duration':formatTime(this.audioBam.duration||0),
|
||||
'play.currentTime':formatTime(currentTime),
|
||||
'play.percent':currentTime/this.audioBam.duration*100
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
setMusic:function(index){
|
||||
var music=this.data.playlist[index]
|
||||
this.audioBam.src=music.src
|
||||
this.audioBam.title=music.title
|
||||
this.setData({
|
||||
playIndex:index,
|
||||
'play.title':music.title,
|
||||
'play.singer':music.singer,
|
||||
'play.coverImgUrl':music.coverImgUrl,
|
||||
'play.currentTime':'00:00',
|
||||
'play.duration':'00:00',
|
||||
'play.percent':0,
|
||||
state:'running'
|
||||
})
|
||||
},
|
||||
|
||||
play:function(){
|
||||
this.audioBam.play()
|
||||
this.setData({
|
||||
state:'running'
|
||||
})
|
||||
},
|
||||
|
||||
pause:function(){
|
||||
this.audioBam.pause()
|
||||
this.setData({
|
||||
state:'paused'
|
||||
})
|
||||
},
|
||||
|
||||
next:function(){
|
||||
var index=this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
|
||||
this.setMusic(index)
|
||||
},
|
||||
|
||||
sliderChangeLock:false,
|
||||
sliderChanging:function(e){
|
||||
var second=e.detail.value*this.audioBam.duration/100
|
||||
this.sliderChangeLock=true
|
||||
this.setData({
|
||||
'play.currentTime':formatTime(second),
|
||||
})
|
||||
},
|
||||
sliderChange:function(e){
|
||||
var second=e.detail.value*this.audioBam.duration/100
|
||||
this.audioBam.seek(second)
|
||||
setTimeout(()=>{
|
||||
this.sliderChangeLock=false
|
||||
},1000)
|
||||
},
|
||||
|
||||
change:function(e){
|
||||
this.setMusic(e.currentTarget.dataset.index)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "音乐",
|
||||
"navigationBarBackgroundColor": "#17181a",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
<!--index.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组件实现标签页切换 -->
|
||||
<swiper current="{{ item }}" bindchange="changeTab">
|
||||
<swiper-item>
|
||||
<!-- 音乐推荐 -->
|
||||
<include src="info.wxml" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<!-- 播放器 -->
|
||||
<include src="play.wxml" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<!-- 播放列表 -->
|
||||
<include src="playlist.wxml" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 底部播放器区域 -->
|
||||
<view class="player">
|
||||
<image class="player-cover" src="{{ play.coverImgUrl }}" data-item="1" bindtap="changeItem" />
|
||||
<view class="player-info">
|
||||
<view class="player-info-title" data-item="1" bindtap="changeItem">{{ play.title }}</view>
|
||||
<view class="player-info-singer" data-item="1" bindtap="changeItem">{{ play.singer }}</view>
|
||||
</view>
|
||||
<view class="player-controls">
|
||||
<!-- 切换到播放列表 -->
|
||||
<image src="/images/01.png" data-item="2" bindtap="changeItem" />
|
||||
<!-- 播放/暂停 -->
|
||||
<image wx:if="{{ state == 'paused' }}" src="/images/02.png" bindtap="play" />
|
||||
<image wx:else="" src="/images/02stop.png" bindtap="pause" />
|
||||
<!-- 下一曲 -->
|
||||
<image src="/images/03.png" bindtap="next" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-play-progress">
|
||||
<text>{{play.currentTime}}</text>
|
||||
<view>
|
||||
<slider bindchanging="sliderChanging" bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
|
||||
</view>
|
||||
<text>{{play.duration}}</text>
|
||||
</view>
|
||||
|
||||
@ -0,0 +1,236 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content>swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.player {
|
||||
background: #222;
|
||||
border-top: 1px solid #252525;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #c25b5b;
|
||||
border-bottom-color: #c25b5b;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
/* 功能按钮 */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 热门音乐 */
|
||||
|
||||
.content-info-list {
|
||||
font-size: 11pt;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.content-info-list>.list-title {
|
||||
margin: 20rpx 35rpx;
|
||||
}
|
||||
|
||||
.content-info-list>.list-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.content-info-list>.list-inner>.list-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-info-list>.list-inner>.list-item>image {
|
||||
display: block;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #555;
|
||||
}
|
||||
|
||||
.content-info-list>.list-inner>.list-item>view {
|
||||
width: 200rpx;
|
||||
margin: 10rpx auto;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
/* 播放器 */
|
||||
|
||||
.content-play {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-play-info>view {
|
||||
color: #888;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
/* 底部播放器 */
|
||||
|
||||
.player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #222;
|
||||
border-top: 1px solid #252525;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.player-cover {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-left: 15rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
line-height: 38rpx;
|
||||
margin-left: 20rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.player-info-singer {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.player-controls image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
/* 显示专辑页面样式 */
|
||||
|
||||
.content-play-cover image {
|
||||
animation: rotateImage 10s linear infinite;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
@keyframes rotateImage {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 播放进度和时间 */
|
||||
|
||||
.content-play-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 35rpx;
|
||||
font-size: 9pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-play-progress>view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 播放列表 */
|
||||
|
||||
.playlist-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #333;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.playlist-cover {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-left: 15rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
line-height: 38rpx;
|
||||
margin-left: 20rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.playlist-info-singer {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.playlist-controls {
|
||||
font-size: 10pt;
|
||||
margin-right: 20rpx;
|
||||
color: #c25b5b;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<scroll-view scroll-y class="content-info">
|
||||
<view style="height: 1000px;background: #fff;"></view>
|
||||
<view style="background: #ccc;color: red;">到达底部</view>
|
||||
</scroll-view>
|
||||
@ -0,0 +1,23 @@
|
||||
<view style="background: #ccc; height: 100%; color: #000;">
|
||||
|
||||
<view class="content-play">
|
||||
<!-- 音乐信息 -->
|
||||
<view class="content-play-info">
|
||||
<text>{{ play.title }}</text>
|
||||
<view>—— {{ play.singer }} ——</view>
|
||||
</view>
|
||||
<!-- 专辑封面 -->
|
||||
<view class="content-play-cover">
|
||||
<image src="{{ play.coverImgUrl }}" style="animation-play-state:{{ state }}" />
|
||||
</view>
|
||||
<!-- 播放进度和时间 -->
|
||||
<view class="content-play-progress">
|
||||
<text>{{ play.currentTime }}</text>
|
||||
<view>
|
||||
<slider bindchanging="sliderChanging" bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{ play.percent }}" />
|
||||
</view>
|
||||
<text>{{ play.duration }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@ -0,0 +1,16 @@
|
||||
<view style="background: #ccc; height: 100%; color: #000;">
|
||||
|
||||
<scroll-view class="content-playlist" scroll-y>
|
||||
<view class="playlist-item" wx:for="{{ playlist }}" wx:key="id" bindtap="change" data-index="{{ index }}">
|
||||
<image class="playlist-cover" src="{{ item.coverImgUrl }}" />
|
||||
<view class="playlist-info">
|
||||
<view class="playlist-info-title">{{ item.title }}</view>
|
||||
<view class="playlist-info-singer">{{ item.singer }}</view>
|
||||
</view>
|
||||
<view class="playlist-controls">
|
||||
<text wx:if="{{ index == playIndex }}">正在播放</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
@ -0,0 +1,28 @@
|
||||
{
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "trial",
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"setting": {
|
||||
"coverView": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"enhance": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"packNpmRelationList": [],
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
}
|
||||
},
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "auto",
|
||||
"tabSize": 2
|
||||
},
|
||||
"appid": "wx88d20e697c125c57"
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
const formatTime = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
|
||||
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
|
||||
}
|
||||
|
||||
const formatNumber = n => {
|
||||
n = n.toString()
|
||||
return n[1] ? n : `0${n}`
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime
|
||||
}
|
||||
Loading…
Reference in new issue