diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..115cc02 --- /dev/null +++ b/.eslintrc.js @@ -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: {}, +} diff --git a/app.js b/app.js new file mode 100644 index 0000000..1ed57c4 --- /dev/null +++ b/app.js @@ -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 + } +}) diff --git a/app.json b/app.json new file mode 100644 index 0000000..c565fb9 --- /dev/null +++ b/app.json @@ -0,0 +1,13 @@ +{ + "pages":[ + "pages/index/index" + ], + "window":{ + "backgroundTextStyle":"light", + "navigationBarBackgroundColor": "#fff", + "navigationBarTitleText": "音乐小程序", + "navigationBarTextStyle":"black" + }, + "style": "v2", + "sitemapLocation": "sitemap.json" +} diff --git a/app.wxss b/app.wxss new file mode 100644 index 0000000..06c6fc9 --- /dev/null +++ b/app.wxss @@ -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; +} diff --git a/images/01.png b/images/01.png new file mode 100644 index 0000000..0939fe6 Binary files /dev/null and b/images/01.png differ diff --git a/images/02.png b/images/02.png new file mode 100644 index 0000000..ab554db Binary files /dev/null and b/images/02.png differ diff --git a/images/02stop.png b/images/02stop.png new file mode 100644 index 0000000..be984cd Binary files /dev/null and b/images/02stop.png differ diff --git a/images/03.png b/images/03.png new file mode 100644 index 0000000..9402bfa Binary files /dev/null and b/images/03.png differ diff --git a/images/04.png b/images/04.png new file mode 100644 index 0000000..c446705 Binary files /dev/null and b/images/04.png differ diff --git a/images/05.png b/images/05.png new file mode 100644 index 0000000..6dfd030 Binary files /dev/null and b/images/05.png differ diff --git a/images/06.png b/images/06.png new file mode 100644 index 0000000..51340c3 Binary files /dev/null and b/images/06.png differ diff --git a/images/8(53_1S((UY0C`N81)%VKNY.png b/images/8(53_1S((UY0C`N81)%VKNY.png new file mode 100644 index 0000000..99409d9 Binary files /dev/null and b/images/8(53_1S((UY0C`N81)%VKNY.png differ diff --git a/images/B0T_QEK~F[G9L$Q`1T{4QI6.png b/images/B0T_QEK~F[G9L$Q`1T{4QI6.png new file mode 100644 index 0000000..ba7012f Binary files /dev/null and b/images/B0T_QEK~F[G9L$Q`1T{4QI6.png differ diff --git a/images/M5[0D{]L(M8CRAD`MUOJ$$1.png b/images/M5[0D{]L(M8CRAD`MUOJ$$1.png new file mode 100644 index 0000000..c74f21f Binary files /dev/null and b/images/M5[0D{]L(M8CRAD`MUOJ$$1.png differ diff --git a/images/V%GO_J`2P4E(_(`TY2JENIP.png b/images/V%GO_J`2P4E(_(`TY2JENIP.png new file mode 100644 index 0000000..604cbcb Binary files /dev/null and b/images/V%GO_J`2P4E(_(`TY2JENIP.png differ diff --git a/images/]4$N_UNNP)RO6W`KWI`US5Y.png b/images/]4$N_UNNP)RO6W`KWI`US5Y.png new file mode 100644 index 0000000..89574bc Binary files /dev/null and b/images/]4$N_UNNP)RO6W`KWI`US5Y.png differ diff --git a/images/_~S3@H]A){GCA7XWPA6WVB6.png b/images/_~S3@H]A){GCA7XWPA6WVB6.png new file mode 100644 index 0000000..24bfe97 Binary files /dev/null and b/images/_~S3@H]A){GCA7XWPA6WVB6.png differ diff --git a/images/banner.jpeg b/images/banner.jpeg new file mode 100644 index 0000000..a38c7bc Binary files /dev/null and b/images/banner.jpeg differ diff --git a/images/banner2.jpg b/images/banner2.jpg new file mode 100644 index 0000000..54b9d8b Binary files /dev/null and b/images/banner2.jpg differ diff --git a/images/banner3.png b/images/banner3.png new file mode 100644 index 0000000..330b730 Binary files /dev/null and b/images/banner3.png differ diff --git a/images/cover1.jpg b/images/cover1.jpg new file mode 100644 index 0000000..436c99f Binary files /dev/null and b/images/cover1.jpg differ diff --git a/images/cover2.jpg b/images/cover2.jpg new file mode 100644 index 0000000..aa6e41d Binary files /dev/null and b/images/cover2.jpg differ diff --git a/images/cover3.jpg b/images/cover3.jpg new file mode 100644 index 0000000..9c9ce51 Binary files /dev/null and b/images/cover3.jpg differ diff --git a/images/cover4.jpg b/images/cover4.jpg new file mode 100644 index 0000000..e37384e Binary files /dev/null and b/images/cover4.jpg differ diff --git a/images/cover5.jpg b/images/cover5.jpg new file mode 100644 index 0000000..44dd9bf Binary files /dev/null and b/images/cover5.jpg differ diff --git a/images/cover6.jpg b/images/cover6.jpg new file mode 100644 index 0000000..b2bf353 Binary files /dev/null and b/images/cover6.jpg differ diff --git a/images/~AC$RYY7NB8XEUSPMCRQK%S.png b/images/~AC$RYY7NB8XEUSPMCRQK%S.png new file mode 100644 index 0000000..ae0e339 Binary files /dev/null and b/images/~AC$RYY7NB8XEUSPMCRQK%S.png differ diff --git a/pages/index/index.js b/pages/index/index.js new file mode 100644 index 0000000..543ad99 --- /dev/null +++ b/pages/index/index.js @@ -0,0 +1,143 @@ +Page({ + + /** + * 页面的初始数据 + */ + data: { + item: 0, + tab: 0, + // 播放列表数据 + playlist: [{ + id: 1, + title: '青藏高原', + singer: '韩红', + src: 'http://localhost:3000/1.mp3', + coverImgUrl: '/images/M5[0D{]L(M8CRAD`MUOJ$$1.png' + }, { + id: 2, + title: 'See You Again', + singer: 'Khalifa_Charlie Puth', + src: 'http://localhost:3000/2.mp3', + coverImgUrl: '/images/cover.jpg' + }, { + id: 3, + title: '情字最大', + singer: '平生青崖', + src: 'http://localhost:3000/3.mp3', + coverImgUrl: '/images/cover.jpg' + }, { + id: 4, + title: '半岛铁盒', + singer: '周杰伦', + src: 'http://localhost:3000/4.mp3', + coverImgUrl: '/images/]4$N_UNNP)RO6W`KWI`US5Y.png' + }], + state: 'paused', + 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, + }) + }, + // tab切换 + changeTab: function(e) { + this.setData({ + tab: e.detail.current + }) + }, + + // 实现播放器播放功能 + audioCtx: null, + onReady: function() { + this.audioCtx = wx.createInnerAudioContext() + // 默认选择第1曲 + this.setMusic(0) + 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': formatTime(that.audioCtx.duration), + 'play.currentTime': formatTime(that.audioCtx.currentTime), + 'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100 + }) + }) + // 格式化时间 + 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) + } + }, + // 音乐播放 + setMusic: function(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: function() { + this.audioCtx.play() + this.setData({ + state: 'running' + }) + }, + + // 暂停按钮 + pause: function() { + this.audioCtx.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) + if (this.data.state === 'running') { + this.play() + } + }, + + // 滚动条调节歌曲进度 + sliderChange: function(e) { + var second = e.detail.value * this.audioCtx.duration / 100 + this.audioCtx.seek(second) + }, + + // 播放列表换曲功能 + change: function(e) { + this.setMusic(e.currentTarget.dataset.index) + this.play() + } +}) + diff --git a/pages/index/index.json b/pages/index/index.json new file mode 100644 index 0000000..d8d1a5a --- /dev/null +++ b/pages/index/index.json @@ -0,0 +1,5 @@ +{ + "navigationBarBackgroundColor":"#fff", + "navigationBarTitleText":"音乐", + "navigationBarTextStyle":"black" +} \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml new file mode 100644 index 0000000..cab304b --- /dev/null +++ b/pages/index/index.wxml @@ -0,0 +1,103 @@ + + + + 音乐推荐 + 播放器 + 播放列表 + + + + + + + + + + + + + + + + + + + + + + + + 私人FM + + + + 每日歌曲推荐 + + + + 云音乐新歌榜 + + + + + 推荐歌曲 + + + + 汇电音之经典领电音之奥妙 + + + + + [周杰伦]每首歌曲，都是顶级文案 + + + + + 伤感情歌|不眠夜里的孤单心事 + + + + + [经典]听这些怀旧的歌，体会经典的旋律 + + + + + [粤语经典]漫漫人生路、每到离别总是伤 + + + + + [流行华语]向我们即将逝去的青春致敬 + + + + + + + + + + + + + + + + + + + {{play.title}} + {{play.singer}} + + + + + + + + + + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss new file mode 100644 index 0000000..cda0180 --- /dev/null +++ b/pages/index/index.wxss @@ -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; +} \ No newline at end of file diff --git a/pages/index/info.wxml b/pages/index/info.wxml new file mode 100644 index 0000000..b791be5 --- /dev/null +++ b/pages/index/info.wxml @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + 私人FM + + + + 每日歌曲推荐 + + + + 云音乐新歌榜 + + + + + 推荐歌曲 + + + + 汇电音之经典领电音之奥妙 + + + + + 周杰伦]每首歌曲，都是顶级文案 + + + + 伤感情歌|不眠夜里的孤单心事 + + + + 经典]听这些怀旧的歌，体会经典的旋律 + + + + [粤语经典]漫漫人生路、每到离别总是伤 + + + + [流行华语]向我们即将逝去的青春致敬 + + + + \ No newline at end of file diff --git a/pages/index/play.wxml b/pages/index/play.wxml new file mode 100644 index 0000000..b1ead24 --- /dev/null +++ b/pages/index/play.wxml @@ -0,0 +1,20 @@ + + + + + {{play.title}} + —— {{play.singer}} —— + + + + + + + + {{play.currentTime}} + + + + {{play.duration}} + + \ No newline at end of file diff --git a/pages/index/playlist.wxml b/pages/index/playlist.wxml new file mode 100644 index 0000000..3ec03f9 --- /dev/null +++ b/pages/index/playlist.wxml @@ -0,0 +1,12 @@ + + + + + {{item.title}} + {{item.singer}} + + + 正在播放 + + + \ No newline at end of file diff --git a/project.config.json b/project.config.json new file mode 100644 index 0000000..bf54605 --- /dev/null +++ b/project.config.json @@ -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.25.3", + "appid": "touristappid", + "projectname": "miniprogram-92", + "condition": {}, + "editorSetting": { + "tabIndent": "insertSpaces", + "tabSize": 2 + } +} \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json new file mode 100644 index 0000000..c81cff2 --- /dev/null +++ b/project.private.config.json @@ -0,0 +1,7 @@ +{ + "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "projectname": "miniprogram-13", + "setting": { + "compileHotReLoad": true + } +} \ No newline at end of file diff --git a/sitemap.json b/sitemap.json new file mode 100644 index 0000000..ca02add --- /dev/null +++ b/sitemap.json @@ -0,0 +1,7 @@ +{ + "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", + "rules": [{ + "action": "allow", + "page": "*" + }] +} \ No newline at end of file diff --git a/utils/util.js b/utils/util.js new file mode 100644 index 0000000..764bc2c --- /dev/null +++ b/utils/util.js @@ -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 +}