1. 新建專案選擇小程式專案，

2. 選擇程式碼存放的硬碟路徑，

3. 填入剛剛申請到的小程式的 AppID，

4. 給你的專案起一個好聽的名字，

5. 勾選 "建立 QuickStart 專案" (注意: 你要選擇一個空的目錄才會有這個選項)，

6. 點選確定，你就得到了你的第一個小程式了，點選頂部選單編譯就可以在 IDE 預覽你的第一個小程式。

編譯預覽

1. 點選工具上的編譯按鈕，可以在工具的左側模擬器介面看到這個小程式的表現

2. 也可以點選預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小程式。

至此，已經成功建立了第一個小程式，並且在微信客戶端上體驗到它流暢的表現。

小程式的程式碼構成。

程式碼構成

我們可以留意到這個專案裡邊生成了不同型別的檔案:

1. json 字尾的 JSON 配置檔案

2. wxml 字尾的 WXML 模板檔案

3. wxss 字尾的 WXSS 樣式檔案

4. js 字尾的 JS 指令碼邏輯檔案

1. 小程式配置 app.json配置項細節可以參考文件小程式的配置 app.json：

2. 工具配置 project.config.json 可以參考文件 開發者工具的配置：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/edit.html

3. 頁面配置 page.json 配置項細節可以參考文件 小程式的配置 page.json：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

4. WXML 模板  WXML 用的標籤是 view, button, text 等等：

<1、更多的元件講述參考下個章節 小程式的能力

https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20171227

<2、if/else, for等控制能力，這些控制能力都用wx:開頭，文件可以參考 WXML：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/

5. WXSS 樣式文件可以參考 WXSS

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

6. JS 互動邏輯

<1、事件，可以參考文件 WXML - 事件：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

<2、 API，可以參考文件 小程式的API ：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/