（哇小侠）微信小程序学习用demo：音乐播放器：使用Labrador框架.zip

# 微信小程序的简介 微信小程序就是原来的微信应用号，主要特点就是通过微信这个载体平台做出具有跟原生app相似的应用程序，并在微信内被便捷地获取和传播 ## 微信小程序-音乐播放器 - 项目构建使用脚手架Labrador，支持es6/7的语法，Labrador是一个专门构件微信小程序的脚手架，非常适合快速构建微信小程序 - 微信小程序自带微信的组件，Labrador可以实现对组件更好的重用 - 使用Editor Config及ESLint标准化代码风格，方便团队协作 - 通过对这个小应用的整体介绍，来更清楚的梳理微信小程序开发所使用的技术点以及相关结构 ## 微信小程序的开发准备 - 首先登陆微信公众平台注册小程序,具体做法参照[微信小程序接入指南](https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=1481160280)。如果只是为了调试，有微信号即可，可以不用注册，直接跳过这一步 - 需要下载[微信开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461)，这里需要注意的是请一定要下载最新版本0.11.112301，如果是旧版本请删掉重新下载 - 在开发者工具中打开需要调试的项目目录，关于打开目录时的一些注意点，我将在下面的项目安装中补充介绍 ## 项目安装 ```shell git clone https://github.com/eyasliu/wechat-app-music.git cd wechat-app-music npm install npm start ``` ### 启动 ```shell // 开发阶段，监听src目录下文件变动情况，即使编译并复制到dist文件夹 npm start ``` ### 编译 ```shell // 打包编译项目到dist目录 npm run build ``` ### 调试 - 在微信开发者工具打开项目时，需要打开到dist/目录这一级 - 编辑项目的时候首先启动项目，不要直接对dist/里的文件修改 ## Labrador项目的一般基本结构 ```shell demo # 项目根目录 ├── .babelrc # babel配置文件 ├── .editorconfig # Editor Config ├── .eslintignore # ESLint 忽略配置 ├── .eslintrc # ESLint 语法检查配置 ├── package.json ├── dist/ # 目标目录 ├── node_modules/ └── src/ # 源码目录 ├── app.js ├── app.json    ├── app.wxss(*.sass *.less *.css)    ├── components/ # 通用组件目录 ├── pages/ # 页面目录        ├── list/   # 首页            ├── list.js ├── list.wxml(*.html *.jade *.ejs) └── list.wxss(*.sass *.less *.css)        └── detail/ # 详情页            ├── detail.js ├── detail.wxml(*.html *.jade *.ejs) └── detail.wxss(*.sass *.less *.css)    └── utils/       # 工具方法 ```