写在前面的话

鉴于自己健忘很严重，再加上今年还没有做总结。所以打算利用闲暇时间撸一个音乐小程序。其实现在已经有很多音乐小程序了，这个主要是方便为自己到时候回忆￣□￣｜｜

云开发介绍来一波

选用的是小程序云开发，无需搭建服务器，即可使用云端能力。
云开发提供了几大基础能力支持：

能力	作用	说明
云函数	无需自建服务器	在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库	无需自建数据库	一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储	无需自建存储和 CDN	在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用	原生微信服务集成	基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

（小声BB，这里来自微信小程序的开放文档，贴个地址，更详细的可以看这里，我是地址）

开发准备工作

搭建模板，这个在打开微信开发者工具的时候，就有个云开发的模板可以选择，然后就搭建好了。然后去miniprogram/app.js里面配置环境id就行啦，环境id在

先去这里
然后这里

配置完成之后就可以用来开发了。

这里我用到的工具是，VSCode开发，然后微信开发者工具预览/调试，为啥不直接用开发者工具？因为觉得那个不好(就是赤果果的嫌弃)

清理项目代码

新建模板的时候会带一些代码，我们可以清理掉，然后有个干净的空间出来就行了。

安装sass

因为微信小程序的css是wxss，个人觉得开发不是很方便。然后就在vscode里装了一个Live Sass Compile插件。然后在设置配置这样一段代码：

    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".wxss",
            "savePath": null
        }
    ]

在要wxss的同级目录下新建一个scss文件，然后写scss，写完之后点击vscode底部的[Watch Sass]

点击这个生成wxss

引入第三方UI

我这里引入的是WeUI，

• 1.先去git将WeUI项目下载下来。
• 2.然后将weui-wxss-master\dist\style下的weui.wxss复制到小程序项目的根目录下，也就是和全局app.wxss同级目录下。
• 3.在全局app.wxss中加入weui.wxss的引用@import "weui.wxss";。
• 4.引入插件的模板可见weui-wxss-master\dist\example。