Initial Commit

6 months ago · b5cac3c60c
commit b5cac3c60c
24 changed files with 647 additions and 0 deletions
--- a/.eslintrc.js
+++ 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: {},
 }
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,14 @@
 # Windows
 [Dd]esktop.ini
 Thumbs.db
 $RECYCLE.BIN/
 # macOS
 .DS_Store
 .fseventsd
 .Spotlight-V100
 .TemporaryItems
 .Trashes
 # Node.js
 node_modules/
--- a/app.js
+++ b/app.js
@ -0,0 +1,2 @@
 // app.js
 App({})
--- a/app.json
+++ b/app.json
@ -0,0 +1,14 @@
 {
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "requiredBackgroundModes": ["audio"],
    "style": "v2",
    "sitemapLocation": "sitemap.json"
 }
--- a/app.wxss
+++ 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;
 } 
--- a/images/01.png
+++ b/images/01.png
--- a/images/02.png
+++ b/images/02.png
--- a/images/02stop.png
+++ b/images/02stop.png
--- a/images/03.png
+++ b/images/03.png
--- a/images/04.png
+++ b/images/04.png
--- a/images/05.png
+++ b/images/05.png
--- a/images/06.png
+++ b/images/06.png
--- a/images/banner.jpg
+++ b/images/banner.jpg
--- a/images/cover.jpg
+++ b/images/cover.jpg
--- a/pages/index/index.js
+++ b/pages/index/index.js
@ -0,0 +1,149 @@
 // index.js
 // 格式化时间
 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
    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',
    }
  },
  // 在页面初次渲染时，自动选择播放列表中的第1个曲目
  audioBam: null,
  sliderChangeLock: false,
  onReady: function () {
    this.audioBam = wx.getBackgroundAudioManager()
    // 默认选择第1曲
    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 && currentTime !== updateTime) { // // 将更新频率限制在1秒1次
        updateTime = currentTime
        this.setData({
          'play.duration': formatTime(this.audioBam.duration || 0),
          'play.currentTime': formatTime(currentTime),
          'play.percent': currentTime / this.audioBam.duration * 100
        })
      }
    })
  },
  sliderChange: function (e) {
    var second = e.detail.value * this.audioBam.duration / 100
    this.audioBam.seek(second)
    setTimeout(() => {
      this.sliderChangeLock = false
    }, 1000)
  },
  sliderChanging: function (e) {
    var second = e.detail.value * this.audioBam.duration / 100
    this.sliderChangeLock = true
    this.setData({
      'play.currentTime': formatTime(second),
    })
  },
  // 设置当前播放的曲目
  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' // 新增
    })
  },
  changeItem: function (e) {
    this.setData({
      item: e.target.dataset.item
    })
  },
  changeTab: function (e) {
    this.setData({
      tab: e.detail.current
    })
  },
  play: function () {
    this.audioBam.play()
    this.setData({
      state: 'running'
    })
    console.log(this.data.state) // running
  },
  pause: function () {
    this.audioBam.pause()
    this.setData({
      state: 'paused'
    })
    console.log(this.data.state) // paused
  },
  // 点击播放下一曲的操作
  next: function () {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    console.log(this.data.state)
    // if (this.data.state === 'running') {
      // this.play()
    // }
  },
  // 点击播放列表中的某一项时进行该曲目的播放
  change: function (e) {
    this.setMusic(e.currentTarget.dataset.index)
    // this.play()
  }
 })
--- a/pages/index/index.json
+++ b/pages/index/index.json
@ -0,0 +1,5 @@
 {
  "navigationBarTitleText": "音乐",
  "navigationBarBackgroundColor": "#17181a",
  "navigationBarTextStyle": "white"
 }
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@ -0,0 +1,42 @@
 <!--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>
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@ -0,0 +1,237 @@
 /**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;
 }
--- a/pages/index/info.wxml
+++ b/pages/index/info.wxml
@ -0,0 +1,54 @@
 <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>
--- a/pages/index/play.wxml
+++ b/pages/index/play.wxml
@ -0,0 +1,19 @@
 <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>
--- a/pages/index/playlist.wxml
+++ b/pages/index/playlist.wxml
@ -0,0 +1,12 @@
 <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>
--- a/project.config.json
+++ b/project.config.json
@ -0,0 +1,43 @@
 {
  "appid": "touristappid",
  "compileType": "miniprogram",
  "libVersion": "2.25.3",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "urlCheck": true,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "autoAudits": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "packNpmManually": false,
    "minifyWXSS": true,
    "useStaticServer": true,
    "showES6CompileOption": false,
    "checkInvalidKey": true,
    "disableUseStrict": false,
    "useCompilerPlugins": false,
    "minifyWXML": true
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  },
  "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
 }
--- a/project.private.config.json
+++ b/project.private.config.json
@ -0,0 +1,8 @@
 {
  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
  "projectname": "%E3%80%90%E6%A1%88%E4%BE%8B4-1%E3%80%91%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8",
  "setting": {
    "compileHotReLoad": true
  },
  "libVersion": "2.10.4"
 }
--- a/sitemap.json
+++ b/sitemap.json
@ -0,0 +1,7 @@
 {
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    "rules": [{
    "action": "allow",
    "page": "*"
    }]
 }