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.json b/app.json new file mode 100644 index 0000000..e871a42 --- /dev/null +++ b/app.json @@ -0,0 +1,9 @@ +{ + "pages": [ + "pages/index/index", + "pages/test/index", + "pages/test/swiper", + "pages/test/test" + ], + "sitemapLocation": "sitemap.json" +} \ No newline at end of file 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/Krt.png b/images/Krt.png new file mode 100644 index 0000000..64add66 Binary files /dev/null and b/images/Krt.png differ diff --git a/images/queen.png b/images/queen.png new file mode 100644 index 0000000..88f5a39 Binary files /dev/null and b/images/queen.png differ diff --git a/pages/index/index.js b/pages/index/index.js new file mode 100644 index 0000000..43cea78 --- /dev/null +++ b/pages/index/index.js @@ -0,0 +1,122 @@ +// index.js +Page({ + data: { + item: 0, + tab: 0, + playlist: [ + { + id: 1, + title: '热河', + singer: '李志', + src: 'http://localhost/1.mp3', + coverImgUrl: '/images/Krt.png' + }, + { + id: 2, + title: '这个世界会好吗', + singer: '李志', + src: 'http://localhost/2.mp3', + coverImgUrl: '/images/Krt.png' + }, + { + id: 3, + title: '关于郑州的记忆', + singer: '李志', + src: 'http://localhost/1.mp3', + coverImgUrl: '/images/Krt.png' + }, + { + id: 4, + title: '妈妈', + singer: '李志', + src: 'http://localhost/2.mp3', + coverImgUrl: '/images/Krt.png' + } + ], + state: 'paused', + playIndex: 0, + play: { + currentTime: '00:00', + duration: '00:00', + percent: 0, + title: '', + singer: '', + coverImgUrl: '/images/Krt.png', + } + }, + changeItem: function(e) { + this.setData({ + item: e.target.dataset.item, + }) + }, + changeTab: function(e) { + this.setData({ + tab: e.detail.current + }) + }, + audioCtx: null, + onReady: function() { + this.audioCtx = wx.createInnerAudioContext() + 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..bc7665f --- /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..144d010 --- /dev/null +++ b/pages/index/index.wxml @@ -0,0 +1,33 @@ + + + 音乐推荐 + 音乐推荐 + 音乐推荐 + + + + + + + + + + + + + + + + + + {{play.title}} + {{play.singer}} + + + + + + + + + \ No newline at end of file diff --git a/pages/index/index.wxss b/pages/index/index.wxss new file mode 100644 index 0000000..7350d8f --- /dev/null +++ b/pages/index/index.wxss @@ -0,0 +1,235 @@ +/**index.wxss**/ +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..78935c6 --- /dev/null +++ b/pages/index/info.wxml @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + 私人FM + + + + 每日歌曲推荐 + + + + 音乐新歌榜 + + + + + 推荐歌曲 + + + + 理想 + + + + 爱爱爱 + + + + 山楂树之恋 + + + + 最长的电影 + + + + 一路向北 + + + + 最后的战役 + + + + diff --git a/pages/index/play.wxml b/pages/index/play.wxml new file mode 100644 index 0000000..3ee9a69 --- /dev/null +++ b/pages/index/play.wxml @@ -0,0 +1,16 @@ + + + {{play.title}} + —— {{play.singer}} —— + + + + + + {{play.currentTime}} + + + + {{play.duration}} + + diff --git a/pages/index/playlist.wxml b/pages/index/playlist.wxml new file mode 100644 index 0000000..0b035ba --- /dev/null +++ b/pages/index/playlist.wxml @@ -0,0 +1,12 @@ + + + + + {{item.title}} + {{item.singer}} + + + 正在播放 + + + \ No newline at end of file diff --git a/pages/test/app.js b/pages/test/app.js new file mode 100644 index 0000000..4af33be --- /dev/null +++ b/pages/test/app.js @@ -0,0 +1,2 @@ +// app.js +App({}) diff --git a/pages/test/index.js b/pages/test/index.js new file mode 100644 index 0000000..fa8df5a --- /dev/null +++ b/pages/test/index.js @@ -0,0 +1,66 @@ +// pages/test/index.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/test/index.wxml b/pages/test/index.wxml new file mode 100644 index 0000000..6dbaf35 --- /dev/null +++ b/pages/test/index.wxml @@ -0,0 +1,2 @@ + +pages/test/index.wxml diff --git a/pages/test/project.config.json b/pages/test/project.config.json new file mode 100644 index 0000000..dbe2494 --- /dev/null +++ b/pages/test/project.config.json @@ -0,0 +1,53 @@ +{ + "description": "项目配置文件", + "packOptions": { + "ignore": [], + "include": [] + }, + "setting": { + "urlCheck": false, + "es6": true, + "enhance": false, + "postcss": true, + "preloadBackgroundData": false, + "minified": true, + "newFeature": true, + "coverView": true, + "nodeModules": false, + "autoAudits": false, + "showShadowRootInWxmlPanel": true, + "scopeDataCheck": false, + "uglifyFileName": false, + "checkInvalidKey": true, + "checkSiteMap": true, + "uploadWithSourceMap": true, + "compileHotReLoad": false, + "useMultiFrameRuntime": true, + "useApiHook": true, + "useApiHostProcess": false, + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "enableEngineNative": false, + "bundle": false, + "useIsolateContext": true, + "useCompilerModule": true, + "userConfirmedUseCompilerModuleSwitch": false, + "userConfirmedBundleSwitch": false, + "packNpmManually": false, + "packNpmRelationList": [], + "minifyWXSS": true, + "condition": false + }, + "compileType": "miniprogram", + "libVersion": "2.4.0", + "appid": "touristappid", + "projectname": "music", + "condition": {}, + "editorSetting": { + "tabIndent": "insertSpaces", + "tabSize": 2 + } +} \ No newline at end of file diff --git a/pages/test/sitemap.json b/pages/test/sitemap.json new file mode 100644 index 0000000..cd24f35 --- /dev/null +++ b/pages/test/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/pages/test/swiper.js b/pages/test/swiper.js new file mode 100644 index 0000000..1a751dd --- /dev/null +++ b/pages/test/swiper.js @@ -0,0 +1,66 @@ +// pages/test/swiper.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/test/swiper.wxml b/pages/test/swiper.wxml new file mode 100644 index 0000000..537743c --- /dev/null +++ b/pages/test/swiper.wxml @@ -0,0 +1,2 @@ + +pages/test/swiper.wxml diff --git a/pages/test/test.js b/pages/test/test.js new file mode 100644 index 0000000..4e8eb34 --- /dev/null +++ b/pages/test/test.js @@ -0,0 +1,37 @@ +// pages/test/test.js +Page({ + + data: { + + }, + + onLoad(options) { + + }, + + onReady() { + + }, + + onShow() { + + }, + onHide() { + + }, + + onUnload() { + + }, + + onPullDownRefresh() { + + }, + + onReachBottom() { + + }, + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/test/test.wxml b/pages/test/test.wxml new file mode 100644 index 0000000..491a444 --- /dev/null +++ b/pages/test/test.wxml @@ -0,0 +1,2 @@ + +pages/test/test.wxml diff --git a/project.private.config.json b/project.private.config.json new file mode 100644 index 0000000..dd50eb3 --- /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": "music", + "setting": { + "compileHotReLoad": true + } +} \ No newline at end of file diff --git a/音乐播放器.png b/音乐播放器.png new file mode 100644 index 0000000..261c0ce Binary files /dev/null and b/音乐播放器.png differ