@前端社区

QQ音乐电台小程序核心功能

打开收音机

朋友卡

引导页面（引导用户使用微信登录QQ音乐或冷启动）

冷启动

卡片详细信息（好友相似度、好友偏好、评论）

歌曲播放页面（暂停播放、滚动歌词、收藏歌曲、切换歌曲、听歌流报告、背景幻彩、适配）

（切换歌曲、状态同步）

核心功能实现音频状态同步

涉及到播放歌曲状态的同步，无法使用组件。音频播放API本质上依赖于微信的播放组件。

使用wx.()跳转到应用程序内的页面将保留当前页面。点击左上角返回。上一页会触发监控页面显示，不会触发事件。播放页面和首页状态同步相关的逻辑处理应该在事件中进行监控。

歌曲信息及变化（包括歌曲列表、播放状态、切换音频、专辑封面、歌名、歌手等）都存储在小程序中，方便不同页面的数据同步。

歌词滚动

音频组件API目前不提供类似的事件。您需要打开一个计时器来滚动歌词。缺点是计时器渲染歌词不太准确。好消息是：微信稍后将支持活动。

歌词处理相关逻辑如下：

歌词背景幻彩

根据专辑图片拉取对应的十六进制幻彩。有的色值比较亮，有点刺眼。这里需要将颜色值转换为HSL，并降低饱和度S和亮度L，使背景颜色看起来柔和。

将背景返回的十六进制值转换为RGB值

RGB 转 HSL

降低HSL中S饱和度和L亮度，使背景颜色不那么刺眼。

将简化的 HSL 转换为 RGB

降低饱和度和亮度后的效果图，背景变得更柔和

异常处理

组件图片数据未返回或图片加载失败。异常处理

弱网络环境下，cgi加载缓慢或cgi异常。将显示菊花提示。加载成功后，菊花将被隐藏。最大延迟时间为wx。

对网络异常或cgi逻辑处理失败提供友好提示，并报告cgi成功率。

前端异常报告。当小程序出现脚本错误或者api调用失败时，会触发并返回错误信息，获取设备信息，方便后期定位问题。

音乐播放控制bug&修复下暂停后无法恢复播放的问题

原因是在暂停和重播时，老版本的微信会检测参数。后来这个bug被修复了。为了兼容之前的版本，仍然传入了参数。

IOS、播放、暂停、切换歌曲

在IOS和设备上播放过程中，在切换歌曲之前暂停歌曲，发现正在播放的歌曲是原来的歌曲。

解决办法：需要调用wx.在暂停场景中更改音频地址 wx.({:'xxx'}) 之前。

产生问题：音频播放完成，播放音频文件时出现403或500错误，会触发wx.p事件。好消息是，微信未来将对音频播放API进行重大改变，使用不同的事件来触发停止播放、播放结束和播放错误。

同步播放状态

上播放歌曲同时打开一个新页面（播放页面），同步上一个页面的播放状态，wx.有歌曲播放时返回2，状态返回与播放url不匹配。 （wx.的播放有三种状态：1正在播放，0暂停，2没有音乐播放。2状态是微信小程序后来添加的。）

解决办法：将播放链接存入其中，获取该链接作为播放链接。

小程序基础学习

小程序的官方文档非常详细。下面总结一下小程序的一些关键知识。

米娜框架

js：逻辑层开发

WXML：页面布局

WXSS：页面的样式

整个系统分为两层：视图层（View）和逻辑层（App）。

页面js中，需要同意data数据为只读。 MINA 是一种单向数据绑定。修改data中的数据不会自动更新View；要更新视图，需要使用()方法。 () 更新View时，与data中的数据进行Diff比较，差异就会被更新。如果直接修改数据，很容易导致数据中的数据与View不一致。单次设置的数据不能超过，要避免一次性设置过多的数据。

每个 分为两个线程，view 和。视图线程负责解析渲染页面（wxml和wxss），线程负责运行js。该线程运行在X5中（下，X5中，以及开发工具中的nwjs中），所以js不在其中运行，无法直接操作DOM和BOM。这就是小程序没有全局变量的原因。

目录结构（小程序包含一个描述整个程序的应用程序和描述各自页面的多个页面）

小程序的框架程序包括一个描述整体程序的app和多个描述页面的页面。其中，app由三个文件组成，app.json用于公共设置，app.wxss用于公共样式，app.js用于主要逻辑。每个页面由四部分组成，页面设置page.json、页面文件page.wxml、页面样式page.wxss、页面主体逻辑page.js。

逻辑层

App() 函数用于注册小程序。接受一个参数，指定小程序的生命周期函数等。

参数说明：

页面参数说明：

页面的生命周期从头开始，这三个事件在整个生命周期中只执行一次，并且在每次页面隐藏和显示时触发。执行顺序是，，。当用户手动触发左上角的退出箭头时，小程序只触发app.，下次进入小程序时，app.和当前页面。将被触发。只有当小程序在后台运行超过一定时间而没有被激活，或者用户手动点击小程序控制栏的 退出程序，或者小程序占用内存过多而被关闭后，小程序将被销毁，应用程序将被销毁。事件将被触发。

一个完整的小程序执行的生命周期如下

模块化的

将一些常用代码作为模块提取到单独的js文件中。模块只能通过.or向外界暴露接口。在需要使用这些模块的文件中，使用(path)引入公共代码。框架把每个js都模块化了，你写的代码在执行之前都会给你AMD化。

视图层

1. 字符串代表for循环中的一项。该值必须是列表中唯一的字符串或数字，并且不能动态更改。

2. 保留关键字*this代表for循环中的项本身。这种表示形式要求项目本身是唯一的字符串或数字。

3. 数据绑定

WXML中的动态数据来自相应Page的数据，数据绑定使用语法（双大括号）来包裹变量。支持组件属性、控件属性和关键字。支持多种运算如：三元运算、算术运算、字符串运算、逻辑判断

4.条件渲染

wx:if 具有较高的切换成本和较高的初始渲染成本。因此，如果需要频繁切换，最好使用wx:if。如果条件在运行时不太可能改变，则 wx:if 更好。

5. 列表渲染

wx:key 当数据变化触发渲染层重新渲染时，带有key的组件将会被修正。框架将确保它们被重新排序而不是重新创建，以确保组件保持自己的状态并提高列表渲染的性能。效率。