diff --git a/app.json b/app.json
new file mode 100644
index 0000000..4c33fbe
--- /dev/null
+++ b/app.json
@@ -0,0 +1,5 @@
+{
+ "pages": [
+ "pages/index/index"
+
+ ]}
\ No newline at end of file
diff --git a/pages/images/01.png b/pages/images/01.png
new file mode 100644
index 0000000..0939fe6
Binary files /dev/null and b/pages/images/01.png differ
diff --git a/pages/images/02.png b/pages/images/02.png
new file mode 100644
index 0000000..ab554db
Binary files /dev/null and b/pages/images/02.png differ
diff --git a/pages/images/02stop.png b/pages/images/02stop.png
new file mode 100644
index 0000000..be984cd
Binary files /dev/null and b/pages/images/02stop.png differ
diff --git a/pages/images/03.png b/pages/images/03.png
new file mode 100644
index 0000000..9402bfa
Binary files /dev/null and b/pages/images/03.png differ
diff --git a/pages/images/04.png b/pages/images/04.png
new file mode 100644
index 0000000..c446705
Binary files /dev/null and b/pages/images/04.png differ
diff --git a/pages/images/05.png b/pages/images/05.png
new file mode 100644
index 0000000..6dfd030
Binary files /dev/null and b/pages/images/05.png differ
diff --git a/pages/images/06.png b/pages/images/06.png
new file mode 100644
index 0000000..51340c3
Binary files /dev/null and b/pages/images/06.png differ
diff --git a/pages/images/banner.jpg b/pages/images/banner.jpg
new file mode 100644
index 0000000..51b93a3
Binary files /dev/null and b/pages/images/banner.jpg differ
diff --git a/pages/images/cover.jpg b/pages/images/cover.jpg
new file mode 100644
index 0000000..ceaac4a
Binary files /dev/null and b/pages/images/cover.jpg differ
diff --git a/pages/images/test.jpg b/pages/images/test.jpg
new file mode 100644
index 0000000..ceaac4a
Binary files /dev/null and b/pages/images/test.jpg differ
diff --git a/pages/index/index.js b/pages/index/index.js
new file mode 100644
index 0000000..ae2ea9c
--- /dev/null
+++ b/pages/index/index.js
@@ -0,0 +1,188 @@
+Page({
+
+ /**
+ * 页面的初始数据
+ */
+ data: {
+ item:0,
+ tab:0,
+ // 播放器列表数据
+ playlist:[{
+ id:1,
+ title:"晴天",
+ singer:'周杰伦',
+ src:'http://localhost:3000/1.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:2,
+ title:"反方向的钟",
+ singer:'周杰伦',
+ src:'http://localhost:3000/2.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:3,
+ title:"兰亭序",
+ singer:'周杰伦',
+ src:'http://localhost:3000/3.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:4,
+ title:"青花瓷",
+ singer:'周杰伦',
+ src:'http://localhost:3000/4.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:5,
+ title:"本草纲目",
+ singer:'周杰伦',
+ src:'http://localhost:3000/4.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:6,
+ title:"爱在西元前",
+ singer:'周杰伦',
+ src:'http://localhost:3000/4.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:7,
+ title:"花海",
+ singer:'周杰伦',
+ src:'http://localhost:3000/4.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:8,
+ title:"半岛铁盒",
+ singer:'周杰伦',
+ src:'http://localhost:3000/4.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:9,
+ title:"轨迹",
+ singer:'周杰伦',
+ src:'http://localhost:3000/4.mp3',
+ converImgUrl:'../images/yhm.png'
+ },{
+ id:10,
+ title:"搁浅",
+ singer:'周杰伦',
+ src:'http://localhost:3000/4.mp3',
+ converImgUrl:'../images/yhm.png'
+ }
+ ],
+ state:'paused',
+ playIndex:0,
+ play:{
+ currentTime:'00:00',
+ duration:'00:00',
+ percent:0,
+ title:'',
+ singer:'',
+ // converImgUrl:'../images/cover.jpg'
+ coverImgUrl:'../images/yhm.png'
+ }
+ },
+
+ audioCtx:null,
+
+ changeItem(e){
+ this.setData({
+ item : e.target.dataset.item
+ })
+ },
+ changeTab(e){
+ this.setData({
+ tab:e.detail.current
+ })
+ },
+
+ /**
+ * 生命周期函数--监听页面加载
+ */
+ onLoad: function (options) {
+
+ },
+
+ /**
+ * 生命周期函数--监听页面初次渲染完成
+ */
+ onReady: function () {
+ this.audioCtx = wx.createInnerAudioContext();
+ this.setMusic(0);
+ },
+ setMusic(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()
+ }
+ },
+
+ /**
+ * 生命周期函数--监听页面显示
+ */
+ onShow: function () {
+
+ },
+
+ /**
+ * 生命周期函数--监听页面隐藏
+ */
+ onHide: function () {
+
+ },
+
+ /**
+ * 生命周期函数--监听页面卸载
+ */
+ onUnload: function () {
+
+ },
+
+ /**
+ * 页面相关事件处理函数--监听用户下拉动作
+ */
+ onPullDownRefresh: function () {
+
+ },
+
+ /**
+ * 页面上拉触底事件的处理函数
+ */
+ onReachBottom: function () {
+
+ },
+
+ /**
+ * 用户点击右上角分享
+ */
+ onShareAppMessage: function () {
+
+ }
+})
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..52d5191
--- /dev/null
+++ b/pages/index/index.wxml
@@ -0,0 +1,39 @@
+
+
+
+ 音乐推荐
+ 播放器
+ 播放列表
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{play.title}}
+ {{play.singer}}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
new file mode 100644
index 0000000..ca8ea39
--- /dev/null
+++ b/pages/index/index.wxss
@@ -0,0 +1,204 @@
+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;
+}
+.tab-item.active{
+ color: #c25b5b;
+ border-bottom-color: #c25b5b;
+}
+.content {
+ flex: 1;
+}
+.content > swiper{
+ height: 100%;
+}
+.player{
+ background: #222;
+ border-top:1px solid #252525;
+ height: 112rpx;
+}
+.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;
+}
+/*操放进度和时间*/
+.content-play-progress{
+ display: flex;
+ align-items: center;
+ margin:0 35rpx;
+ font-size: 9pt;
+ text-align: center;
+}
+.content-play-progress > view {
+ flex: 1;
+}
+/*显示专辑页面样式*/
+.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: flex;
+ margin: 0 35rpx;
+ font-size: 9pt;
+ text-align: center;
+}
+.content-play-progress > view {
+ flex: 1;
+}
+
+/* 底部播放器 */
+.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-playlist{
+ height: 100%;
+}
+/* 播放列表 */
+.playlist-item {
+ display: flex;
+ align-items: center;
+ border-bottom: 1rpx solid #333 ;
+ height: 112rpx;
+}
+.playlist-cover {
+ width: 20rpx;
+ 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;
+}
diff --git a/pages/index/info.wxml b/pages/index/info.wxml
new file mode 100644
index 0000000..b45b384
--- /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..e69de29
diff --git a/pages/index/playlist.wxml b/pages/index/playlist.wxml
new file mode 100644
index 0000000..e69de29
diff --git a/project.config.json b/project.config.json
new file mode 100644
index 0000000..b290def
--- /dev/null
+++ b/project.config.json
@@ -0,0 +1,29 @@
+{
+ "appid": "wx43b4be9b6b720b57",
+ "compileType": "miniprogram",
+ "libVersion": "2.31.1",
+ "packOptions": {
+ "ignore": [],
+ "include": []
+ },
+ "setting": {
+ "coverView": true,
+ "es6": true,
+ "postcss": true,
+ "minified": true,
+ "enhance": true,
+ "showShadowRootInWxmlPanel": true,
+ "packNpmRelationList": [],
+ "babelSetting": {
+ "ignore": [],
+ "disablePlugins": [],
+ "outputPath": ""
+ },
+ "condition": false
+ },
+ "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..0fd0c22
--- /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-9",
+ "setting": {
+ "compileHotReLoad": true
+ }
+}
\ No newline at end of file