前段时间的第一篇文章开发了微信小程序的入门级功能，今天我们来开发一个微信小程序单页，展示音乐播放和音乐列表。

这是我已经开发的微信小程序，可以玩了。

这是我的项目目录

微信小程序页面的标签，VIEW标签相当于网页的DIV，但是这里没有对象，所以不能使用或选择器。对标签进行操作需要使用MINA框架的绑定符号。相关文档可以参见微信小程序开发文档。

样式文件，我在这里引入了背景图片，其余的布局和网页是一样的。

接下来看看脚本文件

Page类是原始页面的脚本对象，可以这么理解。

首先创建一个默认请求，用于请求网易云API。

这个网络请求方法都在文档里了，然后我们获取返回的数据res（一般是JSON格式），然后分析一下数据，这里我请求的是网易云音乐的一个随机歌单。

你必须在这里写这句话

这个就是把这个变量赋值给模板，这个本来就代表当前类，这里要用THAT，因为我们用到了回调函数，如果用THIS的话，就会指向错误的回调函数。

然后在模板中：

循环输出数据，即可出现歌曲列表。

接下来，当我们点击一​​首歌曲时，音乐就开始播放。

标签绑定事件，然后写入脚本中

获取当前标签里的属性，调用微信播放器组件，开始播放，并将播放状态赋值给模板（这里是做播放页面）

就是这个东西。当我们点击它时，状态会随之移动。

返回模板

这个就是最下面那个东西，如果没在播放，我们就不显示，点击播放显示，然后把图片歌名作者传过去，这里还有几个功能，比如点击播放暂停功能，还需要绑定标签，写事件。

那么播放器就差不多完成了。

最后，这个函数

改变播放列表，让这个按钮绑定事件来请求下面的方法

我们可以看到网易云的播放列表其实是使用一个随机的9位数字作为播放列表ID的。所以我们随机生成一个9位数字，随机请求一次，然后重新输出模板。H5 MVVM框架可以直接输出，不需要刷新页面，这也是和传统的不同。

这里还有一个问题，网易云音乐上有些歌曲是收费的，所以我们拿到的数据有些是无法播放的，而且播放列表是随机的，所以可以点播任意的播放列表，这些方面都需要优化。

但我们的简单在线播放器已经准备好了^_^