master
parent
091b25b692
commit
6718985eb4
@ -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,12 @@
|
||||
{
|
||||
"pages":[
|
||||
"pages/index/index",
|
||||
"pages/test/test"
|
||||
],
|
||||
"window":{
|
||||
"backgroundTextStyle":"light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "音乐",
|
||||
"navigationBarTextStyle":"black"
|
||||
}
|
||||
}
|
||||
|
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: 65 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
@ -0,0 +1,118 @@
|
||||
// pages/index/index.js
|
||||
Page({
|
||||
data: {
|
||||
item: 0,
|
||||
tab: 0,
|
||||
playlist: [{
|
||||
id: 1,
|
||||
title: '钢琴演奏曲',
|
||||
singer: '肖邦',
|
||||
src: 'http://localhost:3000/1.mp3',
|
||||
coverImgUrl: '/image/cover.jpg'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '奏鸣曲',
|
||||
singer: '莫扎特',
|
||||
src: 'http://localhost:3000/2.mp3',
|
||||
coverImgUrl: '/image/cover.jpg'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '欢乐颂',
|
||||
singer: '贝多芬',
|
||||
src: 'http://localhost:3000/1.mp3',
|
||||
coverImgUrl: '/image/cover.jpg'
|
||||
}, {
|
||||
id: 4,
|
||||
title: '爱之梦',
|
||||
singer: '李斯特',
|
||||
src: 'http://localhost:3000/1.mp3',
|
||||
coverImgUrl: '/image/cover.jpg'
|
||||
}],
|
||||
state: 'paused',
|
||||
playIndex: 0,
|
||||
play: {
|
||||
currentTime: '00:00',
|
||||
duration: '00:00',
|
||||
percent: 0,
|
||||
title: '',
|
||||
singer: '',
|
||||
coverImgUrl: '/image/cover.jpg'
|
||||
},
|
||||
},
|
||||
changeItem(e) {
|
||||
this.setData({
|
||||
item: e.target.dataset.item
|
||||
})
|
||||
},
|
||||
changeTab(e) {
|
||||
this.setData({
|
||||
tab: e.detail.current
|
||||
})
|
||||
},
|
||||
audioCtx: null,
|
||||
onReady() {
|
||||
this.audioCtx = wx.createInnerAudioContext()
|
||||
var that = this
|
||||
this.audioCtx.onError(function () {
|
||||
console.log('播放失败' + that.audioCtx.src)
|
||||
})
|
||||
this.audioCtx.onEnded(function () {
|
||||
that.next()
|
||||
})
|
||||
this.audioCtx.onPlay(function () {})
|
||||
this.audioCtx.onTimeUpdate(function () {
|
||||
that.setData({
|
||||
'play.duration': fromatTime(that.audioCtx.duration),
|
||||
'play.currentTime': fromatTime(that.audioCtx.currentTime),
|
||||
'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
|
||||
})
|
||||
})
|
||||
this.setMusic(0)
|
||||
|
||||
function fromatTime(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)
|
||||
}
|
||||
},
|
||||
setMusic(index) {
|
||||
var music = this.data.playlist[index]
|
||||
this.audioCtx.src = music.src
|
||||
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
|
||||
})
|
||||
},
|
||||
play() {
|
||||
this.audioCtx.play()
|
||||
this.setData({
|
||||
state: 'running'
|
||||
})
|
||||
},
|
||||
pause() {
|
||||
this.audioCtx.pause()
|
||||
this.setData({
|
||||
state: 'paused'
|
||||
})
|
||||
},
|
||||
next() {
|
||||
var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
|
||||
this.setMusic(index)
|
||||
if (this.data.state === 'running') {
|
||||
this.play()
|
||||
}
|
||||
},
|
||||
sliderChange(e) {
|
||||
var second = e.detail.value * this.audioCtx.duration / 100
|
||||
this.audioCtx.seek(second)
|
||||
},
|
||||
change(e) {
|
||||
this.setMusic(e.currentTarget.dataset.index)
|
||||
this.play()
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,33 @@
|
||||
<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 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}}" />
|
||||
<view class="player-info">
|
||||
<view class="player-info-title">{{play.title}}</view>
|
||||
<view class="player-info-singer">{{play.singer}}</view>
|
||||
</view>
|
||||
<view class="player-controls">
|
||||
<image src="/image/01.png" bindtap="changePage" data-page="2" />
|
||||
<image wx:if="{{state=='paused'}}" src="/image/02.png" bindtap="play" />
|
||||
<image wx:else src="/image/02stop.png" bindtap="pause" />
|
||||
<image src="/image/03.png" bindtap="next" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@ -0,0 +1,217 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #c25b5b;
|
||||
border-bottom: #c25b5b;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content>swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.player {
|
||||
background: #222;
|
||||
border-top: 1px solid #252525;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.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: 20px 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: 1px solid #555;
|
||||
}
|
||||
|
||||
.content-info-list>.list-inner>.list-item>view {
|
||||
width: 200rpx;
|
||||
margin: 10rpx auto;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #222;
|
||||
border-top: 1px solid #252525;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.player-cover {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
line-height: 38rpx;
|
||||
margin-left: 20rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.player-controls image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: 122rpx;
|
||||
}
|
||||
|
||||
.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,56 @@
|
||||
<scroll-view class="content-info" scroll-y>
|
||||
<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
|
||||
<swiper-item>
|
||||
<image src="/image/banner.jpg" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/image/banner.jpg" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/image/banner.jpg" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="content-info-portal">
|
||||
<view>
|
||||
<image src="/image/04.png" />
|
||||
<text>私人FM</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/image/05.png" />
|
||||
<text>每日歌曲推荐</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/image/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="/image/cover.jpg" />
|
||||
<view>紫罗兰</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" />
|
||||
<view>五月之歌</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" />
|
||||
<view>菩提树</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" />
|
||||
<view>欢乐颂</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" />
|
||||
<view>安魂曲</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" />
|
||||
<view>摇篮曲</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -0,0 +1,16 @@
|
||||
<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 bindchange="sliderChange" activeColor="#d333a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
|
||||
</view>
|
||||
<text>{{play.duration}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,14 @@
|
||||
<!-- <view style="background: #eee;color: #000;height: 100%;"> -->
|
||||
<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>
|
||||
<view class="playlist-controls">
|
||||
<text wx:if="{{index==playIndex}}">正在播放</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- </view> -->
|
||||
@ -0,0 +1,7 @@
|
||||
// pages/test/test.js
|
||||
Page({
|
||||
scroll(e)
|
||||
{
|
||||
console.log(e.detail)
|
||||
},
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
<scroll-view scroll-x scorll-y style="height: 200px;" bindscroll="scroll">
|
||||
<view style="width: 200%;height: 400px;background: #ccc;"></view>
|
||||
</scroll-view>
|
||||
<view>缩放模式测试</view>
|
||||
<image style="width: 200px;height: 200px;background: #eee;" mode="scaleToFill" src="/image/test.png"></image>
|
||||
<view>裁剪模式测试</view>
|
||||
<image style="width: 200px;height: 200px;background: #eee;" mode="top" src="/image/test.png"></image>
|
||||
@ -0,0 +1 @@
|
||||
/* pages/test/test.wxss */
|
||||
@ -0,0 +1,52 @@
|
||||
{
|
||||
"description": "项目配置文件",
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"setting": {
|
||||
"bundle": false,
|
||||
"userConfirmedBundleSwitch": false,
|
||||
"urlCheck": true,
|
||||
"scopeDataCheck": false,
|
||||
"coverView": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"compileHotReLoad": false,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"minified": true,
|
||||
"autoAudits": false,
|
||||
"newFeature": false,
|
||||
"uglifyFileName": false,
|
||||
"uploadWithSourceMap": true,
|
||||
"useIsolateContext": true,
|
||||
"nodeModules": false,
|
||||
"enhance": true,
|
||||
"useMultiFrameRuntime": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"packNpmManually": false,
|
||||
"enableEngineNative": false,
|
||||
"packNpmRelationList": [],
|
||||
"minifyWXSS": true,
|
||||
"showES6CompileOption": false,
|
||||
"minifyWXML": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"condition": false
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.19.4",
|
||||
"appid": "wx5815e4d0b33a2993",
|
||||
"projectname": "miniprogram-92",
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "insertSpaces",
|
||||
"tabSize": 2
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
Loading…
Reference in new issue