1. 當你準備開發一個微信小程序的時候，你首先需要一個小程序的 APPId ，在微信公眾號官網可以獲得。（暫時只有官方邀請的才可以獲得）。
你還需要準備微信開發者工具，官網同樣有下載，下載安裝即可，支持windows，linux，和MAC平臺。
2. 小程序使用的微信自己開發 MINA 框架,提供了視圖層描述語言，WXML 和 WXSS 以及基於JavaScript的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，可以讓開發者可以方便的聚焦於數據與邏輯上。
打開的時候會自動提示創建一個demo，demo結構文件樹如下：
3. 其中app.js、app.json、app.wxss 是必不可少的，是小程序生成的依賴文件。
app.js 監聽並控制這整個程序的生命週期，也是全局變量聲明的地方。如下是 app.js 中的一段代碼：
4. 上述代碼中的一些 API 介紹：
App : 註冊一個小程序
onLunch :程序加載時執行的方法
getStorageSync：以同步的方式獲取本地緩存
setStorageSync：設置緩存
wx.getUserInfo: 獲取用戶信息
5. app.json 是對整個小程序的全局配置。不可註釋。
pages為註冊頁面的列表，均為相對路徑，省去了後綴名，程序默認顯示列表第一個。
6. app.wxss 是整個小程序的公共樣式表。
其中：
apx 是尺寸單位，可根據屏幕寬度自適應大小。與之對應的有rem：規定屏幕寬度為20rem；1rem = (750/20)rpx 。
7. 全局文件就這些，然後我們看 index 文件中的內容
有三部分內容，index.js ,index.wxml ,index.wxss,下面介紹它們的作用。
8. index.wxml 文件
這是一個展示頁面，作用於html相同。可以看出，內容分塊均採用 view 標籤，這也很容易讓人想到Android 中的佈局，但其實只是更多的是 div 標籤的另一個版本，在這裡面有很多 MINA 自定義的屬性，而且在我們在其中也看到了{{ }}樣式的值操作，這也很容易讓人聯想到 angularJS 中的數據雙向綁定，在 MINA 中也是支持的。
同時，頁面的展示，均需要在小程序全局的json配置文件中配置，前面已有說明。
9. index.js 文件
其中：
getApp() 獲取應用實例
Page ： 聲明頁面。
data: 定義數據
bindViewTap ：為在view中綁定的是tap事件定義操作方法。
wx.navigateTo ：導航到響應頁面。
onLoad ： 定義頁面加載時的事件。在這裡使用了在全局 app.js 中定義的回調函數，將data中的數據更新，由於雙向的綁定，頁面中的 userInfo 實例也會更新，顯示出您的頭像和暱稱。
10.
index.wxss 中同樣定義了一些樣式，寫法思路與css文件基本一致，只是不需要再去關心屏幕適配問題。
隨後就是效果展示了，在開發者工具中掃碼即可查看效果。