开发微信小程序的单页面，音乐播放和音乐列表的显示
发表时间：2023-10-28 17:05:12
文章来源：炫佑科技
浏览次数：212
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
开发微信小程序的单页面，音乐播放和音乐列表的显示
这是我开发一个微信小程序，可以玩了。
这是我的项目目录
微信小程序页面的VIEW标签相当于网页的DIV，但是这里没有对象开发微信小程序的单页面，音乐播放和音乐列表的显示，所以不能使用选择器或选择器。 要操作标签，必须使用MINA框架的绑定符号。 相关文档可以参见微信小程序开发文档。
在样式文件中，我这里引入了一个背景图片，其余的就和网页的布局一样了。
接下来看脚本文件
Page类是原始页面的脚本对象，可以这样理解。
这个网络请求方法包含在文档中，然后我们获取返回的数据res（通常是JSON格式），然后对数据进行分析。 这里我向网易云请求一个随机播放列表。
这句话必须写在这里
这是把这个变量赋给模板。 这*初代表当前班级。 这里我们必须使用 THAT 来代替，因为我们使用了回调函数。 如果我们使用THIS微信小程序直播怎么开发，它就会指向错误的指向回调函数。 。
然后在模板中：
循环输出数据，将出现歌曲列表。
接下来，当我们点击一首歌曲时，音乐开始播放
标记绑定事件，然后写在脚本中
获取当前标签中的属性，调用微信播放器组件，开始播放，并将播放状态赋值给模板（这里是播放的页面）
就是这个东西。 当我们点击的时候，这个状态就会相应的移动。
返回模板
这是*底层的东西。 如果它没有播放，我们将不会显示它。 点击播放让它显示出来，然后传入图片、歌名和作者。 这里有几个函数。 单击播放可暂停该功能。 我们还需要绑定标签并编写事件。
然后播放器就差不多完成了。
*后这个函数
改变播放列表，将事件绑定到这个按钮上，请求下面的方法
我们可以看到，网易云的播放列表实际上是一个随机的9位播放列表ID。 然后我们随机生成9个数字，然后进行随机请求，然后重新模板输出。 使用H5 MVVM框架，无需刷新页面。 ，就可以直接输出，这也是和传统的不同之处。
这里还有一个问题，就是网易云上的一些歌曲是收费的，所以我们获取到的部分数据无法播放，而且歌单是随机的，所以任何歌单都可以请求回来。 这些地方都需要优化。
不过我们简单的在线播放器已经准备好了^_^
