微信小程序還沒正式發佈就已經迅速成爲大家討論的焦點，那麼大家可能覺得只有收到內測邀請才能體驗小程序的開發流程，其實不然，大家都可以體驗，下面就帶大家一起了解。
下載微信 Web 開發者工具
首先，微信給我們提供了它自己的小程序集成開發工具，只需要到這個頁面下載即可：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359
下載完成後，打開開發者工具，會有一個掃碼登錄界面。 用你的微信掃碼就可以登錄進來了， 然後開發者工具會幫我們創建一個默認工程，項目的文件結構如下：
所有的代碼編輯以及運行預覽都可以在這個開發者工具中進行。接下來咱們看看微信小程序的項目結構。
項目結構
如上圖，首先在根目錄中有三個文件 app.js, app.json, app.wxss。 其中 app.js 是程序主入口的腳本文件， app.json 是全局配置文件, app.wxss 是小程序的樣式表文件。
先來看看 app.json :
{
|
這個配置文件中定義了兩個節點， pages 是小程序的所有頁面對應的路徑， window 是小程序窗口的配置信息。
再來看看樣式文件 app.wxss :
.container {
|
咱們先不用深究它具體定義了什麼樣式，只需要先了解項目結構即可。接下來再來看看程序的主入口 app.js：
//app.js
|
這裏初始化了一個 App 對象，並且定義了三個方法 onLaunch，getUserInfo 和 globalData。 先來看看onLaunch:
onLaunch: function () {
|
首先 wx.getStorageSync 方法會獲得本地的一個以 logs 爲 key 的緩存數據。 傳入這個方法的 logs 本身沒有任何特殊含義，只是用於表示我們使用的緩存數據。 這個機制可以理解爲和 iOS 的 NSUserDefaults 類似。
然後，我們想這個緩存數組中插入當前的日期 logs.unshift(Date.now())。 最後再調用 setStorageSync 方法將我們新的緩存內容寫入到本地緩存中。
因爲 onLaunch 方法是小程序的生命週期方法，所以在小程序啓動的時候就會調用它，並將當前啓動的日期記錄並寫入本地緩存中。 沒錯 onLaunch 整個方法就幹了這件事兒。
我們再來看下 getUserInfo 方法，它通過調用 wx.login 和 wx.getUserInfo 兩個微信平臺的函數獲取當前用戶登錄信息，並傳會給回調函數 cb：
getUserInfo:function(cb){
|
至於最開始的 if 判斷 if(this.globalData.userInfo) 咱們暫時不用深究，只看 else 部分即可。
頁面結構
瞭解完根目錄的幾個文件， 咱們再來看看頁面文件, 正如咱們剛開始截圖中看到的項目結構：
所有的頁面都在 pages 文件夾中。 我們這個示例工程中有兩個頁面 index 和 logs。 還記得我們前面在 app.json 看到的頁面配置嗎：
"pages":[
|
正好對應上咱們現在看到的兩個目錄， 還要記得一點， pages 數組中的第一個元素會作爲我們小程序的主頁。 切記，index 頁面之所以是首頁，是因爲它是 pages 裏面的第一個元素， 而不是因爲它的名稱是 index。
我們來看看 index 頁面的構成， index.js, index.wxml, index.wxss。 index.js 是頁面的腳本文件, index.wxml 是頁面的 UI 文件， index.wxss 是頁面的樣式文件。
先看一下 index.js:
//index.js
|
getApp() 方法獲取我們的 app 實例。 然後在看 onLoad 方法， 使用我們剛纔提到的 getUserInfo 方法獲取用戶信息，並設置到 data 屬性中。
bindViewTap 方法會綁定一個事件，這個事件調用 wx.navigateTo 方法。 這個方法其實就是頁面跳轉，從代碼中也不難看出，跳轉到了 logs 頁面。
腳本文件就這些內容了，咱們繼續再來看看 UI 文件， index.wxml:
<!--
|
這個就是小程序 index 頁面的 UI 文件了，其實就是微信平臺定義了一系列組件，最外層是 <view class="container"> 還記得 container 麼？ 我們在最外層的 app.wxss 定義了它的樣式。 它裏面包含了兩個 View。先來看看第一個：
<!--
|
首先 bindtap="bindViewTap" 給這個 View 綁定了一個點擊事件，也就是我們前面 index.js 對應的這個方法，用戶點擊這個 View 就會跳轉到 logs 頁面上。 然後這個 View 裏面包含了一個 Image 和 Text， Image 的 src 屬性設置爲 userInfo.avatarUrl， 代表當前用戶的頭像， Text 中使用 userInfo.nickName， 代表當前用戶的暱稱。
這樣， index 頁面的整體邏輯就都完成了， 還有一個 index.wxss 樣式文件，這個咱們就先略過。
再來看看第二個視圖：
<!--
|
motto 其實就是我們在 index.js 中定義的一個屬性：
data: {
|
它會在頁面上顯示一個 Hello World。
現在，我們切換到調試界面， 就可以看到小程序的主頁了， 和我們剛剛描述的 UI 完全一樣吧：
這裏的用戶頭像和暱稱是動態從你的登錄狀態中取到的。
然後我們在這裏點擊用戶的頭像，就會跳轉到 logs 頁面， 列出你每次登錄小程序的時間點。
上傳小程序
現在微信小程序的基本開發流程就給大家介紹完了，還有一個 logs 頁面沒介紹，但它和 index 的頁面的基本思路都是一樣的，咱們就不多贅述了。 開發完小程序後，我們需要把它部署到哪裏呢？ 相信大家也有同樣的問題。 答案也很簡單，切換到項目選項卡，然後點擊上傳按鈕即可：
由於我的環境沒有內測賬號，所以在上傳區域顯示的是項目未關聯 AppID， 如果有了測試賬號，就會顯示你的 AppID 了。 目前只有內測賬號才能夠上傳小程序。這就是唯一的差別了。沒有內測賬號只是不能上傳，但完全可以在本地開發和測試。
小程序的這種上傳方式可能會讓大家覺得有些不同吧。 大家平常理解的 Web app 一般都需要自己搭建服務端，並且維護。 而小程序的這種託管方式，其實已經和我們開發一個原生 App 差不多了。 雖然前端上使用的是 js 這些看起來像是 web 的技術，但它核心思路跟傳統的 web app 已經不太一樣。 更像一種類似 React Native 的實現。
結尾
這次和大家一起，從頭到尾完整的體驗了一個最簡單的小程序的整體結構以及開發思路。個人覺得如果能找到合適的切入點，小程序這個平臺還是能找到一些不錯的機會的。但我的觀點是，不要認爲小程序的出現就會馬上顛覆誰，也不需要聽到網上有人說小程序難成大事就覺得它沒機會。 找到自己擅長的，以及用戶需要的，沒準就會創造出一些不錯的產品。 這次也是幫大家做一個基本的技術梳理，希望能夠對大家有所幫助。
