微信小程序——工程構建（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] 圖片、文件緩存和授權清理

在開發過程中，特別是處理不同授權的情況，需要清除授權。另外，需要清除緩存，可以按照下圖的方式清除。