huxinmin / wxMusic

微信小程序音乐

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

wxMusic

微信小程序音乐,仿照的是网易云的安卓客户端APP

license author

效果预览

预览

使用方法

将server目录拷贝放在你的域名服务器上,进入server端,运行

node app.js

会启动一个服务器,然后将你的小程序的接口设置为你的域名,然后按照API的使用方法调取数据即可。设置方法如下:

//在mixins下面的urls.js
baseUrl:"your api url"

然后使用安装wepy-cli在命令行下进入该目录:

wepy build --watch

然后打开微信小程序客户端开发工具,将dist目录作为项目根目录,即可运行(如果运行不成功注意勾选项目编译选项,比如ES6转ES5,不进行域名合法校验等)

依赖

  • wepy腾讯的开源小程序框架
  • NeteaseCloudMusicApi第三方的网易云音乐 Nodejs API,地址为NeteaseCloudMusicApi

学到的知识点

  1. scroll-view 中的需要滑动的元素不可以用 float 浮动;
  2. scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;
  3. scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;
  4. 包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;white-space:nowrap;
  5. swiper组件必须放在最外层,并且不能使用任何嵌套,无法内嵌组件
  6. data-xxx属性不能使用大写或者驼峰式写法,会被转换成小写
  7. Object.assign只能进行浅拷贝,无法进行深拷贝,假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。
  8. reducer中的state对象为引用对象时需要返回一个新对象,否则无法触发view重新渲染,例如数组就需要slice拷贝一份
  9. redux-actions中的creatAction的types的名字不能一样否则会全部都dispatch
  10. 可以使用自定义编译模式配置使得修改内容后不会再跳转到首页,而是跳到需要调试的页面
  11. getBackgroundAudioManager方法官方说存在合法的src值就能获取,经测试无法立即取得,在onPlay函数也取不到,可以在onTimeUpdate中取得
  12. 在onload中虽然能够打印出来connect的state的实时的新值,但是如果取值赋值的话还是之前的老的值不是新的值,也就是redux的state全局是唯一的不变的

About

微信小程序音乐


Languages

Language:JavaScript 97.4%Language:HTML 2.6%