微信小程序——工程构建（vscode）和微信开发者工具

微信小程序官方提供了比较完整的开发文档，也提供了官方的开发工具。但是本人还是习惯于用vscode，同时，可以安装vscode中的插件来辅助开发。

1. vsode插件

(1) Live Sass Compile——实时将sass打包为wxss

wxss的语法是原生的css，非常不方便，这个插件可以将sass实时打包为css，同样也也可以让后缀名为wxss。习惯于用less的，可以使用另一个插件：Easy WXLESS。

这个插件的默认方式是打包为css文件，如果能直接打包为wxss是最好不过的，所以需要修改配置文件。在工程的根目录找到或者创建文件夹.vscode下的settings.json添加如下配置：

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

更详细的配置介绍，请参见：https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

在wxss文件的同级目录下新建.scss文件，点击vscode底部的[Watch Sass]后，所有的.scss会在修改后实时被打包为同名的.wxss文件，并会额外生成一个map文件。

于是，可以愉快的使用sass写小程序啦！

(2) vscode weapp api——提供小程序API提示及代码片段

安装之后键入关键词wx就会出现提示，回车会出现代码片段。
例如：

wx.getLocation({
      type: 'wgs84',
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
      },
    })

2. 微信开发者工具

(1) 设置支持ES6

小程序中把ES6转ES5勾上后是可以直接使用ES6的。

(2) 工具栏

[1] 运行页面

在工程根目录app.json的pages数组中创建页面保存，会自动在pages文件夹中生成该页面的文件。默认是运行index页。

可以在上图的工具栏中，点击下拉框，选择下图中的Add Compilation Mode，新建运行的入口页面。方便查看和开发小程序中的不同页面。

[2] 手机预览

点击Preview的按钮，扫码可以在真机上预览，也可以选择旁边的debug进行可以调试的预览。

[3] 图片、文件缓存和授权清理

在开发过程中，特别是处理不同授权的情况，需要清除授权。另外，需要清除缓存，可以按照下图的方式清除。