本次修改的内容为：

.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: {},
+}

README.md

@@ -1,2 +1,2 @@
 # zuoye6
-
+![](./1.jpg)

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
+  }
+})

app.json

@@ -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"]
+}

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;
+} 

pages/index/index.js

@@ -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&&currentTime!==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)
+  }
+
+})
+

pages/index/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "音乐",
+  "navigationBarBackgroundColor": "#17181a",
+  "navigationBarTextStyle": "white"
+}

pages/index/index.wxml

@@ -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>
+

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;
+}

pages/index/info.wxml

@@ -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>

pages/index/play.wxml

@@ -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>

pages/index/playlist.wxml

@@ -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>

project.config.json

@@ -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"
+}

project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "program6",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}

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
+}