nav

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

app.json

@@ -0,0 +1,9 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/test/index",
+    "pages/test/swiper",
+    "pages/test/test"
+  ],
+  "sitemapLocation": "sitemap.json"
+}

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

pages/index/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTitleText": "音乐",
+  "navigationBarTextStyle": "black"
+}

pages/index/index.wxml

@@ -0,0 +1,33 @@
+<!--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 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="/images/01.png" bindtap="changePage" data-page="2" />
+    <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>

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

pages/index/info.wxml

@@ -0,0 +1,59 @@
+<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/queen.png"/>
+    </swiper-item>
+    <swiper-item>
+      <image src="/image/queen.png"/>
+    </swiper-item>
+    <swiper-item>
+      <image src="/image/queen.png"/>
+    </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="/image/queen.png"/>
+        <view>理想</view>
+      </view>
+      <view class="list-item">
+        <image src="/image/queen.png"/>
+        <view>爱爱爱</view>
+      </view>
+      <view class="list-item">
+        <image src="/image/queen.png"/>
+        <view>山楂树之恋</view>
+      </view>
+      <view class="list-item">
+        <image src="/image/queen.png"/>
+        <view>最长的电影</view>
+      </view>
+      <view class="list-item">
+        <image src="/image/queen.png"/>
+        <view>一路向北</view>
+      </view>
+      <view class="list-item">
+        <image src="/image/queen.png"/>
+      <view>最后的战役</view>
+      </view>
+    </view>
+  </view>
+</scroll-view>

pages/index/play.wxml

@@ -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>
+    <text>{{play.currentTime}}</text>
+    <view>
+      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="dadada" value="{{play.percent}}"/>
+    </view>
+    <text>{{play.duration}}</text>
+  </view>
+</view>

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>

pages/test/app.js

@@ -0,0 +1,2 @@
+// app.js
+App({})

pages/test/index.js

@@ -0,0 +1,66 @@
+// pages/test/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/test/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/test/index.wxml-->
+<text>pages/test/index.wxml</text>

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

pages/test/sitemap.json

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

pages/test/swiper.js

@@ -0,0 +1,66 @@
+// pages/test/swiper.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/test/swiper.wxml

@@ -0,0 +1,2 @@
+<!--pages/test/swiper.wxml-->
+<text>pages/test/swiper.wxml</text>

pages/test/test.js

@@ -0,0 +1,37 @@
+// pages/test/test.js
+Page({
+
+  data: {
+
+  },
+
+  onLoad(options) {
+
+  },
+
+  onReady() {
+
+  },
+
+  onShow() {
+
+  },
+  onHide() {
+
+  },
+
+  onUnload() {
+
+  },
+
+  onPullDownRefresh() {
+
+  },
+
+  onReachBottom() {
+
+  },
+  onShareAppMessage() {
+
+  }
+})

pages/test/test.wxml

@@ -0,0 +1,2 @@
+<!--pages/test/test.wxml-->
+<text>pages/test/test.wxml</text>

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