微信小程序音乐播放器

最新推荐文章于 2024-03-26 08:32:53 发布
最新推荐文章于 2024-03-26 08:32:53 发布
阅读量950 收藏 6
点赞数 9
分类专栏： Uniapp 小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwzhang1101/article/details/134828023
版权

项目预览

在这里插入图片描述

项目说明

听歌音乐播放器(小程序)，本项目的目的是为了方便听歌用户，随时随地听歌，不需要下载APP,即用即听

运行项目时，微信开发者工具只需将 dist 文件夹放入即可。另，请将微信开发者工具中的 【不校验合法域名】 勾选！ 否则无法获取数据

数据均来自 网易云API,启动项目前，请先启动网易云API服务器

项目部分源码

音乐播放器首页
在这里插入图片描述

<template>
    <div class="content">
        <div class="search" style="height:60rpx;">
            <input @input="bindKeyInput" type="text" placeholder="搜索歌曲" class="inputSearch">
            <i @click="searchI" style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI1MzU0MTYzNzM1IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE5MjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNDQxLjE5MiAxODEuODMxYzEzMi40OC0xMy43MDQgMjU1LjgyNCA2OC41MjQgMjkyLjM3MSAxOTEuODY4IDQuNTY4IDE4LjI3NC00LjU2OCAyNy40MS0xMy43MDQgMzEuOTc4LTkuMTM3IDAtMjIuODQxLTQuNTY4LTI3LjQxLTE4LjI3NC0zMS45NzgtMTA5LjYzOS0xMzcuMDQ5LTE3OC4xNjMtMjUxLjI1Ni0xNTkuODktMjIuODQxIDQuNTY3LTI3LjQxLTQxLjExNCAwLTQ1LjY4M3pNNzY1LjUzOSA2OTMuNDc5Yy00LjU2OC00LjU2NyAwLTE4LjI3NCA0LjU2Ny0yMi44NDEgNTAuMjUxLTYzLjk1NSA3Ny42NjEtMTQxLjYxNyA3Ny42NjEtMjI4LjQxMyAwLTIwMS4wMDQtMTY0LjQ1OS0zNjUuNDYzLTM2NS40NjMtMzY1LjQ2My0yMDEuMDA0IDAtMzY1LjQ2MyAxNjQuNDU5LTM2NS40NjMgMzY1LjQ2MyAwIDIwMS4wMDQgMTY0LjQ1OSAzNjUuNDYzIDM2NS40NjMgMzY1LjQ2MyA4Ni43OTcgMCAxNjQuNDU5LTI3LjQxIDIyMy44NDYtNzMuMDkyIDkuMTM3LTkuMTM3IDE4LjI3NC0xMy43MDQgMjcuNDEtNC41NjdsMTI3LjkxMyAxMzIuNDhjOS4xMzcgOS4xMzcgMjcuNDEgNC41NjcgMzYuNTQ3LTQuNTY3djBjOS4xMzctOS4xMzcgOS4xMzctMjIuODQxIDAtMzEuOTc4bC0xMzIuNDgtMTMyLjQ4ek00ODIuMzA3IDc2Ni41NzFjLTE3OC4xNjMgMC0zMTkuNzc5LTE0Ni4xODUtMzE5Ljc3OS0zMjQuMzQ4czE0MS42MTctMzE5Ljc3OSAzMTkuNzc5LTMxOS43NzljMTc4LjE2MyAwIDMyNC4zNDggMTQxLjYxNiAzMjQuMzQ4IDMxOS43NzkgMCAxNzguMTYzLTE0Ni4xODUgMzI0LjM0OC0zMjQuMzQ4IDMyNC4zNDh6IiBwLWlkPSIxOTIxIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:56rpx 56rpx; width:56rpx;height:56rpx;"></i>
        </div>
        <div class="banner">
            <swiper class="bannerSwiper" :indicator-dots="true" :autoplay="true" :circular="true" :interval="5000" :duration="500" indicator-active-color="#7054dd">
                <block v-for="item in banner" :key="item.id">
                    <swiper-item class="bannerImg">
                        <image :src="item.pic" class="slide-image" />
                    </swiper-item>
                </block>
            </swiper>
        </div>
        <div class="Entrance">
            <div class="EntranceIcon">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI0NjQ2OTIzNTE5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3Njg0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2Ij48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03MjkgMTE3LjEzMzMzMzM0djMzOS41YzAgMy4xLTIuNSA1LjctNS43IDUuN2gtMjIuN2MtMy4xIDAtNS43LTIuNS01LjctNS43VjExNy4xMzMzMzMzNGMwLTMuMSAyLjUtNS43IDUuNy01LjdoMjIuN2MzLjIgMCA1LjcgMi42IDUuNyA1Ljd6IiBmaWxsPSIjMzUzMzM0IiBwLWlkPSI0NzY4NSI+PC9wYXRoPjxwYXRoIGQ9Ik03MTIuMSAxMTQuMzMzMzMzMzRtLTMyLjEgMGEzMi4xIDMyLjEgMCAxIDAgNjQuMiAwIDMyLjEgMzIuMSAwIDEgMC02NC4yIDBaIiBmaWxsPSIjMzUzMzM0IiBwLWlkPSI0NzY4NiI+PC9wYXRoPjxwYXRoIGQ9Ik0yOTkgMTE3LjEzMzMzMzM0djMzOS41YzAgMy4xLTIuNSA1LjctNS43IDUuN2gtMjIuN2MtMy4xIDAtNS43LTIuNS01LjctNS43VjExNy4xMzMzMzMzNGMwLTMuMSAyLjUtNS43IDUuNy01LjdoMjIuN2MzLjIgMCA1LjcgMi42IDUuNyA1Ljd6IiBmaWxsPSIjMzUzMzM0IiBwLWlkPSI0NzY4NyI+PC9wYXRoPjxwYXRoIGQ9Ik0yODIgMTE0LjMzMzMzMzM0bS0zMi4xIDBhMzIuMSAzMi4xIDAgMSAwIDY0LjIgMCAzMi4xIDMyLjEgMCAxIDAtNjQuMiAwWiIgZmlsbD0iIzM1MzMzNCIgcC1pZD0iNDc2ODgiPjwvcGF0aD48cGF0aCBkPSJNOTEwLjQgODM1LjEwMDAwMDAxaC03MzVjLTI3LjQgMC00OS42LTIyLjMtNDkuNi00OS42VjI5MC4yMDAwMDAwMWMwLTI3LjQgMjIuMy00OS42IDQ5LjYtNDkuNmg3MzVjMjcuNCAwIDQ5LjYgMjIuMyA0OS42IDQ5LjZ2NDk1LjNjMCAyNy4zLTIyLjMgNDkuNi00OS42IDQ5LjZ6IiBmaWxsPSIjQTdCOEM2IiBwLWlkPSI0NzY4OSI+PC9wYXRoPjxwYXRoIGQ9Ik04NzAuNiAyMDYuMzMzMzMzMzRIMTE4LjhjLTE1LjMgMC0yNy43IDEyLjQtMjcuNyAyNy43djUxMi4xYzAgMTUuMyAxMi40IDI3LjcgMjcuNyAyNy43aDc1MS44YzE1LjMgMCAyNy43LTEyLjQgMjcuNy0yNy43VjIzMy45MzMzMzMzNGMtMC4xLTE1LjItMTIuNS0yNy42LTI3LjctMjcuNnoiIGZpbGw9IiNERTlGOUMiIHAtaWQ9IjQ3NjkwIj48L3BhdGg+PHBhdGggZD0iTTg3OS42IDIxOC4zMzMzMzMzNEgxMjcuOGMtMTUuMyAwLTI3LjcgMTIuNC0yNy43IDI3Ljd2NTEyLjFjMCAxNS4zIDEyLjQgMjcuNyAyNy43IDI3LjdoNzUxLjhjMTUuMyAwIDI3LjctMTIuNCAyNy43LTI3LjdWMjQ1LjkzMzMzMzM0YzAtMTUuMi0xMi40LTI3LjYtMjcuNy0yNy42eiIgZmlsbD0iI0U0NjE2MCIgcC1pZD0iNDc2OTEiPjwvcGF0aD48cGF0aCBkPSJNNzk4LjUgMzI0LjgzMzMzMzM0aC0yMjFjLTkuMyAwLTE3LTcuNi0xNy0xNyAwLTkuMyA3LjYtMTcgMTctMTdoMjIwLjljOS4zIDAgMTcgNy42IDE3IDE3IDAuMSA5LjQtNy42IDE3LTE2LjkgMTd6TTMxNi45IDM4MS40MzMzMzMzNEgxNzUuNWMtOS4zIDAtMTctNy42LTE3LTE3IDAtOS4zIDcuNi0xNyAxNy0xN2gxNDEuNGM5LjMgMCAxNyA3LjYgMTcgMTcgMCA5LjMtNy42IDE3LTE3IDE3ek02OTcuNyA0MzcuOTMzMzMzMzRIMTc1LjVjLTkuMyAwLTE3LTcuNi0xNy0xNyAwLTkuMyA3LjYtMTcgMTctMTdoNTIyLjJjOS4zIDAgMTcgNy42IDE3IDE3cy03LjYgMTctMTcgMTd6TTc5OC41IDQ5NC40MzMzMzMzNGgtNjIzYy05LjMgMC0xNy03LjYtMTctMTcgMC05LjMgNy42LTE3IDE3LTE3aDYyM2M5LjMgMCAxNyA3LjYgMTcgMTdzLTcuNyAxNy0xNyAxN3pNNzk4LjUgNTUxLjAzMzMzMzM0aC02MjNjLTkuMyAwLTE3LTcuNi0xNy0xNyAwLTkuMyA3LjYtMTcgMTctMTdoNjIzYzkuMyAwIDE3IDcuNiAxNyAxNyAwIDkuMy03LjcgMTctMTcgMTd6TTQ5Mi4zIDMyNC44MzMzMzMzNEgxNzUuNWMtOS4zIDAtMTctNy42LTE3LTE3IDAtOS4zIDcuNi0xNyAxNy0xN2gzMTYuOGM5LjMgMCAxNyA3LjYgMTcgMTdzLTcuNyAxNy0xNyAxN3pNNzk4LjUgMzgxLjQzMzMzMzM0SDQxMGMtOS4zIDAtMTctNy42LTE3LTE3IDAtOS4zIDcuNi0xNyAxNy0xN2gzODguNGM5LjMgMCAxNyA3LjYgMTcgMTcgMC4xIDkuMy03LjYgMTctMTYuOSAxN3oiIGZpbGw9IiMzNTMzMzQiIHAtaWQ9IjQ3NjkyIj48L3BhdGg+PHBhdGggZD0iTTc2MC4zIDY1OC42MzMzMzMzNG0tNjkuMiAwYTY5LjIgNjkuMiAwIDEgMCAxMzguNCAwIDY5LjIgNjkuMiAwIDEgMC0xMzguNCAwWiIgZmlsbD0iI0UwMkQyNiIgcC1pZD0iNDc2OTMiPjwvcGF0aD48cGF0aCBkPSJNNzk4LjUgNDM3LjkzMzMzMzM0aC0xMi42Yy05LjMgMC0xNy03LjYtMTctMTcgMC05LjMgNy42LTE3IDE3LTE3aDEyLjZjOS4zIDAgMTcgNy42IDE3IDE3cy03LjcgMTctMTcgMTd6IiBmaWxsPSIjMzUzMzM0IiBwLWlkPSI0NzY5NCI+PC9wYXRoPjxwYXRoIGQ9Ik03NTQuMiA2NTIuNjMzMzMzMzRtLTY2LjIgMGE2Ni4yIDY2LjIgMCAxIDAgMTMyLjQgMCA2Ni4yIDY2LjIgMCAxIDAtMTMyLjQgMFoiIGZpbGw9IiNFRkYwRjAiIHAtaWQ9IjQ3Njk1Ij48L3BhdGg+PHBhdGggZD0iTTIyNy40IDY0NS4xMzMzMzMzNEgyNTNjNi4xIDAuMyA5LjUgMy45IDEwLjIgMTAuNi0wLjYgNi44LTQgMTAuMy0xMC4yIDEwLjZoLTI1LjZ2MThjLTAuMyA5LTUuMiAxMy43LTE0LjUgMTQtOS40LTAuMy0xNC01LTE0LTE0di01OC41Yy0wLjMtMTEuMyA1LjItMTYuOSAxNi40LTE2LjlIMjU2YzguNyAwLjMgMTMuMiA0IDEzLjUgMTEuMS0wLjMgNy40LTQuOCAxMS4xLTEzLjUgMTEuMWgtMjguNXYxNHpNMzI5LjUgNjYzLjAzMzMzMzM0bDExLjYtNDRjMS42LTguNCA2LjgtMTIuNCAxNS41LTEyLjFoNy43YzkuNyAwLjMgMTQuNyA1LjUgMTUgMTUuNXY2NC4zYzAgNy43LTQuMiAxMS42LTEyLjYgMTEuNi04LjctMC4zLTEzLjEtNC4yLTEzLjEtMTEuNnYtNDMuNWwtMTMuMSA0OC40Yy0xIDQuOC00LjcgNy4xLTExLjEgNi44LTYuOCAwLjMtMTAuNS0xLjktMTEuMS02LjhsLTEzLjEtNDguNGgtMC41djQzLjVjMCA3LjctNC4yIDExLjYtMTIuNiAxMS42LTguNyAwLTEyLjktMy45LTEyLjYtMTEuNnYtNjQuM2MwLTEwIDQuOC0xNS4yIDE0LjUtMTUuNWg4LjJjOC4xLTAuMyAxMy4xIDMuNyAxNSAxMi4xbDEyLjMgNDR6IiBmaWxsPSIjRTAyRDI2IiBwLWlkPSI0NzY5NiI+PC9wYXRoPjxwYXRoIGQ9Ik04NzAuNiAxNzkuMjMzMzMzMzRIMTE4LjhjLTMwLjIgMC01NC43IDI0LjUtNTQuNyA1NC43djUxMi4xYzAgMzAuMiAyNC41IDU0LjcgNTQuNyA1NC43aDc1MS44YzMwLjIgMCA1NC43LTI0LjUgNTQuNy01NC43VjIzMy45MzMzMzMzNGMwLTMwLjItMjQuNS01NC43LTU0LjctNTQuN3ogbTI3LjYgNTY2LjljMCAxNS4zLTEyLjQgMjcuNy0yNy43IDI3LjdIMTE4LjhjLTE1LjMgMC0yNy43LTEyLjQtMjcuNy0yNy43VjIzMy45MzMzMzMzNGMwLTE1LjMgMTIuNC0yNy43IDI3LjctMjcuN2g3NTEuOGMxNS4zIDAgMjcuNyAxMi40IDI3LjcgMjcuN3Y1MTIuMnoiIGZpbGw9IiMxQTFBMUEiIHAtaWQ9IjQ3Njk3Ij48L3BhdGg+PHBhdGggZD0iTTIyMS40IDYzOS4xMzMzMzMzNEgyNDdjNi4xIDAuMyA5LjUgMy45IDEwLjIgMTAuNi0wLjYgNi44LTQgMTAuMy0xMC4yIDEwLjZoLTI1LjZ2MThjLTAuMyA5LTUuMiAxMy43LTE0LjUgMTQtOS40LTAuMy0xNC01LTE0LTE0di01OC41Yy0wLjMtMTEuMyA1LjItMTYuOSAxNi40LTE2LjloNDAuNmM4LjcgMC4zIDEzLjIgNCAxMy41IDExLjEtMC4zIDcuNC00LjggMTEuMS0xMy41IDExLjFoLTI4LjV2MTR6TTMyMy41IDY1Ny4wMzMzMzMzNGwxMS42LTQ0YzEuNi04LjQgNi44LTEyLjQgMTUuNS0xMi4xaDcuN2M5LjcgMC4zIDE0LjcgNS41IDE1IDE1LjV2NjQuM2MwIDcuNy00LjIgMTEuNi0xMi42IDExLjYtOC43LTAuMy0xMy4xLTQuMi0xMy4xLTExLjZ2LTQzLjVsLTEzLjEgNDguNGMtMSA0LjgtNC43IDcuMS0xMS4xIDYuOC02LjggMC4zLTEwLjUtMS45LTExLjEtNi44bC0xMy4xLTQ4LjRoLTAuNXY0My41YzAgNy43LTQuMiAxMS42LTEyLjYgMTEuNi04LjcgMC0xMi45LTMuOS0xMi42LTExLjZWNjE2LjMzMzMzMzM0YzAtMTAgNC44LTE1LjIgMTQuNS0xNS41aDguMmM4LjEtMC4zIDEzLjEgMy43IDE1IDEyLjFsMTIuMyA0NC4xeiIgZmlsbD0iI0VGRjBGMCIgcC1pZD0iNDc2OTgiPjwvcGF0aD48L3N2Zz4=">
                <p>电台</p>
            </div>
            <div class="EntranceIcon" @click="moreSongsList">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI0NjQ2OTkzODIyIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3ODExIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2Ij48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik01MTIgMTMwLjkwMTMzM2EzODEuMDk4NjY3IDM4MS4wOTg2NjcgMCAwIDAgMCA3NjIuMTk3MzM0aDEwLjkyMjY2N2EyNTEuNzMzMzMzIDI1MS43MzMzMzMgMCAwIDAgNDAuMjc3MzMzLTIuMzg5MzM0IDE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAgMTIuOTcwNjY3LTIzLjg5MzMzM0ExMzUuNTA5MzMzIDEzNS41MDkzMzMgMCAwIDEgNTYzLjIgODEwLjY2NjY2N2ExMzguMjQgMTM4LjI0IDAgMCAxIDEyOS44NzczMzMtMTM3Ljg5ODY2NyAxNy4wNjY2NjcgMTcuMDY2NjY3IDAgMCAwIDE2LjA0MjY2Ny0xNy4wNjY2Njd2LTcyLjUzMzMzM2E2Mi44MDUzMzMgNjIuODA1MzMzIDAgMCAxIDEyMi43MDkzMzMtMTguNjAyNjY3IDE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAgMTMuNDgyNjY3IDExLjc3NiAxMDIuNCAxMDIuNCAwIDAgMSAyMC4xMzg2NjcgNS4yOTA2NjcgMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDAgMCAxNC41MDY2NjYtMS41MzYgMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDAgMCA4LjE5Mi0xMS45NDY2NjcgMzYxLjQ3MiAzNjEuNDcyIDAgMCAwIDQuOTQ5MzM0LTU2LjE0OTMzM0EzODEuNDQgMzgxLjQ0IDAgMCAwIDUxMiAxMzAuOTAxMzMzeiIgZmlsbD0iI0VERjRGRiIgcC1pZD0iNDc4MTIiPjwvcGF0aD48cGF0aCBkPSJNODczLjk4NCAzOTIuNTMzMzMzYTE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAtMTcuMDY2NjY3LTExLjc3NkgxNjYuMjI5MzMzYTE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAtMTcuMDY2NjY2IDExLjc3NiAzODAuNzU3MzMzIDM4MC43NTczMzMgMCAwIDAgMCAyMzguOTMzMzM0IDE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAgMTcuMDY2NjY2IDExLjc3Nmg1MjYuMzM2YTE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAgMTcuMDY2NjY3LTE3LjA2NjY2N3YtNDIuNjY2NjY3YTYyLjgwNTMzMyA2Mi44MDUzMzMgMCAwIDEgMTIyLjcwOTMzMy0xOC42MDI2NjYgMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDAgMCAxMy40ODI2NjcgMTEuNzc2IDEwNy44NjEzMzMgMTA3Ljg2MTMzMyAwIDAgMSAyMC4zMDkzMzMgNS4yOTA2NjYgMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDAgMCAxNC41MDY2NjctMS43MDY2NjYgMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDAgMCA4LjE5Mi0xMi4xMTczMzQgMzc5LjIyMTMzMyAzNzkuMjIxMzMzIDAgMCAwIDQuMjY2NjY3LTU2LjE0OTMzMyAzODQgMzg0IDAgMCAwLTE5LjExNDY2Ny0xMTkuNDY2NjY3eiIgZmlsbD0iI0Y2NzE2RiIgcC1pZD0iNDc4MTMiPjwvcGF0aD48cGF0aCBkPSJNNTEyIDUxMm0tMTYxLjc5MiAwYTE2MS43OTIgMTYxLjc5MiAwIDEgMCAzMjMuNTg0IDAgMTYxLjc5MiAxNjEuNzkyIDAgMSAwLTMyMy41ODQgMFoiIGZpbGw9IiNGRkM2NzAiIHAtaWQ9IjQ3ODE0Ij48L3BhdGg+PHBhdGggZD0iTTcwMy40ODggODA3Ljc2NTMzM20tNjguMjY2NjY3IDBhNjguMjY2NjY3IDY4LjI2NjY2NyAwIDEgMCAxMzYuNTMzMzM0IDAgNjguMjY2NjY3IDY4LjI2NjY2NyAwIDEgMC0xMzYuNTMzMzM0IDBaIiBmaWxsPSIjRkZDNjcwIiBwLWlkPSI0NzgxNSI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTg4LjhhMTg3LjczMzMzMyAxODcuNzMzMzMzIDAgMCAxLTE2MC45Mzg2NjctOTEuOTg5MzMzIDE0OC4zMDkzMzMgMTQ4LjMwOTMzMyAwIDAgMC0wLjg1MzMzMyAxNS4xODkzMzMgMTYxLjc5MiAxNjEuNzkyIDAgMCAwIDMyNC4yNjY2NjcgMCAxNDguMzA5MzMzIDE0OC4zMDkzMzMgMCAwIDAgMC0xNS4xODkzMzNBMTg3LjczMzMzMyAxODcuNzMzMzMzIDAgMCAxIDUxMiA1ODguOHoiIGZpbGw9IiNGRkE3NDIiIHAtaWQ9IjQ3ODE2Ij48L3BhdGg+PHBhdGggZD0iTTU3MC4xOTczMzMgNTAyLjEwMTMzM2wtNzguODQ4LTQ1LjM5NzMzM2ExMS4yNjQgMTEuMjY0IDAgMCAwLTE3LjA2NjY2NiA5LjcyOHY5MS4xMzZhMTEuMjY0IDExLjI2NCAwIDAgMCAxNy4wNjY2NjYgOS43MjhsNzguODQ4LTQ1LjM5NzMzM2ExMS40MzQ2NjcgMTEuNDM0NjY3IDAgMCAwIDAtMTkuNzk3MzM0eiIgZmlsbD0iI0VERjRGRiIgcC1pZD0iNDc4MTciPjwvcGF0aD48cGF0aCBkPSJNNTU4LjA4IDg1Ni4wNjRhMzc3LjUxNDY2NyAzNzcuNTE0NjY3IDAgMCAxLTQ2LjA4IDIuOTAxMzMzIDM0Ny4xMzYgMzQ3LjEzNiAwIDAgMS0zMjEuMTk0NjY3LTIxNi4wNjRoMTk5LjY4YTE3OC4wMDUzMzMgMTc4LjAwNTMzMyAwIDAgMCAyNDMuMDI5MzM0IDBoNjEuOTUyYTE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAgMC0zNC4xMzMzMzNoLTM0LjEzMzMzNEExNzcuNDkzMzMzIDE3Ny40OTMzMzMgMCAwIDAgNjkwLjg1ODY2NyA1MTJhMTc1LjI3NDY2NyAxNzUuMjc0NjY3IDAgMCAwLTIuNTYtMjguNTAxMzMzaDg5Ljc3MDY2NmExNy4wNjY2NjcgMTcuMDY2NjY3IDAgMCAwIDAtMzQuMTMzMzM0SDY3OS4yNTMzMzNhMTgyLjI3MiAxODIuMjcyIDAgMCAwLTE3LjA2NjY2Ni0zNC4xMzMzMzNoMTgyLjc4NGEzNDEuMzMzMzMzIDM0MS4zMzMzMzMgMCAwIDEgMTMuOTk0NjY2IDk2Ljc2OCAzNTguNCAzNTguNCAwIDAgMS00LjA5NiA1NC4xMDEzMzMgMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDAgMCAxNC4xNjUzMzQgMTkuNjI2NjY3IDE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAgMTkuNDU2LTE0LjMzNkEzODAuMDc0NjY3IDM4MC4wNzQ2NjcgMCAxIDAgNTYzLjIgODg5Ljg1NmExNy4wNjY2NjcgMTcuMDY2NjY3IDAgMCAwLTQuNDM3MzMzLTM0LjEzMzMzM3pNMTY1LjAzNDY2NyA1MTJhMzQxLjMzMzMzMyAzNDEuMzMzMzMzIDAgMCAxIDEzLjk5NDY2Ni05Ni43NjhIMzYxLjgxMzMzM2ExODIuMjcyIDE4Mi4yNzIgMCAwIDAtMTcuMDY2NjY2IDM0LjEzMzMzM2gtNTIuMDUzMzM0YTE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAgMCAzNC4xMzMzMzRoNDMuMDA4YTE3NS4yNzQ2NjcgMTc1LjI3NDY2NyAwIDAgMC0yLjU2IDI4LjUwMTMzMyAxNzcuNDkzMzMzIDE3Ny40OTMzMzMgMCAwIDAgMjguNjcyIDk2Ljc2OEgxNzkuMDI5MzMzQTM0MS4zMzMzMzMgMzQxLjMzMzMzMyAwIDAgMSAxNjUuMDM0NjY3IDUxMnogbTIwMi4yNCAwQTE0NC43MjUzMzMgMTQ0LjcyNTMzMyAwIDEgMSA1MTIgNjU2LjcyNTMzMyAxNDUuMDY2NjY3IDE0NS4wNjY2NjcgMCAwIDEgMzY3LjI3NDY2NyA1MTJ6TTUxMiAxNjUuMDM0NjY3YTM0Ny4xMzYgMzQ3LjEzNiAwIDAgMSAzMjEuMTk0NjY3IDIxNi4wNjRoLTE5OS42OGExNzguMDA1MzMzIDE3OC4wMDUzMzMgMCAwIDAtMjQzLjAyOTMzNCAwaC0xOTkuNjhBMzQ3LjEzNiAzNDcuMTM2IDAgMCAxIDUxMiAxNjUuMDM0NjY3eiIgZmlsbD0iIzNEM0Q2MyIgcC1pZD0iNDc4MTgiPjwvcGF0aD48cGF0aCBkPSJNMjMwLjA1ODY2NyA0NDkuMzY1MzMzSDIxMS42MjY2NjdhMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDEgMCAwIDM0LjEzMzMzNGgxOC40MzJhMTcuMDY2NjY3IDE3LjA2NjY2NyAwIDEgMCAwLTM0LjEzMzMzNHpNNTc4LjczMDY2NyA0ODcuNDI0bC03OC44NDgtNDUuNTY4YTI4LjUwMTMzMyAyOC41MDEzMzMgMCAwIDAtNDIuNjY2NjY3IDI0LjU3NnY5MS4xMzZhMjguMzMwNjY3IDI4LjMzMDY2NyAwIDAgMCA0Mi42NjY2NjcgMjQuNTc2bDc4Ljg0OC00NS41NjhhMjguMTYgMjguMTYgMCAwIDAgMC00OS4xNTJ6IG0tODcuMzgxMzM0IDYwLjI0NTMzM3YtNzEuMzM4NjY2TDU1My4xMzA2NjcgNTEyek04MjMuOTc4NjY3IDYyMy45NTczMzNhMzUuMTU3MzMzIDM1LjE1NzMzMyAwIDAgMS0zNS4xNTczMzQtMzUuMTU3MzMzIDE3LjA2NjY2NyAxNy4wNjY2NjcgMCAwIDAtMzQuMTMzMzMzIDB2MTUxLjIxMDY2N2E4My45NjggODMuOTY4IDAgMCAwLTUxLjItMTcuMDY2NjY3IDg1LjMzMzMzMyA4NS4zMzMzMzMgMCAxIDAgODUuMzMzMzMzIDg1LjMzMzMzM1Y2NDguNTMzMzMzYTY4LjI2NjY2NyA2OC4yNjY2NjcgMCAwIDAgMzUuMTU3MzM0IDkuODk4NjY3IDM0Ljk4NjY2NyAzNC45ODY2NjcgMCAwIDEgMzQuMTMzMzMzIDM0LjEzMzMzMyAxNy4wNjY2NjcgMTcuMDY2NjY3IDAgMCAwIDM0LjEzMzMzMyAwIDY5LjI5MDY2NyA2OS4yOTA2NjcgMCAwIDAtNjguMjY2NjY2LTY4LjYwOHogbS0xMjAuNDkwNjY3IDIzNS4wMDhhNTEuMiA1MS4yIDAgMSAxIDUxLjItNTEuMiA1MS4yIDUxLjIgMCAwIDEtNTEuMiA1MS4yeiIgZmlsbD0iIzNEM0Q2MyIgcC1pZD0iNDc4MTkiPjwvcGF0aD48L3N2Zz4=">
                <p>歌单</p>
            </div>
            <div class="EntranceIcon" @click="ranking">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI0NjQ2OTk2NzE5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3OTMyIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2Ij48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03MzIuNSAzNzEuOHYtOTVIMzg3LjhjLTIzLjEgMC00MS43IDE5LjktNDEuNyA0NC40djIxMS42YzAgOTAuNSA2OC45IDE2My45IDE1My45IDE2My45aDc4LjZjMTExLjMtNjEuOCAxNDQuMi0yMzIuNCAxNTMuOS0zMjQuOXoiIGZpbGw9IiNGQ0VFMjEiIHAtaWQ9IjQ3OTMzIj48L3BhdGg+PHBhdGggZD0iTTczMi41IDUzMi44di0xNjFjLTkuNyA5Mi41LTQyLjYgMjYzLjEtMTUzLjkgMzI0LjkgODUgMC4xIDE1My45LTczLjMgMTUzLjktMTYzLjl6IiBmaWxsPSIjRjhCNjJEIiBwLWlkPSI0NzkzNCI+PC9wYXRoPjxwYXRoIGQ9Ik03MjMuNyA5MjUuMmMwIDExLjEtOS4xIDIwLjItMjAuMiAyMC4ySDM0NC40Yy0xMS4xIDAtMjAuMi05LjEtMjAuMi0yMC4yczkuMS0yMC4yIDIwLjItMjAuMmgzNTkuMWMxMS4xIDAgMjAuMiA5LjEgMjAuMiAyMC4yeiIgZmlsbD0iI0ZDRUUyMSIgcC1pZD0iNDc5MzUiPjwvcGF0aD48cGF0aCBkPSJNMjg4LjUgMzEwLjNjLTUwLjEgMC05MC42IDQwLjYtOTAuNiA5MC42czQwLjYgOTAuNiA5MC42IDkwLjYiIGZpbGw9IiNGOEI2MkQiIHAtaWQ9IjQ3OTM2Ij48L3BhdGg+PHBhdGggZD0iTTI4OC41IDUwMy42Yy01Ni42IDAtMTAyLjYtNDYtMTAyLjYtMTAyLjZzNDYtMTAyLjYgMTAyLjYtMTAyLjZjNi42IDAgMTIgNS40IDEyIDEycy01LjQgMTItMTIgMTJjLTQzLjQgMC03OC43IDM1LjMtNzguNyA3OC42czM1LjMgNzguNiA3OC43IDc4LjZjNi42IDAgMTIgNS40IDEyIDEycy01LjMgMTItMTIgMTJ6IiBmaWxsPSIjM0UzQTM5IiBwLWlkPSI0NzkzNyI+PC9wYXRoPjxwYXRoIGQ9Ik03MzYuNiAzMTAuM2M1MC4xIDAgOTAuNiA0MC42IDkwLjYgOTAuNnMtNDAuNiA5MC42LTkwLjYgOTAuNiIgZmlsbD0iI0Y4QjYyRCIgcC1pZD0iNDc5MzgiPjwvcGF0aD48cGF0aCBkPSJNNzM2LjYgNTAzLjZjLTYuNiAwLTEyLTUuNC0xMi0xMnM1LjQtMTIgMTItMTJjNDMuNCAwIDc4LjYtMzUuMyA3OC42LTc4LjZzLTM1LjMtNzguNi03OC42LTc4LjZjLTYuNiAwLTEyLTUuNC0xMi0xMnM1LjQtMTIgMTItMTJjNTYuNiAwIDEwMi42IDQ2IDEwMi42IDEwMi42cy00NiAxMDIuNi0xMDIuNiAxMDIuNnoiIGZpbGw9IiMzRTNBMzkiIHAtaWQ9IjQ3OTM5Ij48L3BhdGg+PHBhdGggZD0iTTQ3OC44IDg3OS4zVjcwMy43aDY3LjV2MTc1LjYiIGZpbGw9IiNGOEI2MkQiIHAtaWQ9IjQ3OTQwIj48L3BhdGg+PHBhdGggZD0iTTU0Ni4zIDg5MS4zYy02LjYgMC0xMi01LjQtMTItMTJWNzE1LjdoLTQzLjZ2MTYzLjZjMCA2LjYtNS40IDEyLTEyIDEycy0xMi01LjQtMTItMTJWNzAzLjdjMC02LjYgNS40LTEyIDEyLTEyaDY3LjVjNi42IDAgMTIgNS40IDEyIDEydjE3NS42YzAuMSA2LjctNS4yIDEyLTExLjkgMTJ6IiBmaWxsPSIjM0UzQTM5IiBwLWlkPSI0Nzk0MSI+PC9wYXRoPjxwYXRoIGQ9Ik02OTguMiA5NTQuNkgzMjYuOWMtMjMuMiAwLTQyLjEtMTguOS00Mi4xLTQyLjFzMTguOS00Mi4xIDQyLjEtNDIuMWgzNzEuNGMyMy4yIDAgNDIuMSAxOC45IDQyLjEgNDIuMXMtMTkgNDIuMS00Mi4yIDQyLjF6IG0tMzcxLjMtNjAuMmMtMTAgMC0xOC4xIDguMS0xOC4xIDE4LjFzOC4xIDE4LjEgMTguMSAxOC4xaDM3MS40YzEwIDAgMTguMS04LjEgMTguMS0xOC4xcy04LjEtMTguMS0xOC4xLTE4LjFIMzI2Ljl6TTU1Ny4zIDcwOC43aC04OS40Yy0xMDMuMiAwLTE4Ny4yLTg0LTE4Ny4yLTE4Ny4yVjI0Ny44YzAtNi42IDUuNC0xMiAxMi0xMmg0Ny42YzYuNiAwIDEyIDUuNCAxMiAxMnMtNS40IDEyLTEyIDEyaC0zNS42djI2MS43YzAgOTAgNzMuMiAxNjMuMiAxNjMuMiAxNjMuMmg4OS40YzkwIDAgMTYzLjItNzMuMiAxNjMuMi0xNjMuMlYyNTkuOEg0NzguOGMtNi42IDAtMTItNS40LTEyLTEyczUuNC0xMiAxMi0xMmgyNTMuN2M2LjYgMCAxMiA1LjQgMTIgMTJ2MjczLjdjMCAxMDMuMy04NCAxODcuMi0xODcuMiAxODcuMnoiIGZpbGw9IiMzRTNBMzkiIHAtaWQ9IjQ3OTQyIj48L3BhdGg+PHBhdGggZD0iTTQyNC44IDI1OS44aC00NS40Yy02LjYgMC0xMi01LjQtMTItMTJzNS40LTEyIDEyLTEyaDQ1LjRjNi42IDAgMTIgNS40IDEyIDEyLTAuMSA2LjYtNS40IDEyLTEyIDEyek04MTIuMyAyNTkuOGgtODBjLTYuNiAwLTEyLTUuNC0xMi0xMnM1LjQtMTIgMTItMTJoODBjNi42IDAgMTIgNS40IDEyIDEycy01LjMgMTItMTIgMTJ6TTI5Mi44IDI1OS44aC04MC4xYy02LjYgMC0xMi01LjQtMTItMTJzNS40LTEyIDEyLTEyaDgwLjFjNi42IDAgMTIgNS40IDEyIDEycy01LjQgMTItMTIgMTJ6IiBmaWxsPSIjM0UzQTM5IiBwLWlkPSI0Nzk0MyI+PC9wYXRoPjxwYXRoIGQ9Ik0yNTEgOTUuMWMwLTE3LjkgMTQuNi0zMi41IDMyLjUtMzIuNVMzMTYgNzcuMiAzMTYgOTUuMXMtMTQuNiAzMi41LTMyLjUgMzIuNVMyNTEgMTEzIDI1MSA5NS4xeiBtMTYgMGMwIDkuMSA3LjQgMTYuNSAxNi41IDE2LjVzMTYuNS03LjQgMTYuNS0xNi41LTcuNC0xNi41LTE2LjUtMTYuNVMyNjcgODYgMjY3IDk1LjF6IiBmaWxsPSIjNDdCN0Y4IiBwLWlkPSI0Nzk0NCI+PC9wYXRoPjxwYXRoIGQ9Ik04MTAuMSAxNzkuNGgxNC4ydi0xNC4yYzAtMy44IDMuMS02LjkgNi45LTYuOSAzLjggMCA2LjkgMy4xIDYuOSA2Ljl2MTQuMmgxNC4yYzMuOCAwIDYuOSAzLjEgNi45IDYuOXMtMy4xIDYuOS02LjkgNi45SDgzOHYxNC4yYzAgMy44LTMuMSA2LjktNi45IDYuOS0zLjggMC02LjktMy4xLTYuOS02Ljl2LTE0LjJIODEwYy0zLjggMC02LjktMy4xLTYuOS02LjlzMy4yLTYuOSA3LTYuOXpNOTIuMSAzMTcuNWgxNC4ydi0xNC4yYzAtMy44IDMuMS02LjkgNi45LTYuOSAzLjggMCA2LjkgMy4xIDYuOSA2Ljl2MTQuMmgxNC4yYzMuOCAwIDYuOSAzLjEgNi45IDYuOXMtMy4xIDYuOS02LjkgNi45aC0xNC4ydjE0LjJjMCAzLjgtMy4xIDYuOS02LjkgNi45LTMuOCAwLTYuOS0zLjEtNi45LTYuOXYtMTQuMkg5Mi4xYy0zLjggMC02LjktMy4xLTYuOS02LjlzMy4xLTYuOSA2LjktNi45eiIgZmlsbD0iI0Y3RTQyRiIgcC1pZD0iNDc5NDUiPjwvcGF0aD48cGF0aCBkPSJNODI3LjYgNTQ0LjZoMTYuNXYtMTYuNWMwLTQuNCAzLjYtOCA4LThzOCAzLjYgOCA4djE2LjVoMTYuNWM0LjQgMCA4IDMuNiA4IDhzLTMuNiA4LTggOGgtMTYuNXYxNi41YzAgNC40LTMuNiA4LTggOHMtOC0zLjYtOC04di0xNi41aC0xNi41Yy00LjQgMC04LTMuNi04LThzMy42LTggOC04eiIgZmlsbD0iI0Y4QjYyRCIgcC1pZD0iNDc5NDYiPjwvcGF0aD48cGF0aCBkPSJNNzAxLjkgMTA3LjFtLTEyIDBhMTIgMTIgMCAxIDAgMjQgMCAxMiAxMiAwIDEgMC0yNCAwWiIgZmlsbD0iI0Y4QjYyRCIgcC1pZD0iNDc5NDciPjwvcGF0aD48cGF0aCBkPSJNMTY2LjIgMTcwLjNtLTE2IDBhMTYgMTYgMCAxIDAgMzIgMCAxNiAxNiAwIDEgMC0zMiAwWiIgZmlsbD0iI0Y4QjYyRCIgcC1pZD0iNDc5NDgiPjwvcGF0aD48cGF0aCBkPSJNNjI1LjYgMTc1LjhtLTE2IDBhMTYgMTYgMCAxIDAgMzIgMCAxNiAxNiAwIDEgMC0zMiAwWiIgZmlsbD0iI0Y3RTQyRiIgcC1pZD0iNDc5NDkiPjwvcGF0aD48cGF0aCBkPSJNODkxLjkgMzQwYzAtMTcuOSAxNC42LTMyLjUgMzIuNS0zMi41czMyLjUgMTQuNiAzMi41IDMyLjUtMTQuNiAzMi41LTMyLjUgMzIuNS0zMi41LTE0LjYtMzIuNS0zMi41eiBtMTYgMGMwIDkuMSA3LjQgMTYuNSAxNi41IDE2LjVzMTYuNS03LjQgMTYuNS0xNi41LTcuNC0xNi41LTE2LjUtMTYuNS0xNi41IDcuNC0xNi41IDE2LjV6IiBmaWxsPSIjRjhCNjJEIiBwLWlkPSI0Nzk1MCI+PC9wYXRoPjxwYXRoIGQ9Ik01MTMuNSAxMDEuM2MxLjctMS43IDQuNS0xLjcgNi4zIDAgMC44IDAuOCAxLjMgMiAxLjMgMy4xcy0wLjUgMi4zLTEuMyAzLjFsLTE0LjIgMTQuMmMtMC44IDAuOC0xLjkgMS4zLTMuMSAxLjNzLTIuMy0wLjUtMy4xLTEuM2MtMS43LTEuNy0xLjctNC41IDAtNi4zbDE0LjEtMTQuMXpNNDc2IDEzOC43YzAuOC0wLjggMS45LTEuMyAzLjEtMS4zIDEuMiAwIDIuMyAwLjUgMy4xIDEuMyAxLjcgMS43IDEuNyA0LjUgMCA2LjNMNDY4IDE1OS4yYy0wLjggMC44LTEuOSAxLjMtMy4xIDEuMy0xLjIgMC0yLjMtMC41LTMuMS0xLjMtMC44LTAuOC0xLjMtMS45LTEuMy0zLjEgMC0xLjIgMC41LTIuMyAxLjMtMy4xbDE0LjItMTQuM3pNNDc5LjIgMTIzYy0xLjIgMC0yLjMtMC41LTMuMS0xLjNsLTE0LjItMTQuMmMtMC44LTAuOC0xLjMtMS45LTEuMy0zLjEgMC0xLjIgMC41LTIuMyAxLjMtMy4xIDEuNy0xLjcgNC41LTEuNyA2LjMgMGwxNC4yIDE0LjJjMS43IDEuNyAxLjcgNC41IDAgNi4zLTAuOSAwLjgtMi4xIDEuMi0zLjIgMS4yek01MDUuNiAxMzguN2wxNC4yIDE0LjJjMC44IDAuOCAxLjMgMiAxLjMgMy4xcy0wLjUgMi4zLTEuMyAzLjFjLTAuOCAwLjgtMS45IDEuMy0zLjEgMS4zLTEuMiAwLTIuMy0wLjUtMy4xLTEuM0w0OTkuMyAxNDVjLTEuNy0xLjctMS43LTQuNSAwLTYuMyAxLjctMS42IDQuNi0xLjYgNi4zIDB6TTUwMi44IDEzMC4yYzAtMi40IDItNC40IDQuNC00LjRoMjAuMWMyLjQgMCA0LjQgMiA0LjQgNC40IDAgMi40LTIgNC40LTQuNCA0LjRoLTIwLjFjLTIuNCAwLjEtNC40LTEuOS00LjQtNC40ek00NTQuMyAxMjUuOGgyMC4xYzIuNCAwIDQuNCAyIDQuNCA0LjQgMCAyLjQtMiA0LjQtNC40IDQuNGgtMjAuMWMtMi40IDAtNC40LTItNC40LTQuNC0wLjEtMi40IDEuOS00LjQgNC40LTQuNHpNNDkwLjggODkuM2MyLjQgMCA0LjQgMiA0LjQgNC40djIwLjFjMCAyLjQtMiA0LjQtNC40IDQuNC0yLjQgMC00LjQtMi00LjQtNC40VjkzLjdjMC0yLjQgMi00LjQgNC40LTQuNHpNNDkwLjggMTQyLjNjMi40IDAgNC40IDIgNC40IDQuNHYyMC4xYzAgMi40LTIgNC40LTQuNCA0LjQtMi40IDAtNC40LTItNC40LTQuNHYtMjAuMWMwLTIuNCAyLTQuNCA0LjQtNC40eiIgZmlsbD0iI0ZBRUUwMCIgcC1pZD0iNDc5NTEiPjwvcGF0aD48cGF0aCBkPSJNMTMxLjkgNDY1YzEuNy0xLjcgNC41LTEuNyA2LjMgMCAwLjggMC44IDEuMyAyIDEuMyAzLjFzLTAuNSAyLjMtMS4zIDMuMUwxMjQgNDg1LjVjLTAuOCAwLjgtMS45IDEuMy0zLjEgMS4zcy0yLjMtMC41LTMuMS0xLjNjLTEuNy0xLjctMS43LTQuNSAwLTYuM2wxNC4xLTE0LjJ6TTk0LjUgNTAyLjVjMC44LTAuOCAxLjktMS4zIDMuMS0xLjMgMS4yIDAgMi4zIDAuNSAzLjEgMS4zIDEuNyAxLjcgMS43IDQuNSAwIDYuM0w4Ni41IDUyM2MtMC44IDAuOC0xLjkgMS4zLTMuMSAxLjMtMS4yIDAtMi4zLTAuNS0zLjEtMS4zLTAuOC0wLjgtMS4zLTEuOS0xLjMtMy4xczAuNS0yLjMgMS4zLTMuMWwxNC4yLTE0LjN6TTk3LjYgNDg2LjhjLTEuMiAwLTIuMy0wLjUtMy4xLTEuM2wtMTQuMi0xNC4yYy0wLjgtMC44LTEuMy0xLjktMS4zLTMuMXMwLjUtMi4zIDEuMy0zLjFjMS43LTEuNyA0LjUtMS43IDYuMyAwbDE0LjIgMTQuMmMxLjcgMS43IDEuNyA0LjUgMCA2LjMtMC45IDAuNy0yIDEuMi0zLjIgMS4yek0xMjQgNTAyLjVsMTQuMiAxNC4yYzAuOCAwLjggMS4zIDIgMS4zIDMuMXMtMC41IDIuMy0xLjMgMy4xYy0wLjggMC44LTEuOSAxLjMtMy4xIDEuMy0xLjIgMC0yLjMtMC41LTMuMS0xLjNsLTE0LjItMTQuMmMtMS43LTEuNy0xLjctNC41IDAtNi4zIDEuNi0xLjYgNC41LTEuNiA2LjIgMC4xek0xMjEuMyA0OTRjMC0yLjQgMi00LjQgNC40LTQuNGgyMC4xYzIuNCAwIDQuNCAyIDQuNCA0LjRzLTIgNC40LTQuNCA0LjRoLTIwLjFjLTIuNSAwLTQuNC0yLTQuNC00LjR6TTcyLjcgNDg5LjZoMjAuMWMyLjQgMCA0LjQgMiA0LjQgNC40cy0yIDQuNC00LjQgNC40SDcyLjdjLTIuNCAwLTQuNC0yLTQuNC00LjRzMi00LjQgNC40LTQuNHpNMTA5LjIgNDUzYzIuNCAwIDQuNCAyIDQuNCA0LjR2MjAuMWMwIDIuNC0yIDQuNC00LjQgNC40cy00LjQtMi00LjQtNC40di0yMC4xYzAtMi40IDItNC40IDQuNC00LjR6TTEwOS4yIDUwNmMyLjQgMCA0LjQgMiA0LjQgNC40djIwLjFjMCAyLjQtMiA0LjQtNC40IDQuNHMtNC40LTItNC40LTQuNHYtMjAuMWMwLTIuNCAyLTQuNCA0LjQtNC40eiIgZmlsbD0iI0Y4QjYyRCIgcC1pZD0iNDc5NTIiPjwvcGF0aD48cGF0aCBkPSJNOTEyLjIgOTU3LjZoLTI4LjVjLTYuNiAwLTEyLTUuNC0xMi0xMnM1LjQtMTIgMTItMTJoMjguNWM2LjYgMCAxMiA1LjQgMTIgMTJzLTUuNCAxMi0xMiAxMnpNMTQ5LjUgOTU3LjZIMTEzYy02LjYgMC0xMi01LjQtMTItMTJzNS40LTEyIDEyLTEyaDM2LjVjNi42IDAgMTIgNS40IDEyIDEycy01LjQgMTItMTIgMTJ6TTg0OC4zIDk1Ny42SDE4OS44Yy02LjYgMC0xMi01LjQtMTItMTJzNS40LTEyIDEyLTEyaDY1OC41YzYuNiAwIDEyIDUuNCAxMiAxMnMtNS40IDEyLTEyIDEyeiIgZmlsbD0iIzNFM0EzOSIgcC1pZD0iNDc5NTMiPjwvcGF0aD48L3N2Zz4=">
                <p>排行榜</p>
            </div>
        </div>
        <div class="songList">
            <div class="songTop">今日歌单
                <i style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI0NjQ5OTM3MTA2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1MjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzYiIGhlaWdodD0iMzYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTI5NC40IDkwOC44IDY4NC44IDUxMiAyOTQuNCAxMTUuMmMtMjUuNi0yNS42LTI1LjYtNzAuNCAwLTk2IDI1LjYtMjUuNiA3MC40LTI1LjYgOTYgMEw4MzIgNDYwLjhjMTIuOCAxMi44IDE5LjIgMzIgMTkuMiA1MS4yUzg0NC44IDU0NCA4MzIgNTYzLjJsLTQ0MS42IDQ0MS42Yy0yNS42IDI1LjYtNzAuNCAyNS42LTk2IDBDMjYyLjQgOTc5LjIgMjYyLjQgOTM0LjQgMjk0LjQgOTA4Ljh6IiBwLWlkPSIxNTIxIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:24rpx 24rpx; width:24rpx;height:24rpx;"></i>
            </div>
            <div class="songitem">
                <div v-for="(item,index) in songitem" :key="item.id" v-if="index<=5" class="songWidth" @click="songItem(item.id)">
                    <div class="songImg">
                        <img :src="item.picUrl" alt="">
                        <p>
                            <i></i>{{item.playCount}}</p>
                    </div>
                    <p>{{item.name}}</p>
                </div>
            </div>
        </div>
        <div class="songList" style="margin-top:20rpx">
            <div class="songTop">今日单曲
                <i style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI0NjQ5OTM3MTA2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1MjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzYiIGhlaWdodD0iMzYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTI5NC40IDkwOC44IDY4NC44IDUxMiAyOTQuNCAxMTUuMmMtMjUuNi0yNS42LTI1LjYtNzAuNCAwLTk2IDI1LjYtMjUuNiA3MC40LTI1LjYgOTYgMEw4MzIgNDYwLjhjMTIuOCAxMi44IDE5LjIgMzIgMTkuMiA1MS4yUzg0NC44IDU0NCA4MzIgNTYzLjJsLTQ0MS42IDQ0MS42Yy0yNS42IDI1LjYtNzAuNCAyNS42LTk2IDBDMjYyLjQgOTc5LjIgMjYyLjQgOTM0LjQgMjk0LjQgOTA4Ljh6IiBwLWlkPSIxNTIxIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:24rpx 24rpx; width:24rpx;height:24rpx;"></i>
            </div>
            <div class="Single">
                <div v-for="(item,index) in Single" :key="item.id" v-if="index<=4" class="SingleWidth">
                    <div @click="musicUrl(item.id)">
                        <img :src="item.song.album.picUrl" alt="">
                        <div>
                            <p class="name">{{item.name}}</p>
                            <div class="people">
                                <p v-for="(itempeo,indexa) in item.song.album.artists" :key="itempeo.id" v-if="indexa<=1">
                                    {{itempeo.name}} &nbsp;
                                </p>
                            </div>
                        </div>
                    </div>
                    <i @click="JoinTheList(item.id)" style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI1NDI2MTQwNDE3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM4MDMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTE0LjA0OCA2Mi40NjRxOTMuMTg0IDAgMTc1LjYxNiAzNS4zMjh0MTQzLjg3MiA5Ni43NjggOTYuNzY4IDE0My44NzIgMzUuMzI4IDE3NS42MTZxMCA5NC4yMDgtMzUuMzI4IDE3Ni4xMjh0LTk2Ljc2OCAxNDMuMzYtMTQzLjg3MiA5Ni43NjgtMTc1LjYxNiAzNS4zMjhxLTk0LjIwOCAwLTE3Ni42NC0zNS4zMjh0LTE0My44NzItOTYuNzY4LTk2Ljc2OC0xNDMuMzYtMzUuMzI4LTE3Ni4xMjhxMC05My4xODQgMzUuMzI4LTE3NS42MTZ0OTYuNzY4LTE0My44NzIgMTQzLjg3Mi05Ni43NjggMTc2LjY0LTM1LjMyOHpNNzcyLjA5NiA1NzYuNTEycTI2LjYyNCAwIDQ1LjA1Ni0xOC45NDR0MTguNDMyLTQ1LjU2OC0xOC40MzItNDUuMDU2LTQ1LjA1Ni0xOC40MzJsLTE5Mi41MTIgMCAwLTE5Mi41MTJxMC0yNi42MjQtMTguOTQ0LTQ1LjU2OHQtNDUuNTY4LTE4Ljk0NC00NS4wNTYgMTguOTQ0LTE4LjQzMiA0NS41NjhsMCAxOTIuNTEyLTE5Mi41MTIgMHEtMjYuNjI0IDAtNDUuMDU2IDE4LjQzMnQtMTguNDMyIDQ1LjA1NiAxOC40MzIgNDUuNTY4IDQ1LjA1NiAxOC45NDRsMTkyLjUxMiAwIDAgMTkxLjQ4OHEwIDI2LjYyNCAxOC40MzIgNDUuNTY4dDQ1LjA1NiAxOC45NDQgNDUuNTY4LTE4Ljk0NCAxOC45NDQtNDUuNTY4bDAtMTkxLjQ4OCAxOTIuNTEyIDB6IiBwLWlkPSIzODA0IiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:40rpx 40rpx; width:40rpx;height:40rpx;"></i>
                </div>
            </div>
        </div>
        <div class="songList">
            <div class="songTop">今日电台
                <i style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI0NjQ5OTM3MTA2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1MjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzYiIGhlaWdodD0iMzYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTI5NC40IDkwOC44IDY4NC44IDUxMiAyOTQuNCAxMTUuMmMtMjUuNi0yNS42LTI1LjYtNzAuNCAwLTk2IDI1LjYtMjUuNiA3MC40LTI1LjYgOTYgMEw4MzIgNDYwLjhjMTIuOCAxMi44IDE5LjIgMzIgMTkuMiA1MS4yUzg0NC44IDU0NCA4MzIgNTYzLjJsLTQ0MS42IDQ0MS42Yy0yNS42IDI1LjYtNzAuNCAyNS42LTk2IDBDMjYyLjQgOTc5LjIgMjYyLjQgOTM0LjQgMjk0LjQgOTA4Ljh6IiBwLWlkPSIxNTIxIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:24rpx 24rpx; width:24rpx;height:24rpx;"></i>
            </div>
            <div class="songitem">
                <div v-for="(item,index) in Radio" :key="item.id" v-if="index<=2" class="songWidth">
                    <div class="songImg" style="position: relative;">
                        <img :src="item.picUrl" alt="" style="opacity:0.9">
                        <i style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI0NzE3MjA5MDYwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjgxNDUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iODEiIGhlaWdodD0iODEiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTQwOS42IDI4Ni43MnY0NTAuNTZsMzI3LjY4LTIyNS4yOHogbTQwLjk2IDgxLjkybDIwNC44IDE0My4zNi0yMDQuOCAxNDMuMzZ6TTIwNC44IDg2OS4xNzEyTDIzNC4yOTEyIDgzOS42OGE0MzEuOTIzMiA0MzEuOTIzMiAwIDAgMS0zMy4zODI0LTMxLjUzOTJMMTcxLjgyNzIgODM3LjYzMnExNS45NzQ0IDE2LjU4ODggMzIuOTcyOCAzMS41MzkyeiIgcC1pZD0iODE0NiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNDAuOTZBNDcxLjA0IDQ3MS4wNCAwIDAgMCAxNDQuNzkzNiA4MDYuOTEyTDE3NC4wOCA3NzguMjRhNDMwLjA4IDQzMC4wOCAwIDEgMSA5Mi4xNiA4Ny4wNGwtMjguNjcyIDI5LjQ5MTJBNDcxLjA0IDQ3MS4wNCAwIDEgMCA1MTIgNDAuOTZ6IiBwLWlkPSI4MTQ3IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat; background-size:80rpx 80rpx; width:210rpx;height:210rpx;position: absolute;left:0;top: 0;background-color:rgba(0,0,0,.2);background-position:center;"></i>
                    </div>
                    <p>{{item.name}}</p>
                </div>
            </div>
        </div>
        <div class="Playing" @click="listenerButtonPause">
            <div class='wrap'>
                <i style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI1MzU5NTQ5NTE5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxNTIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDEwMjRjLTE0LjMzNiAwLTI1LjYtMTEuMjY0LTI1LjYtMjUuNnYtOTcyLjhjMC0xNC4zMzYgMTEuMjY0LTI1LjYgMjUuNi0yNS42czI1LjYgMTEuMjY0IDI1LjYgMjUuNnY5NzIuOGMwIDE0LjMzNi0xMS4yNjQgMjUuNi0yNS42IDI1LjZ6TTI2OC44IDc4MC44Yy0xNC4zMzYgMC0yNS42LTExLjI2NC0yNS42LTI1LjZ2LTQ4Ni40YzAtMTQuMzM2IDExLjI2NC0yNS42IDI1LjYtMjUuNnMyNS42IDExLjI2NCAyNS42IDI1LjZ2NDg2LjRjMCAxNC4zMzYtMTEuMjY0IDI1LjYtMjUuNiAyNS42ek0yNS42IDY1OS45NjhjLTE0LjMzNiAwLTI1LjYtMTEuMjY0LTI1LjYtMjUuNnYtMjQxLjE1MmMwLTE0LjMzNiAxMS4yNjQtMjUuNiAyNS42LTI1LjZzMjUuNiAxMS4yNjQgMjUuNiAyNS42djI0MS4xNTJjMCAxNC4zMzYtMTEuMjY0IDI1LjYtMjUuNiAyNS42ek03NTUuMiA3ODAuOGMtMTQuMzM2IDAtMjUuNi0xMS4yNjQtMjUuNi0yNS42di00ODYuNGMwLTE0LjMzNiAxMS4yNjQtMjUuNiAyNS42LTI1LjZzMjUuNiAxMS4yNjQgMjUuNiAyNS42djQ4Ni40YzAgMTQuMzM2LTExLjI2NCAyNS42LTI1LjYgMjUuNnpNOTk4LjQgNjU5Ljk2OGMtMTQuMzM2IDAtMjUuNi0xMS4yNjQtMjUuNi0yNS42di0yNDEuMTUyYzAtMTQuMzM2IDExLjI2NC0yNS42IDI1LjYtMjUuNnMyNS42IDExLjI2NCAyNS42IDI1LjZ2MjQxLjE1MmMwIDE0LjMzNi0xMS4yNjQgMjUuNi0yNS42IDI1LjZ6IiBwLWlkPSIyMTUzIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:80rpx 80rpx; width:80rpx;height:80rpx;margin-top:20rpx;margin-left:20rpx"></i>
            </div>

        </div>
    </div>
</template>

<script>
var Fly = require("flyio/dist/npm/wx"); //npm引入方式
var fly = new Fly(); //创建fly实例

export default {
    data() {
        return {
            banner: {},
            autoplay: true,
            songitem: {},
            Single: {},
            Radio: {}
        };
    },
    created() {
        if (wx.getStorageSync("playing")) {
        } else {
            wx.setStorageSync("playing", []);
        }

        fly
            .get("http://localhost:3000/banner", {})
            .then(d => {
                this.banner = d.data.banners;
            })
            .catch(err => {
                console.log(err.status, err.message);
            });
        fly
            .get("http://localhost:3000/personalized", {})
            .then(d => {
                this.songitem = d.data.result;
            })
            .catch(err => {
                console.log(err.status, err.message);
            });
        fly
            .get("http://localhost:3000/personalized/newsong", {})
            .then(d => {
                this.Single = d.data.result;
            })
            .catch(err => {
                console.log(err.status, err.message);
            });
        fly
            .get("http://localhost:3000/personalized/djprogram", {})
            .then(d => {
                this.Radio = d.data.result;
            })
            .catch(err => {
                console.log(err.status, err.message);
            });
    },
    methods: {
        musicUrl(e) {
            const url = "../music/main?id=" + e;
            wx.navigateTo({ url });
        },
        //监听button暂停按钮
        listenerButtonPause: function() {
            let e = wx.getStorageSync("musicId");

            if (!e) {
            } else {
                const url = "../music/main?id=" + e;
                wx.navigateTo({ url });
            }
        },
        bindKeyInput: function(e) {
            this.bindKeyInput = e.target.value;
        },
        searchI: function() {
            let searchValue = this.bindKeyInput;

            const url = "../search/main?search=" + searchValue;
            wx.navigateTo({ url });
        },
        ranking: function() {
            const url = "../ranking/main";
            wx.navigateTo({ url });
        },
        moreSongsList: function() {
            const url = "../MoreSongList/main";
            wx.navigateTo({ url });
        },
        songItem: function(e) {
            const url = "../songItem/main?id=" + e;
            wx.navigateTo({ url });
        },
        JoinTheList: function(e) {
            let chongfu = [];
            let playing = wx.getStorageSync("playing");
            for (let index = 0; index < playing.length; index++) {
                const element = playing[index].id;
                chongfu.push(element)
            }
            for (let index = 0; index < chongfu.length; index++) {
                const elementq = chongfu[index];
                if (elementq == e) {
                    var panduanchongfu = true
                }
            }
            if (!panduanchongfu) {
                let status =  {
                    id: e,
                    status: false
                }
                playing.unshift(status);
                wx.setStorageSync("playing", playing);
            }
        }
    }
};
</script>

<style scoped>
.content {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 40rpx;
}
.banner {
    margin-top: 20rpx;
    width: 670rpx;
    height: 260rpx;
    box-shadow: 0 16rpx 8rpx -8rpx rgba(0, 0, 0, 0.4);
    border-radius: 10rpx;
    overflow: hidden;
}
.bannerSwiper {
    height: 260rpx;
}
.bannerImg {
    min-height: 260rpx;
}
.bannerImg image {
    min-width: 100%;
    height: 260rpx;
}
.Entrance {
    padding: 40rpx 60rpx 0;
    width: 550rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.EntranceIcon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
.EntranceIcon p {
    font-size: 24rpx;
}
.EntranceIcon img {
    width: 72rpx;
    height: 72rpx;
}
.songList {
    margin-top: 40rpx;
    padding-top: 20rpx;
    border-top: 1px solid #f3f3f3;
}
.songTop {
    text-align: center;
    font-size: 32rpx;
    position: relative;
}
.songTop i {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12rpx;
}
.songitem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30rpx;
}
.songWidth {
    width: 210rpx;
    margin-bottom: 30rpx;
}
.songWidth > p {
    padding-top: 10rpx;
    font-size: 24rpx;
    overflow: hidden;
    height: 68rpx;
}
.songImg {
    width: 210rpx;
    height: 210rpx;
    position: relative;
}
.songImg > p {
    width: 200rpx;
    font-size: 20rpx;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    text-align: right;
    padding-right: 10rpx;

    border-radius: 0 0 10rpx 10rpx;
}
.songImg img {
    width: 210rpx;
    height: 210rpx;
    border-radius: 10rpx;
}
.footer {
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 100rpx;
    background-color: #7054dd;
}
.Single {
    margin-top: 30rpx;
}
.SingleWidth {
    width: 670rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.SingleWidth > div {
    display: flex;
    margin-bottom: 30rpx;
}
.SingleWidth > div img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
}
.SingleWidth > div > div {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.name {
    font-size: 32rpx;
}
.people {
    margin-top: 10rpx;
    font-size: 24rpx;
    display: flex;
    color: #999;
    max-width: 420rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.Playing {
    position: fixed;
    bottom: 20rpx;
    right: 40rpx;
    width: 120rpx;
    height: 120rpx;
    background: #fff;
    border: 2px solid #7054dd;
    border-radius: 50%;
    overflow: hidden;
}
.search {
    display: flex;
}
.inputSearch {
    flex: 1;
    margin-right: 20rpx;
    border-radius: 60rpx;
    border: 1px solid #7054dd;
    font-size: 24rpx;
    padding-left: 20rpx;
}
</style>

播放页面
在这里插入图片描述

<template>
    <div class="content">
        <div class="search">
            <input @input="bindKeyInput" type="text" placeholder="搜索歌曲" class="inputSearch">
            <i @click="searchI" style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI1MzU0MTYzNzM1IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE5MjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNDQxLjE5MiAxODEuODMxYzEzMi40OC0xMy43MDQgMjU1LjgyNCA2OC41MjQgMjkyLjM3MSAxOTEuODY4IDQuNTY4IDE4LjI3NC00LjU2OCAyNy40MS0xMy43MDQgMzEuOTc4LTkuMTM3IDAtMjIuODQxLTQuNTY4LTI3LjQxLTE4LjI3NC0zMS45NzgtMTA5LjYzOS0xMzcuMDQ5LTE3OC4xNjMtMjUxLjI1Ni0xNTkuODktMjIuODQxIDQuNTY3LTI3LjQxLTQxLjExNCAwLTQ1LjY4M3pNNzY1LjUzOSA2OTMuNDc5Yy00LjU2OC00LjU2NyAwLTE4LjI3NCA0LjU2Ny0yMi44NDEgNTAuMjUxLTYzLjk1NSA3Ny42NjEtMTQxLjYxNyA3Ny42NjEtMjI4LjQxMyAwLTIwMS4wMDQtMTY0LjQ1OS0zNjUuNDYzLTM2NS40NjMtMzY1LjQ2My0yMDEuMDA0IDAtMzY1LjQ2MyAxNjQuNDU5LTM2NS40NjMgMzY1LjQ2MyAwIDIwMS4wMDQgMTY0LjQ1OSAzNjUuNDYzIDM2NS40NjMgMzY1LjQ2MyA4Ni43OTcgMCAxNjQuNDU5LTI3LjQxIDIyMy44NDYtNzMuMDkyIDkuMTM3LTkuMTM3IDE4LjI3NC0xMy43MDQgMjcuNDEtNC41NjdsMTI3LjkxMyAxMzIuNDhjOS4xMzcgOS4xMzcgMjcuNDEgNC41NjcgMzYuNTQ3LTQuNTY3djBjOS4xMzctOS4xMzcgOS4xMzctMjIuODQxIDAtMzEuOTc4bC0xMzIuNDgtMTMyLjQ4ek00ODIuMzA3IDc2Ni41NzFjLTE3OC4xNjMgMC0zMTkuNzc5LTE0Ni4xODUtMzE5Ljc3OS0zMjQuMzQ4czE0MS42MTctMzE5Ljc3OSAzMTkuNzc5LTMxOS43NzljMTc4LjE2MyAwIDMyNC4zNDggMTQxLjYxNiAzMjQuMzQ4IDMxOS43NzkgMCAxNzguMTYzLTE0Ni4xODUgMzI0LjM0OC0zMjQuMzQ4IDMyNC4zNDh6IiBwLWlkPSIxOTIxIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:56rpx 56rpx; width:56rpx;height:56rpx;"></i>
        </div>
        <div style="margin-top:20rpx;">
            <div v-for="item in musicData" :key="item[0].id" class="SingleWidth" @click="musicUrl(item[0].id)">
                <div>
                    <img :src="item[0].al.picUrl" alt="">
                    <div>
                        <p class="name">{{item[0].name}}</p>
                        <div class="people">
                            <p v-for="(itempeo,indexa) in item[0].ar" :key="indexa">
                                {{itempeo.name}} &nbsp;
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="Playing" @click="listenerButtonPause">
            <div class='wrap'>
                <i style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI1MzU5NTQ5NTE5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxNTIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDEwMjRjLTE0LjMzNiAwLTI1LjYtMTEuMjY0LTI1LjYtMjUuNnYtOTcyLjhjMC0xNC4zMzYgMTEuMjY0LTI1LjYgMjUuNi0yNS42czI1LjYgMTEuMjY0IDI1LjYgMjUuNnY5NzIuOGMwIDE0LjMzNi0xMS4yNjQgMjUuNi0yNS42IDI1LjZ6TTI2OC44IDc4MC44Yy0xNC4zMzYgMC0yNS42LTExLjI2NC0yNS42LTI1LjZ2LTQ4Ni40YzAtMTQuMzM2IDExLjI2NC0yNS42IDI1LjYtMjUuNnMyNS42IDExLjI2NCAyNS42IDI1LjZ2NDg2LjRjMCAxNC4zMzYtMTEuMjY0IDI1LjYtMjUuNiAyNS42ek0yNS42IDY1OS45NjhjLTE0LjMzNiAwLTI1LjYtMTEuMjY0LTI1LjYtMjUuNnYtMjQxLjE1MmMwLTE0LjMzNiAxMS4yNjQtMjUuNiAyNS42LTI1LjZzMjUuNiAxMS4yNjQgMjUuNiAyNS42djI0MS4xNTJjMCAxNC4zMzYtMTEuMjY0IDI1LjYtMjUuNiAyNS42ek03NTUuMiA3ODAuOGMtMTQuMzM2IDAtMjUuNi0xMS4yNjQtMjUuNi0yNS42di00ODYuNGMwLTE0LjMzNiAxMS4yNjQtMjUuNiAyNS42LTI1LjZzMjUuNiAxMS4yNjQgMjUuNiAyNS42djQ4Ni40YzAgMTQuMzM2LTExLjI2NCAyNS42LTI1LjYgMjUuNnpNOTk4LjQgNjU5Ljk2OGMtMTQuMzM2IDAtMjUuNi0xMS4yNjQtMjUuNi0yNS42di0yNDEuMTUyYzAtMTQuMzM2IDExLjI2NC0yNS42IDI1LjYtMjUuNnMyNS42IDExLjI2NCAyNS42IDI1LjZ2MjQxLjE1MmMwIDE0LjMzNi0xMS4yNjQgMjUuNi0yNS42IDI1LjZ6IiBwLWlkPSIyMTUzIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PC9zdmc+); background-size:80rpx 80rpx; width:80rpx;height:80rpx;margin-top:20rpx;margin-left:20rpx"></i>
            </div>

        </div>
        <div class="Refresh" @click="Refresh">
            <div class='wrap'>
                <i style="background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTI1NTAwNTM2MzA3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUwNjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUwLjM3MTA3MiA1MzIuNzk1NjI5bC04NC4zOTgyMDItODQuMzkzMDg1Yy02LjEwMTk3NS02LjA5Njg1OC0xNC4wOTM5OTYtOS4xNDUyODctMjIuMDg3MDQxLTkuMTQzMjQxLTcuOTk1MDkxLTAuMDAxMDIzLTE1Ljk4ODEzNiAzLjA0NzQwNi0yMi4wNzk4NzggOS4xNDgzNTdsLTg0LjUxOTk3NSA4NC41MzAyMDljLTEyLjIwMDg4IDEyLjE5NTc2My0xMi4yMDA4OCAzMS45NzExNTYgMCA0NC4xNzEwMTIgNi4wOTk5MjggNi4wOTQ4MTIgMTQuMDkxOTUgOS4xNDUyODcgMjIuMDgyOTQ4IDkuMTQ1Mjg3czE1Ljk5MzI1My0zLjA1MDQ3NiAyMi4wODI5NDgtOS4xNTA0MDRsMzMuMTcxNDk0LTMzLjE3NTU4N2MtMTYuMDE5ODU5IDE3NS4zMzAyMTQtMTYzLjgxMzkyNiAzMTMuMTQ1LTM0My4yNTA2NjggMzEzLjE0NS0xOTAuMDk2NTIzIDAtMzQ0Ljc0OTgxMi0xNTQuNjUzMjg5LTM0NC43NDk4MTItMzQ0Ljc0OTgxMnMxNTQuNjUzMjg5LTM0NC43NTQ5MjggMzQ0Ljc0OTgxMi0zNDQuNzU0OTI4YzkyLjA4NDI1NSAwIDE3OC42NTgwMDYgMzUuODU5NzE5IDI0My43NzkxNjYgMTAwLjk3NTc2MiAxMi4yMDA4OCAxMi4yMDA4OCAzMS45NjYwMzkgMTIuMjAwODggNDQuMTY2OTE5IDAgMTIuMjAwODgtMTIuMTk1NzYzIDEyLjIwMDg4LTMxLjk3MTE1NiAwLTQ0LjE2NjkxOS03Ni45MTQ3NjQtNzYuOTE5ODgtMTc5LjE3NjgyMi0xMTkuMjc2NTctMjg3Ljk0NjA4NS0xMTkuMjc2NTctMjI0LjU0MzA1NiAwLTQwNy4yMTc1MzkgMTgyLjY3OTU5OS00MDcuMjE3NTM5IDQwNy4yMjI2NTUgMCAyMjQuNTM3OTM5IDE4Mi42NzQ0ODMgNDA3LjIxNzUzOSA0MDcuMjE3NTM5IDQwNy4yMTc1MzkgMjEyLjYwNDE0MiAwIDM4Ny41NzQxNTMtMTYzLjgwMDYyMyA0MDUuNTkxNTA1LTM3MS44MDgwNzRsMjkuMjM5OTUxIDI5LjIzODkyOGM2LjA5OTkyOCA2LjA5NDgxMiAxNC4wOTE5NSA5LjE0NTI4NyAyMi4wODI5NDggOS4xNDUyODcgNy45OTA5OTggMCAxNS45ODMwMi0zLjA1MDQ3NiAyMi4wODI5NDgtOS4xNTA0MDRDOTYyLjU3MTk1MiA1NjQuNzcwODc3IDk2Mi41NzE5NTIgNTQ0Ljk5NTQ4NSA5NTAuMzcxMDcyIDUzMi43OTU2Mjl6IiBwLWlkPSI1MDYxIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PHBhdGggZD0iTTQxMS4yNDQyNDggNDI5LjA5OTkxOGwyMi4wODI5NDgtMjIuMDgyOTQ4YzEyLjIwMDg4LTEyLjE5NTc2MyAxMi4yMDA4OC0zMS45NzExNTYgMC00NC4xNjY5MTktMTIuMjAwODgtMTIuMjAwODgtMzEuOTY2MDM5LTEyLjIwMDg4LTQ0LjE2NjkxOSAwbC0yMi4wODI5NDggMjIuMDgyOTQ4Yy0xMi4yMDA4OCAxMi4xOTU3NjMtMTIuMjAwODggMzEuOTcxMTU2IDAgNDQuMTY2OTE5IDYuMDk5OTI4IDYuMDk5OTI4IDE0LjA5MTk1IDkuMTUwNDA0IDIyLjA4Mjk0OCA5LjE1MDQwNFM0MDUuMTQzMjk3IDQzNS4xOTk4NDcgNDExLjI0NDI0OCA0MjkuMDk5OTE4eiIgcC1pZD0iNTA2MiIgZmlsbD0iIzcwNTRkZCI+PC9wYXRoPjxwYXRoIGQ9Ik01NjUuODQ2MzcyIDUzOS41MzYxNDZsLTIyLjA4Mjk0OCAyMi4wODI5NDhjLTEyLjIwMDg4IDEyLjE5NTc2My0xMi4yMDA4OCAzMS45NzExNTYgMCA0NC4xNjY5MTkgNi4wOTk5MjggNi4wOTk5MjggMTQuMDkxOTUgOS4xNTA0MDQgMjIuMDgyOTQ4IDkuMTUwNDA0czE1Ljk4MzAyLTMuMDUwNDc2IDIyLjA4Mjk0OC05LjE1MDQwNGwyMi4wODI5NDgtMjIuMDgyOTQ4YzEyLjIwMDg4LTEyLjE5NTc2MyAxMi4yMDA4OC0zMS45NzExNTYgMC00NC4xNjU4OTZDNTk3LjgxMjQxMSA1MjcuMzM1MjY3IDU3OC4wNDcyNTIgNTI3LjMzNTI2NyA1NjUuODQ2MzcyIDUzOS41MzYxNDZ6IiBwLWlkPSI1MDYzIiBmaWxsPSIjNzA1NGRkIj48L3BhdGg+PHBhdGggZD0iTTMzNi40NTM4NjggNTIxLjA5MzA5OWMtNC44Njk5MTQgMjAuNjc5OTk1LTQuODA5NTM5IDYzLjk5NzU3IDI2LjM3MzY3MSA5NS4xNzU2NjMgMjIuNjYzMTYyIDIyLjY1ODA0NiA1MS45NDQwNDYgMjkuMDMyMjIgNzQuMTgwNDkgMjkuMDMyMjIgOC4xOTQ2MzYgMCAxNS40MzM1MDQtMC44Njg3ODcgMjEuMDI1ODcyLTIuMTA0OTQxIDE2LjY5NDIxNy0zLjY5MTA2NSAyNy4xMTU1NjgtMjAuMDcwMTA0IDIzLjYzODM3My0zNi44MTAzNzEtMy40NzcxOTQtMTYuNzMwMDMzLTE5Ljk2ODc5Ny0yNy41NzgxMDItMzYuNzU0MDg5LTI0LjI1ODQ5Ny0wLjI1Mzc4IDAuMDM1ODE2LTIzLjUxNjYgNC4zNzY2ODEtMzcuOTIzNzI4LTEwLjAzMDQ0Ny0xNC4wMTAwODUtMTQuMDIwMzE4LTkuOTUzNjk5LTM1LjUzOTQyNC05LjY1ODk4Ny0zNy4wMDM3NzUgMy43NDEyMDctMTYuNjczNzUxLTYuNjM5MjExLTMzLjMwMjQ3Ny0yMy4zMTI5NjItMzcuMjMxOTczQzM1Ny4yNjU4NyA0OTMuODkwNTUgMzQwLjQwODk0NyA1MDQuMjk2NTUxIDMzNi40NTM4NjggNTIxLjA5MzA5OXoiIHAtaWQ9IjUwNjQiIGZpbGw9IiM3MDU0ZGQiPjwvcGF0aD48L3N2Zz4=); background-size:80rpx 80rpx; width:80rpx;height:80rpx;margin-top:20rpx;margin-left:20rpx"></i>
            </div>

        </div>
    </div>
</template>

<script>
var Fly = require("flyio/dist/npm/wx"); //npm引入方式
var fly = new Fly(); //创建fly实例
export default {
    data() {
        return {
            songItem: {},
            musicData: [],
            playing: []
        };
    },
    onLoad: function() {
        let playing = wx.getStorageSync("playing");

        let playingzheng = [];
        wx.setNavigationBarTitle({
            title: "播放列表" //页面标题为路由参数
        });

        playing = playing.reverse();
        for (let index = 0; index < playing.length; index++) {
            const element = playing[index];

            var musicDetails =
                "http://localhost:3000/song/detail?ids=" + element.id;
            fly
                .get(musicDetails, {})
                .then(d => {
                    this.musicData.push(d.data.songs);
                })
                .catch(err => {
                    console.log(err.status, err.message);
                });
        }
    },
    methods: {
        bindKeyInput: function(e) {
            this.bindKeyInput = e.target.value;
        },
        searchI: function() {
            let searchValue = this.bindKeyInput;

            const url = "../search/main?search=" + searchValue;
            wx.navigateTo({ url });
        },
        musicUrl(e) {
            const url = "../music/main?id=" + e;
            wx.navigateTo({ url });
        },
        //监听button暂停按钮
        listenerButtonPause: function() {
            let e = wx.getStorageSync("musicId");

            if (!e) {
            } else {
                const url = "../music/main?id=" + e;
                wx.navigateTo({ url });
            }
        },
        Refresh: function() {
            let playing = wx.getStorageSync("playing");

            playing = playing.reverse();
            for (let index = 0; index < playing.length; index++) {
                const element = playing[index];

                var musicDetails =
                    "http://localhost:3000/song/detail?ids=" + element.id;
                fly
                    .get(musicDetails, {})
                    .then(d => {
                        this.musicData.push(d.data.songs);
                    })
                    .catch(err => {
                        console.log(err.status, err.message);
                    });
            }
        }
    }
};
</script>

<style scoped>
.content {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 40rpx;
}
.search {
    display: flex;
}
.inputSearch {
    flex: 1;
    margin-right: 20rpx;
    border-radius: 60rpx;
    border: 1px solid #7054dd;
    font-size: 24rpx;
    padding-left: 20rpx;
}

.Playing {
    position: fixed;
    bottom: 20rpx;
    right: 40rpx;
    width: 120rpx;
    height: 120rpx;
    background: #fff;
    border: 2px solid #7054dd;
    border-radius: 50%;
    overflow: hidden;
}
.Refresh {
    position: fixed;
    bottom: 20rpx;
    left: 40rpx;
    width: 120rpx;
    height: 120rpx;
    background: #fff;
    border: 2px solid #7054dd;
    border-radius: 50%;
    overflow: hidden;
}

.SingleWidth {
    width: 670rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.SingleWidth > div {
    display: flex;
    margin-bottom: 30rpx;
}
.SingleWidth > div img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
}
.SingleWidth > div > div {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.name {
    font-size: 32rpx;
}
.people {
    margin-top: 10rpx;
    font-size: 24rpx;
    display: flex;
    color: #999;
    max-width: 420rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>


安装-源码获取
关注微信公众号【码农园区】，回复【uniapp源码】即可获取

运行
$ node app.js
服务器启动默认端口为 3000, 若不想使用 3000 端口 , 可使用以下命令 : Mac/Linux

$ PORT=4000 node app.js
windows 下使用 git-bash 或者 cmder 等终端执行以下命令 :

$ set PORT=4000 && node app.js

因涉及到账号资质问题，此小程序并没有上线

此源码仅可用作学习和交流,请勿用作商业用途及销售获利

源码截图：

在这里插入图片描述

说明

如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下 谢谢~

源码获取关注公众号「码农园区」，回复 【uniapp源码】
在这里插入图片描述

梦之归途
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序 初学——【音乐播放器】
qq_56238454的博客
12-12 1万+
本人在学习微信小程序【音乐播放器】时的简单介绍
微信小程序音乐播放器.zip
03-16
微信小程序音乐播放器.zip 学习使用
微信小程序源码带后台音乐播放器带后端
11-18
微信小程序源码带后台音乐播放器带后端本资源系百度网盘分享地址
微信小程序中实现——【音乐播放器】
热门推荐
py20010218的博客
12-10 2万+
微信小程序实现音乐播放器
微信小程序｜音乐播放器小程序设计与实现
最新发布
BS009的博客
03-26 2099
此次音乐播放器小程序的开发，需要用到的知识不仅涉及到界面设计与功能设计方面的知识，还需要涉及到数据库与编程语言上面的知识，这些知识点对于一个即将毕业的学生来说，一是为了巩固在校所学相关专业知识；二是为了让学生学会如何将专业理论知识运用于现实软件的开发过程；三是让学生明白知识是无穷无尽的，要时刻明白活到老学到老的真正含义，让学生要养成时刻学习的习惯，同时也要相信通过此次程序的开发，会让学生对于专业知识的理解与软件开发水平的提高有着极大的帮助。
小程序基本命令
aiven1637的博客
10-30 3222
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序实现音乐播放器（2）
richest_qi的博客
07-21 1万+
是全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。从微信客户端6.7.2版本开始，如果需要小程序切后台后继续播放音频，需要在全局配置文件app.json。属性，如"requiredBackgroundModes"["audio"]实例，可以通过wx.getBackgroundAudioManager()中配置requiredBackgroundModes。............
微信小程序音乐播放器开发
10-15
主要为大家详细介绍了微信小程序音乐播放器开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript基于微信小程序的音乐播放器源码.zip
06-02
JavaScript基于微信小程序的音乐播放器源码JavaScript基于微信小程序的音乐播放器源码JavaScript基于微信小程序的音乐播放器源码JavaScript基于微信小程序的音乐播放器源码JavaScript基于微信小程序的音乐播放器源码...
微信小程序实现一个音乐播放器的功能
weixin_71893790的博客
12-21 2427
微信小程序实现一个音乐播放器的功能
微信小程序--音乐播放器
河里的草_increase
07-24 1万+
微信小程序练习--音乐播放器 说明： 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。 由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览二维码存在有效时长，有兴趣的可以自己试着运行程序，在运行程序之前更换mp3外链的地址，以防出错。mp3外链（音乐外链在线获取_音乐外链生成网站_音乐在线听-mp3外链网 (xf1433.com)）。 喜欢的可以点个赞，如果有问题或者想要完整的
微信小程序音乐播放器【含源码】
m0_58520840的博客
06-25 1887
音乐播放器模仿
微信小程序音乐播放器步骤及代码
特创数字
02-16 3916
完整步骤： 1. 创建小程序项目：使用微信开发者工具创建一个小程序项目，并在项目中添加一个页面，用于播放音乐。 2. 定义数据结构：定义一个数据结构，用于存储音乐信息，包括歌曲名称、歌手、播放时长等信息。 3. 实现播放功能：实现播放功能，包括播放、暂停、停止等功能。 4. 实现界面：使用微信小程序的界面框架，实现音乐播放器界面，包括歌曲列表、播放控制等。 代码示例： // 定义数据结构 var musicData = { name: '', singer: '', duration: 0 }; //
音乐播放器微信小程序的设计与实现（附源码）
qq_15801219的博客
11-24 1486
今天带来的是基于微信小程序的音乐播放器，为满足微信使用者对于音乐播放器操作简单，不占内容的需求，提出一款基于微信小程序的音乐播放器的完整开发思路和设计实现方法，为后续开发者提供基础。本音乐播放器实现了音乐播放，资源搜索，图文简介等功能。实际运行结果表明，音乐播放器运行稳定，界面美观，操作简单，占内存少。💗博主介绍：✌全网粉丝10W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者。👇🏻 精彩专栏 推荐订阅👇🏻计算机毕业设计精品项目案例-200套🌟。
微信小程序音乐播放功能代码
m0_57790713的博客
07-16 3344
处要替换成你真正的音乐文件地址。此外，还可以根据需要添加其他的音乐控制功能，例如音量调节、循环播放等。最后，在微信开发者工具中预览或真机调试你的小程序，点击对应的按钮即可实现音乐的播放、暂停和停止功能。咱就是话不多说直接上代码，不让亲戚老爷们苦等。需要注意的是，在代码中的。
【项目实战】springboot微信小程序 uniapp在线音乐播放器小程（源码 数据库 文档报告）
qq_2105837402的博客
09-21 926
基于微信小程序在线音乐播放小程序中，用户可以在小程序在线听歌、播放音乐、收藏音乐、点赞、评论音乐、查看通知公告、在论坛中交流音乐相关的知识等。管理员在后台中管理音乐的分类、上传音乐、回复评论音乐的内容、可视化统计音乐的类型、统计音乐的收藏数量，同时还可以管理用户、管理论坛、发布公告通知等模块
【微信小程序——云音乐播放器】
LZB_XM的博客
12-12 749
swiper常用属性：可选值说明默认Boolean是否显示面板指示点，默认为falseColor指示点颜色，默认为rgba(0,0,0,.3)Color当前选中的指示点颜色，默认为#000000autoplayBoolean是否自动切换，默认为falsecurrentNumber当前所在滑块的index，默认为0String当前所在滑块的item-id（不能同时指定current）intervalNumber自动切换时间间隔（毫秒），默认为5000。
微信小程序音乐播放器实践
Ifeng_iPhone的博客
08-03 2181
微信小程序音乐播放器项目实战，实现搜索音乐，同步歌词，控制播放等功能

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦之归途

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值