# 微信小程序实现wap移动版 QQ 音乐播放器
> 微信小程序练习demo,只能clone代码本地电脑或手机浏览无法发布上线,因为需要审核啊;
## 又是QQ音乐播放器?!
- 接口是现成的在线接口,能跟实际效果保持一致;
- 不用自己造假数据,大批假数据容易出错;
- 数据结构符合生产环境真实数据,自己造可能都是用最简单的数据结构跟实际差距太大;
- 不做这做啥呢,总的参考一个产品啊(😂。。。。),之前用vue实现过一版。大体流程和页面结构比较熟悉;
- wap版QQ音乐播放器改版,请以Vue版案例为准[点击查看](http://dabaipm.cn/qq_music/index.html)
## 坑
- 单行文本溢出省略,需要父级元素设置属性`overflow hidden`;
- `rich-text`相当难用,不知道有没有什么技巧,多标签嵌套,支持字符串格式,不过官方不提倡;
- `HTML Entities` &#****; 转码问题 [参考文档](https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities-using-pure-javascript);
- 不支持本地图片需要 `base64` 编码或使用 image 标签,这个比较恶心啊;
- `navigationBar` 不能修改 `font-size` 样式;
- 没有Vue插件丰富,比Vue好的地方是同一路由页面不会重复载入;
- input 高度太小(20px)聚焦时placeholder莫名其妙的往上跳了一点点,24px不跳动;
- 代码包大小上限为 2048 kb,实际项目需要删除静态文件比如 演示GIF demo.gif;
- input 如何做数据绑定?已解决参考搜索页面输入框源码;
- 字符串拼接 `src="strA{{zhida.singermid}}strB"` 无需使用 `+` 号,注意被拼接字符串放在双引号内;
- wxml中计算后的模板数据不支持`toFixed`函数格式化,需要引入[wxs模板](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/01wxs-module.html)或标签封装一个函数,export出去;
- 组件系统有点坑,先不用组件实现一下,后续有时间再拆分组件吧。事件传递比较麻烦,每次需要增加一大堆路径和文件;
- currentColor 这是一个神奇的CSS3属性;
- template 模板标签数组参数传递(官网没有给实例,自己摸索出来的);
- 小程序不支持before、after伪元素;
- 小程序浏览器调试[工具](https://chemzqm.github.io/wept/#/home);
- wxml无法处理时间戳格式化,只能在js里面处理;
- 不要在wxml中拼接图片地址,控制台会报错,虽不影响功能但是很难看,js拼好统一解析;
- vkey 不知道从哪里获取,音频和视频无法构造资源地址;
- 不能解析HTML标签,需要转义 https://github.com/icindy/wxParse
## 演示图片
![](https://github.com/chengjun2014/f_grid/blob/master/demo.gif)
## 参考文档
[小程序官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/)
[微信小程序架构分析(上)](https://zhuanlan.zhihu.com/p/22754296)
[微信小程序架构分析(中)](https://zhuanlan.zhihu.com/p/22765476)
[微信小程序架构分析(下)](https://zhuanlan.zhihu.com/p/22932309)
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
wx_QQmusic-master.zip (50个子文件)
wx_QQmusic-master
app.json 720B
pages
index
index.js 1KB
index.json 2B
index.wxss 847B
index.wxml 844B
playing
index.js 1KB
index.json 2B
index.wxss 142B
index.wxml 280B
search
search.wxss 2KB
search.json 73B
comp
hotSearch
index.js 350B
index.json 48B
index.wxss 262B
index.wxml 280B
searchResult
index.js 233B
index.json 48B
index.wxss 47B
index.wxml 104B
searchHistory
index.js 234B
index.json 48B
index.wxss 48B
index.wxml 106B
search.js 6KB
search.wxml 3KB
rank
rank.json 36B
rank.js 2KB
rank.wxml 672B
rank.wxss 639B
singer
index.js 2KB
index.json 2B
index.wxss 2KB
index.wxml 3KB
singerAlbum
index.js 4KB
index.json 2B
index.wxss 3KB
index.wxml 3KB
utils
tool.wxs 143B
album
index.js 2KB
index.json 2B
index.wxss 965B
index.wxml 1KB
MV
index.js 2KB
index.json 2B
index.wxss 1KB
index.wxml 2KB
app.wxss 511B
app.js 894B
README.md 3KB
project.config.json 455B
共 50 条
- 1
资源评论
cheng52364
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功