萌新，随便做做，只是了解一下微信小程序，希望可以给看到的胖友一点参考。
之前在网上看到这个人入门四天做完一个，我五天做完了，比他好看，突然有一点自信
然后发现自己特别不乐意重新看自己的代码，总觉得写的很乱。
应该更认真的推敲思路和注意规范，嗯，加油。
一、微信小程序入门
1.起步
从零开始，直接按官方文档里走就没问题了，非常简单，包括申请账号/安装/编译/代码构成/宿主环境/协同工作和发布/开发指南等等。
微信开发者工具下载地址：点击跳转
2.微信开发者工具简介
萌新看了直接就上手的简介。（我也只用到这些……）
（1）开发工具界面
①项目目录
②编码区
③控制台
Console查看报错和打印等信息
AppData查看app内各个变量的值
④模拟器
保存项目/编译项目都可刷新模拟器，不卡，与真机略有区别（所以一定要真机试，很方便，不能全信模拟器，说不定就遇到什么模拟器正常但是真机却不行的坑）
（2）主要目录文件
看看一打开就自带的目录：
- app.js 可以存放全局变量、方法
- app.json app的配置文件 页面路径一定要写进去
- page 页面文件夹
- index 启动页文件夹
- index.wxml 启动页的页面 类似html div->view
- index.js 启动页的js 类似JavaScript 实现对页面的控制 变量可以被页面引用 没有dom操作
- Index.wxss 类似css
以下为萌新理解，很浅，也不一定对，若有其他理解，请大佬赐教：
微信前端开发的特点就是，开发一个页面需要四个文件，包括js、json、wxml、wxss，大家都在一个文件夹里，还和文件夹同名。json没太用，感觉是跟微信本身的界面相关的配置文件（写个"navigationBarTitleText": "List"，小程序上面标题栏就叫这个了），wxml跟html类似，wxss相当于css，js里面可以写方法（还是应该叫函数）什么的，和普通JavaScript一样，但是里面的数据可以被wxml直接拿来用（就是js里有个数据叫name，它的值是1，那么你在wxml里写一个{name}，这个地方就显示1，相似的用法我用过的有在jsp的页面里面获取session中的内容）。
3.引入weUI
weUI就是微信自己的一套按钮什么的，萌新必备，方便还比较美观。
下载：https://github.com/Tencent/weui-wxss
引用：
①将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的某个目录下
②在app.wxss中加入weui.wxss的引用 @import 'style/weui.wxss';（这里导入到了style目录）
注：weui-wxss-master中src里面是一个example项目，可以打开该项目预览各个控件的效果
二、开发音乐播放器
1.构思
数据：只做前端，不搞数据库，那么就在js里用ajax那种请求从网上获取数据。（或者用微信小程序的云开发，我还没了具体了解）
页面：做一个简单的播放器，需要至少两个页，音乐列表页和正在播放页。
2.准备数据
这里用腾讯云的对象存储来存储数据。存里的每个文件都生成一个地址，访问这个地址就直接获取文件。
（这腾讯云，你可以免费存一阵数据，但是获取数据是要花钱的，咱自己玩，访问次数不多，花了一块多……）
按自己喜好存里点mp3和图片和lrc什么的。
然后存一个json作为音乐库，里面包括之前存的mp3、图片的地址。
这样我们做的播放器就先获取这个json文件，然后从里面读放哪首歌，然后拿着那个歌的mp3地址再获取一下真正的mp3文件，就能用了。
{ "appname": "MUMU Music", "version": "1.0", "music": [ { "name": "光年之外", "singer": "G.E.M", "time": 235, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.mp3", "lrc": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.lrc", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.jpg" }, { "name": "Life is like a Boat", "singer": "Rie fu", "time": 300, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.jpg" }, { "name": "I Will Return", "singer": "Skylar Grey", "time": 236, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.jpg" }, { "name": "青鸟", "singer": "生物股长", "time": 216, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.jpg" }, { "name": "大鱼", "singer": "周深", "time": 313, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.jpg" }, { "name": "小小恋歌", "singer": "新垣结衣", "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.jpg" }, { "name": "光年之外", "singer": "G.E.M", "time": 235, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.mp3", "lrc": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.lrc", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.jpg" }, { "name": "Life is like a Boat", "singer": "Rie fu", "time": 300, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.jpg" }, { "name": "I Will Return", "singer": "Skylar Grey", "time": 236, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.jpg" }, { "name": "青鸟", "singer": "生物股长", "time": 216, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.jpg" }, { "name": "大鱼", "singer": "周深", "time": 313, "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.jpg" }, { "name": "小小恋歌", "singer": "新垣结衣", "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.mp3", "lrc": "null", "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.jpg" } ] }
3.开发
（1）新建项目
在微信开发者工具里面点左上角“项目”-“新建项目”，弹窗里填写信息，AppID可以用测试号（这里仅仅自己开发着玩所以无所谓，想要让别人你的小程序也用就去注册一个），点击新建就好了。
（2）写代码
首先项目给了一个获取用户信息的页，咱也懒得改，直接留着作为启动页（？），下面加个按钮跳转到列表页。
先不着急写别的页面，我想app打开之后就先把我那大json获取到，反正之后会经常用，直接作为全局变量留着了。全局变量是app.js里的globalData，在里面声明一个名字叫musicLib，在下面写个微信小程序写法的请求数据的一段代码（wx.request，详情参考官方文档），然后把获取到的结果给musicLib存住（this.globalData.musicLib = res.data，萌新翻译：这页的globalData里的musicLib的值是请求结果中的数据）。
//app.js App({ globalData: { //... musicLib: [], //音乐库 //... }, onLaunch: function() { // ... //获取音乐库 wx.request({ url: 'https://music-1300015560.cos.ap-beijing.myqcloud.com/musics.json', success: res => { this.globalData.musicLib = res.data } }) //... } })
接下来就按页开始了！下班了，之后再整理略略略。