qq空间克隆器下载
《QQ音乐小电台》主要分享在开发过程中核心功能实现和踩过的坑，希望对开发音频播放的同学有所帮助。
QQ音乐电台小程序的核心功能
开启电台
好友卡片
引导页（引导用户用微信登录QQ音乐或开启冷启动）
冷启动
卡片详情（好友相似度，好友偏好，评论）
歌曲播放页（播放暂停，歌词滚动，收藏歌曲，切换歌曲，听歌流水上报，背景魔法色，适配）
miniplayer （切换歌曲，状态同步）
核心功能实现
音频状态同步
涉及播放歌曲状态同步，不能使用audio组件。而音频播放API本质上是借助微信native的播放组件。
使用wx.navigateTo() 跳转到应用内的某个页面，会保留当前页面。点击左上角返回，之前页面会触发onShow监听页面显示，不会触发onLoad事件。播放页和首页miniplayer状态同步相关逻辑处理应该在onShow事件监听。
歌曲信息以及变更（包括歌曲列表，播放状态，切换音频，专辑图，歌曲名，歌手等）存储在小程序提供的storage下，方便不同页面数据同步
歌词滚动
音频组件API目前没有提供类似audio的onTimeUpdate事件，需要开了一个定时器做歌词滚动，缺点是定时器做歌词渲染有不太精准。好消息是：微信后期会支持OnTimeUpdate事件。
歌词处理相关逻辑如下：
歌词背景魔法色
根据专辑图拉取对应十六进制的魔法色。有些色值较亮，有点刺眼，这里需要对色值转为HSL通过降低饱和度S和亮度L来使得背景色看着柔和。
将后台返回十六进制，转为RGB值
RGB转为HSL
降低HSL 中S饱和度，L亮度让背景色不刺眼
将降低后HSL转为RGB
降低饱和度和亮度之后的效果图，背景变柔和
异常处理
image组件图片数据没有返回或图片加载失败异常处理
弱网络环境下cgi加载慢或cgi异常菊花提示，加载成功后隐藏菊花，wx.showToast最大延迟时间是10000
对网络异常或cgi逻辑处理失败做友好提示，且对cgi成功率做上报。
前端异常上报，当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并返回错误信息，获取设备信息，方便后期定位问题
音乐播放控制bug&fix
安卓下，暂停不能继续播放的问题
原因是暂停再播放时，微信旧版本安卓上会检测playBackgroundAudio的title和coverImgUrl参数，后来fix这个bug，为了兼容之前版本，还是将参数传入。
IOS、安卓播放暂停切歌
IOS，安卓机下播放过程中先暂停在切换歌曲，发现播放的歌曲为原先的歌曲。
解决方法：暂停场景下更换音频地址wx.playBackgroundAudio({dataUrl:’xxx’})之前需要调用wx.stopBackgroundAudio。
带来问题：音频播放完成以及播放音频文件有误403或500都会触发wx.onBackgroundAudioStop事件。好消息是微信之后会对播放音频API进行大的改动，用不同事件分别触发停止播放，播放结束，播放错误。
安卓同步播放状态
安卓机下播放一首歌曲且同时打开新页面（播放页），同步上一页面播放态，wx.getBackgroundAudioPlayerState在有歌曲播放的情况下status返回为2，且状态返回dataUrl和播放url对不上。（wx.getBackgroundAudioPlayerState的播放有三个状态：1是播放中，0是暂停，2是没有音乐播放。2状态是微信小程序后期加的。）
解决方法：将播放链接存在storage里面，获取storage链接作为播放链接。
小程序基础学习
小程序官方文档很详细，下面是对小程序一些关键知识提炼。
mina框架
js：逻辑层的开发
WXML：页面布局
WXSS：页面的样式
整个系统分为两块视图层（View）和逻辑层（App 珠宝 Service）。
页面js中，data数据是需要约定为只读。MINA是单向数据绑定，修改data中的数据不会自动更新View；更新view，需要使用setData()方法。setData()更新View时，与data中的数据进行Diff比较，不同才会更新。如果直接修改data，很容易造成data中的数据与View不一致。setData单次设置的数据不能超过1024kB，需要避免一次设置过多的数据。
每个小程序分为两个线程，view和appServer。其中view线程负责解析渲染页面（wxml和wxss），而appServer线程负责运行js。appServer线程运行在jsCore中（安卓下运行在X5中，开发工具中运行在nwjs中），所以js不跑在webview里，不能直接操纵DOM和BOM，这就是为什么小程序没有window全局变量。
目录结构（小程序包含一个描述整体程序的 app 和多个描述各自页面的 page）
小程序的框架程序包含一个描述整体程序的app 和多个描述页面的page。其中，app由三个文件构成，公共设置的app.json 、公共样式的app.wxss、主体逻辑的app.js 。每个page由四部分组成，页面设置page.json、页面文件page.wxml、页面样式page.wxss、页面主体逻辑page.js。
逻辑层
App()
函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命珠宝周期函数等
object参数说明：
Page object 参数说明：
一个page的生命周期从onLoad开始，整个生命周期内onLoad、onReady、onUnload这三个事件仅执行一次，而onHide和onShow在每次页面隐藏和显示时都会触发，执行顺序是onLoad,onShow,onReady。当用户手动触发左上角的退出箭头时，小程序仅触发app.onHide，下次进入小程序时会触发app.onShow以及当前page.onShow。仅当小程序在后台运行超过一定时间未被唤起、或者用户手动在小程序的控制栏里点击退出程序、或者小程序内存占用过大被关闭时，小程序被销毁，会触发app.onUnload事件。
一个完整的小程序执行的生命周期如下
模块化
将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过
module.exports
或者
exports
才能对外暴露接口。在需要使用这些模块的文件中，使用
require(path)
将公共代码引入。框架对各个js的模块化，你编写的代码，执行之前会帮你AMD化处理
视图层
1、字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2、保留关键字
*this
代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
3、数据绑定
WXML 中的动态数据均来自对应 Page 的 data，数据绑定使用 Mustache 语法（双大括号）将变量包起来。支持组件属性，控制属性，关键字。支持多种运算如：三目运算，算数运算，字符串运算，逻辑判断
4、条件渲染
wx:if
有更高的切换消耗而
hidden
有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用
hidden
更好，如果在运行时条件不大可能改变则
wx:if
较好。
5、列表渲染
wx:key 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重珠宝新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
wx:key
的值以两种形式提供
6、模版
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
7、事件
key 以
bind
或
catch
开头，然后跟上事件的类型，如
bindtap
,
catchtouchstart
bind
事件绑定不会阻止冒泡事件向上冒泡，
catch
事件绑定可以阻止冒泡事件向上冒泡
8、引用
WXML 提供两种文件引用方式
import
和
include
。区别在于：import可以引入定义好的template模板，模板是有作用域的；而include就是拷贝一个公用的代码片段到目标文件中，适合做公共页面片的拆分
WXSS
1、WXSS新引入了一个rpx的概念来做自适应布局。rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
2、本地资源无法通过WXSS获取，所以WXSS中的样式都是用的网络图片，或者base64
api
wx.request
wx.request
发起的是 HTTPS 请求。
data 数据说明 最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下
content-type 默认为 ‘application/json’
要注意 method 的 value 必须为大写
request 的最大并发数是 5
网络请求的 referer 是不可以设置的，格式固定为
https://servicewechat.com/{appid}/{version}/page-frame.html
，其中
{appid}
为小程序的 appid，
{version}
为小程序的版本号，版本号为 0 表示为开发版。
request 的默认超时时间和最大超时时间都是 60s
通讯域名配置：小程序可以跟指定的域名进行网络通信
1、对于 header[‘content-type’] 珠宝 为 ‘application/json’ 的数据，会对数据进行 JSON 序列化
2、对于 header[‘content-type’] 为 ‘application/x-www-form-urlencoded’ 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）
音乐播放
wx.getBackgroundAduioPlayerState 获取后台音乐播放状态，（播放状态同步和歌词渲染）
wx.playBackrgoundAudio 使用后台播放器播放音乐，对于微信客户端来说，只能同时有一个后台音乐在播放。当用户离开小程序后，音乐将暂停播放；当用户点击“显示在聊天顶部”时，音乐不会暂停播放；当用户在其他小程序占用了音乐播放器，原有小程序内的音乐将停止播放。
wx.pauseBackgroundAudio() 暂停播放音乐
wx.seekBackgroundAudio()控制音乐播放进度
1、wx.stopBackgroundAudio() 停止播放音乐，会触发wx.onBackgroundAudioStop()
2、wx.onBackgroundAudioStop() 监听音乐停止
数据缓存
微信小程序没有Cookie、sessionStorage和localStorage，而是提供了一个app的本地存储，对存储的操作可以异步、同步的增删改查。
设备（用在手机适配，异常错误上报获取设备信息，以及不同微信版本做兼容）提供异步和同步二种方式wx.getSystemInfo() || wx.getSystemInfoSync()
success回调参数说明：
界面
交互反馈
wx.showToast() wx.hideToast(
wx.showModal()
1、wx.navigateTo() 保留当前页面，跳转到应用内的某个页面，使用
wx.navigateBack
可以返回到原页面
2、wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。
一个应用同时只能打开5个页面，当已经打开了5个页面之后，
wx.navigateTo
不能正常打开新页面。请避免多层级的交互方式，或者使wx.redirectTo
开发接口
1、wx.login 调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。
2、wx.getUserInfo 获取用户信息，需要先调用 wx.login 接口。
3、分享图片不能自定义；会取当前页面，从顶部开始，高度为 80% 屏幕宽度的图像作为分享图片。
qq空间克隆音乐
玉石
