本文节选自高洪涛撰写的《从零开始学微信小程序开发》一书，由电子工业出版社出版。
责编：陈秋歌，关注微信开发等领域，寻求报道或者投稿请发邮件至chenqg#csdn.net。

本文带大家开发一个音乐播放器微信小程序——微音乐。该播放器通过QQ音乐接口获取音乐相关数据，首先在页面中显示一个音乐分类列表，用户选择分类之后从QQ音乐中查询获取符合要求的音乐列表，在这个音乐列表中单击一首音乐即进入播放页面进行播放。另外，还需要做一个查询功能，可按歌手或音乐名称进行查询。

QQ音乐API

与“微天气”案例类似，本案例也是通过互联网中已有的API来获取音乐信息。在互联网上这类API很多，本案例使用“易源接口”网站提供的QQ音乐接口，易源接口网址如下：

https://www.showapi.com/

认识易源接口网站

在浏览器中打开易源接口网站，可看到如图1所示的界面。从网页左边的“API分类导航”列表可看到，该网站提供了不同种类的API，在大类中又有很多小类，天气预报的接口也有。

在易源接口网站中提供的接口很多是免费的，要使用这些免费接口，也需要在网站中注册账号，然后申请使用。申请成功之后，在“我的应用”中就可看到申请应用的appid，如图2所示。在应用同一行的secret列单击“查看密钥”，将弹出对话框显示该应用的密钥。将appid和secret复制下来，以备程序中使用。

小程序

图1 易源接口

小程序

图2 我的接口

QQ音乐接口

本案例使用易源接口提供的“QQ音乐”接口，其说明如图3所示。可以看到，这个接口是免费使用的。

小程序

图3 QQ音乐接口

在图3所示页面的左侧“接入点列表”中可看到该API提供了3个接入点。

1. 热门榜单

在图3所示页面中，单击左侧的“热门榜单”，将显示该接入点的详细信息。

热门榜单接入点的URL地址如下：

http://route.showapi.com/213-4

请求该URL地址时，还需要传入一些参数，主要有以下这些。

showapi_appid：这是用户申请的appid。
showapi_sign：这是用户应用的密钥。
topid：这是音乐分类编码（如5表示内地音乐，6表示港台音乐）。

该接入点返回的JSON数据格式如下（与易源接口官方提示的内容有些不同）：

{    "showapi_res_code": 0,    "showapi_res_error": "",    "showapi_res_body": {        "ret_code": 0,        "pagebean": {            "songlist": [{                "songname": "一定要幸福 (《咱们相爱吧》电视剧主题曲)",                "seconds": 294,                "albummid": "003V7SAg16Ed0F",                "songid": 109127914,                "singerid": 4607,                "albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/                          0/F/003V7SAg16Ed0F.jpg",                "albumpic_small": "http://i.gtimg.cn/music/photo/                       mid_album_90/0/F/003V7SAg16Ed0F.jpg",                "downUrl": "http://dl.stream.qqmusic.qq.com/109127914.mp3?                        vkey=3B0957F1A4CDCAD8875251834B7C0DA2D4287FA3BC1A5F73AA                         002D3833AE5685FE6168E75BBDB277CB0635E3B483CB6E3A073                         E7A1B9723A4&guid=2718671044",                "url": "http://ws.stream.qqmusic.qq.com/                         109127914.m4a?fromtag=46",                "singername": "张靓颖",                "albumid": 1679081            },                 ……            ],            "total_song_num": 100,            "ret_code": 0,            "update_time": "2016-11-17",            "color": 0,            "cur_song_num": 100,            "comment_num": 1010,            "currentPage": 1,            "song_begin": 0,            "totalpage": 1        }    }}

从上面的JSON数据可看出，该接入点返回的数据中，音乐列表数据保存在songlist数组中，该数组中的每一个元素是一首音乐的信息，各字段的含义如下：

"songname":音乐名称,"seconds": 时长,"songid": 音乐ID,"singerid": 歌手id,"albumpic_big": 专辑大图片，高宽300,"albumpic_small": 专辑小图片，高宽90,"downUrl": mp3下载链接,"url": 流媒体地址,"singername": 歌手名,"albumid": 专辑id

2. 根据歌名、人名查询歌曲

热门榜单接入点的URL地址如下：

http://route.showapi.com/213-1

请求该URL地址时，还需要传入一些参数，主要有以下这些。

showapi_appid：这是用户申请的appid。
showapi_sign：这是用户应用的密钥。
keyword：查询关键字（人名或歌名）。

该接入点返回的JSON数据格式如下所示：

{    "showapi_res_code": 0,    "showapi_res_error": "",    "showapi_res_body": {        "ret_code": 0,        "pagebean": {            "w": "刘德华",            "allPages": 14,            "ret_code": 0,            "contentlist": [{                "m4a": "http://ws.stream.qqmusic.qq.com/                       179990.m4a?fromtag=46",                "media_mid": "002Ly1Xh1pwBGt",                "songid": 179990,                "singerid": 163,                "albumname": "幻影中国巡回演唱会Live",                "downUrl": "http://dl.stream.qqmusic.qq.com/179990.mp3                       ?vkey=1BD3868E2A0278D184D1FEC2A9391F1A673AAF1FCAB59DEA                       F0DCCF80ED58E564978D1EAAF5E53B85B0E5D30ACFF2AFBF32296                       4C86ED8B14D&guid=2718671044",                "singername": "刘德华",                "songname": "练习 (Live)",                "strMediaMid": "002Ly1Xh1pwBGt",                "albummid": "004UpCFj3kyano",                "songmid": "002Ly1Xh1pwBGt",                "albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/                        n/o/004UpCFj3kyano.jpg",                "albumpic_small": "http://i.gtimg.cn/music/photo/                        mid_album_90/n/o/004UpCFj3kyano.jpg",                "albumid": 15531            },            ,],            "currentPage": 1,            "notice": "",            "allNum": 393,            "maxResult": 30        }    }}

可以看出，这与使用热门榜单接入点获取的数据格式类似，只是这里多了一些查询相关的数据，另外，返回的音乐列表不是保存在songlist数组中了，而是保存contentlist数组中，流媒体地址不是保存在url中，而是保存在m4a中。其他数据的含义基本相同，这里就不列出来了。

本案例主要使用这两个接入点，读者可在本案例的基础上做歌词显示功能，则需要使用到“根据歌曲id查询歌词”这个接入点。

另外，在访问某一个接入点后如果返回“没有订购套餐”的错误结果，由于本API是免费使用的，出现这个提示说明用户对接入点还未订购。可在图3所示页面中单击“价格一览表”，显示如图4所示页面，单击左侧的“为所有免费接入点一键订购”即可正常使用所有免费接入点了。

小程序

图4 为所有免费接入点一键订购

界面设计

“微音乐”需要设计4个界面，分别是：

（1）音乐分类列表界面，如图5所示，显示音乐的分类列表。

（2）音乐列表界面，如图6所示，这是在图5所示界面中选择某一分类中，列出该分类下的音乐曲目，为了使界面更好看一点，在曲目上方显示一张图片，这张图片直接获取第一首曲目的专辑封面图片。

（3）音乐播放界面，如图7所示，在图6所示曲目列表中单击一首曲目，就进入本界面，上方显示专辑图片，下方显示歌名、歌手名称和播放按钮，单击播放按钮就可播放。

（4）搜索界面，如图8所示，在输入框中输入关键字，单击“立即搜索”按钮进行搜索，结果显示在下方的列表中，单击结果中的某一首歌曲，进入图7所示播放界面开始播放。

小程序

创建项目

界面初稿设计出来之后，就可以考虑进入实际程序开发过程了。

准备资源

从图5至图8所示的4个页面可看出，本案例中需要显示一些图标和图片，其中专辑封面图片通过API动态获取，而每首歌典前面出现的图标就需要在编写代码之前准备好，还有图7中的播放按钮图标，以及与其对应的暂停播放的图标。

另外，在界面下方有一个工具条，最好也设计出对应的图标。对于工具条中的图标还需要设计出正常状态和选择状态两种不同的图标，方便用户区分当前选择是哪一个tab。

通常，这些图标可以从网络中去搜索，然后再用Photoshop等图像处理软件进行简单的加工即可。本案例使用到的图标如图9所示。

小程序

图9 案例用到的图标

在项目中新建一个名为images的子目录，将如图9所示的设计好的图标复制到该子目录备用。

创建项目

首先按以下步骤创建出项目。

（1）创建名为ch12的项目目录。

（2）启动微信小程序开发工具，在启动界面中单击“添加项目”按钮，打开如图10所示的对话框。

小程序

图10 添加项目

（3）在图10所示对话框中填写好相应的项目名称，并选择保存项目的目录，单击“添加项目”按钮即可创建好一个项目的框架。

（4）打开app.json文件，修改页面数组、修改显示标题并增加tabBar的设置，具体内容如下：

{  "pages":[    "pages/index/index",    "pages/play/play",    "pages/list/list",    "pages/search/search",    "pages/logs/logs"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "微音乐",    "navigationBarTextStyle":"black"  },  "tabBar": {    "color":"#818181",    "backgroundColor":"black",    "selectedColor":"green",    "list": [{      "pagePath": "pages/index/index",      "text": "音乐列表",      "iconPath":"/images/music.png",      "selectedIconPath":"/images/music-s.png"    }, {      "pagePath": "pages/play/play",      "iconPath":"/images/playing.png",      "selectedIconPath":"/images/playing-s.png",      "text": "正在播放"    }, {      "pagePath": "pages/search/search",      "iconPath":"/images/search.png",      "selectedIconPath":"/images/search-s.png",      "text": "搜索"    }]  }}

由于在pages数组中增加了3个页面，但这3个页面还没有创建，因此保存app.json时会出现错误提示，可以不管这个提示。当然，也可以将各页面创建好之后再修改app.json文件。

（5）为了使项目不提示错误，接下来在pages目录中分别创建list、play和search等3个子目录，并分别创建对应的wxml、js、wxss等文件。这样，项目就不会出现错误提示了。

至此，项目结构搭建完成，接下来分别开发4个页面代码即可。

创建配置文件

在项目中要使用到易源接口提供的QQ音乐API，这个API的接入点地址和身份认证参数之类的串在一起比较长，并且在多个页面中需要使用到，因此最好将这些内容封装在一个外部文件中，需要时引入即可。

在项目根目录创建一个名为config.js的文件，编写如下代码：

(function(module){    var exports=module.exports={};    //易源接口应用ID    var appid=27426;     //接口密钥    var secret="f7a6a43aef0649b5bd1a051e8f5aa536";      //GET方式的参数    var param="?showapi_appid=" + appid+"&showapi_sign=" + secret;      //热门榜单访问接口    var hotUrl = "http://route.showapi.com/213-4" + param;      //根据歌名、人名查询歌曲接口    var searchByNameUrl ="http://route.showapi.com/213-1" + param;      var searchByIdUrl = "http://route.showapi.com/213-2" + param;    module.exports = {        config: {            hotUrl:hotUrl,            searchByNameUrl:searchByNameUrl,            searchByIdUrl:searchByIdUrl                    }    };})(module);

以上代码将易源接口的接入点URL、appid和secret等都封装起来，并以config对象的属性形式提供。其他页面引入config.js之后，就可使用config.hotUrl这样的形式直接引用了。

音乐分类列表

音乐分类列表作为本项目的主页面，将其代码编写在index页面中。因此，将创建项目时自动创建的index.wxml、index.js等文件中原有内容删除，然后在这里编写相应的代码即可。

开发页面文件

打开index.wxml文件，删除原有内容，重新输入以下wxml代码：

view class="container"  view class="rank-list"    block  wx:for="{{ranks}}"  wx:key="{{item.type}}"      view class="rank-item"        navigator url="/pages/list/list?type={{item.type}}" class="text"             {{item.text}}/navigator        view class="arrow"/      /view    /block  /view/view

可以看出，音乐分类列表的页面布局代码很简单，只是从ranks中取出数据，循环渲染到页面中即可，每一项是一个分类，单击分类后导航到list页面，并将分类信息传递到list页面进行处理。

开发页面样式文件

在index.wxml文件中，为每一个组件都设置class属性，接下来在index.wxss中编写对应的样式代码即可。打开index.wxss文件，删除原有内容，然后输入以下样式代码：

.rank-list {  width: 100%;}/*每一个分类*/.rank-item {  width: 100%;  text-align: left;  height: 3rem;  line-height: 3rem;  border-bottom: 1px solid #eee;  position: relative;}/*分类文本*/.rank-item .text {  padding-left: 1rem;}/*分类名右侧的箭头图标*/.rank-item .arrow {  width: 10px;  height: 10px;  border-top: 2px solid #999;  border-right: 2px solid #999;  position: absolute;  right: 20px;  transform: rotate(45deg);  top: 20px;}

开发页面逻辑代码

在index.wxml文件中绑定了一个名为ranks的变量，这个对象中保存了音乐分类的信息，需要在逻辑代码中进行定义。打开index.js文件，删除原有内容，输入以下JS代码：

Page({  data:{    //音乐分类    ranks:[      {type:26,text:"热歌"},      {type:23,text:"销量"},      {type:18,text:"民谣"},      {type:19,text:"摇滚"},      {type:5,text:"内地"},      {type:6,text:"港台"},      {type:16,text:"韩国"},      {type:17,text:"日本"},      {type:3,text:"欧美"}      ],  },})

可以看出，这里的JS代码很简单，只是定义了一个音乐分类的数组。最终反映在界面上的分类排列顺序是以这个数组中各元素的顺序为准的，因此，可以在这里进行调整，使最终显示的分类顺序符合自己的要求。

将index.wxml、index.wxss和index.js这3个文件编写好之后，保存，在开发工具左侧的模拟器中就可看到如图11所示的效果。

小程序

图11 音乐分类列表

至此，音乐列表页面开发完成。这个页面很简单，也不需要访问网络，只是将固定的音乐分类显示出来即可。

音乐列表

在图11所示的音乐分类列表中单击某一个分类，就会显示该分类的音乐列表，接下来就来开发音乐列表的相关代码。

开发页面文件

音乐列表UI如图6所示，上方一个图片区域，下面是音乐列表。由于音乐列表的数量可能很多，一屏显示不完，因此使用scroll-view组件进行滚动显示。

打开list.wxml文件，在其中编写以下代码：

scroll-view  scroll-y="true"     view class="board"        image src="{{board}}" /    /view    view class="songlist"        block wx:for="{{songlist}}"  wx:key="song_id"            view class="songitem"                navigator url="/pages/play/play?songid={{item.songid}}"             class="song-play"image src="/images/play.png" //navigator                navigator url="/pages/play/play?songid={{item.songid}}"                            class="song-detail"                    view class="song-title"{{item.songname}}/view                    view class="song-subtitle"{{item.singername}} -                               {{item.seconds}}/view                /navigator            /view        /block    /view    loading hidden="{{!loading}}"    正在加载音乐……  /loading/scroll-view

在以上代码中，首先使用image组件绑定了一个名为board的变量显示一幅图片（专辑封面图片）；接下来显示分类的音乐列表，这里使用循环渲染songlist这个数组中的内容，将音乐的名称、歌手名称等信息显示出来，并通过navigator组件进行导航，当用户单击音乐时导航到play页面进行播放；最后，在下方添加了一个loading组件，用来显示加载音乐列表时的提示信息。

开发页面样式文件

根据上面的wxml文件中定义的class，编写对应的样式代码。打开list.wxss文件，在其中输入以下样式代码：

/*顶部专辑封面图片*/.board image{    width: 100%;    height: 300px;    border-bottom: 1px solid #eee;}/*音乐列表*/.songlist {  width: 100%;  overflow-x: hidden;  overflow-y: visible;  font-size: 0.8rem;}/*每一个音乐项目*/.songitem{  height: 3rem;  line-height: 1.5rem;  display: flex;  border-bottom: 1px solid #eee;  padding: 10rpx;  width: 100%;}/*选择的音乐项目*/.songitem:active {  
              
                点击这里免费试用，快速创建您的专属小程序
              
              
                标签：
                微信小程序
                小程序
                小程序是什么