一、序

微信小程序，估計大家都不陌生，現在應用場景特別多。今天就系統的介紹一下小程序開發。注意，這里只從項目代碼上做解析，不涉及小程序如何申請、打包、發布的東西。（這些跟著微信官方文檔的流程走就好）。好了廢話不多說，看目錄。

注: 小程序是一套特殊的東西，融合了原生和web端。他是一個不完整的瀏覽器對象，所以很多DOM 、 BOM 的東西無法使用，但是他又通過微信APP實現了多線程。

二、如何創建小程序

很簡單，首先下載微信開發者工具，下載穩定版本的就好。 下載 然后，創建小程序，可以參考下述圖片：

注意正式的小程序需要審批，拿到正式的APPID，我們測試的或者暫時沒有的可點那個測試的appid，小程序模板選擇默認就好。按照這樣的流程走完，我們就創建完一個小程序了。

三、webstrom支持小程序開發

創建完小程序之后，我們先不著急開發。工欲善其事必先利其器，微信開發者工具有點卡，而且功能少，開發效率很低。所以我們還是改造自己的編譯器，這里只介紹2種方法。一是 hbuilderX，他有支持小程序的模塊，很小巧的一款編譯器； 二是 webstorm，我用的他，在這介紹一下配置的方法，其他的大家自行google吧。

1、支持wxml和wxss的文件類型，有語法高亮。 打開webstorm編譯器，依次點擊 文件 -- 設置 -- 編輯器 -- 文件類型 ， 找到 html文件，添加 *.wxml; 找到Cascading style Sheet ，添加 *.wxss。就OK了

2、支持小程序代碼提醒。 下載 這個文件，然后，把他放到一個顯眼的地方； 然后， webstorm 點擊 文件 -- 導入設置 ，找到這個下載的文件，點擊確定即可。

以上就是webstorm支持小程序語法的操作。

四、基礎文件目錄詳解

然后解釋一下小程序的目錄結構。

project.config.json: 小程序的配置文件，包含項目打包配置、上傳代碼自動壓縮等等，是一些開發、打包之類的配置。

app.json: 當前項目的配置文件。包括項目的頁面引入、導航條顏色、導航條標題 等等，是項目具體到代碼開發上的配置。介紹幾個配置：

pages： 包含的頁面。每次新增頁面都得在這里引入，否則新頁面的json配置等無法生效。 注意pages中頁面先寫的先渲染，所以數組第一條也就是我們的首頁。

window： 配置所有頁面導航條字體、顏色、背景色等