本文筆者將根據quick start中的范例代碼，帶大家簡單地剖析一下小程序的運行方式，并介紹小程序開發中一些通用的特性，帶著大家一步步寫出自己的小程序。
適用對象：前端初學者，對小程序開發感興趣者
tips：由于筆者也是一位前端菜鳥，所以盡量用簡單直白的語言為大家講解，如有說的不到位的地方，還望多多指教。
吊了我們一年胃口的小程序終于和大家見面了。經過了一天的發酵，小程序已經成為了今天的超級頭條（汪汪哭暈在廁所）。
經歷了一天媒體對小程序的狂轟濫炸，相信大家對于小程序一定充滿了好奇。與其跟風轉發朋友圈，不如試著自己動手，寫一個自己的小程序吧。
食材：
小程序模擬器：微信小程序官方模擬器
食材非常的簡單，只需要下載官方提供的模擬器（根據自己電腦的版本下載），下載安裝完畢以后所有的環境就搭建完成了，不需要再配置其他依賴，不得不說大廠考慮的還是比較周全的。
初始化配置
下載完畢后啟動文件，會出現一個二維碼，用任意的微信賬號掃碼登錄即可。
登錄成功后選擇第一項“本地小程序項目。
接下來會進入初始化界面。
第一項AppID可以暫時選擇不填（部分API受限但并不影響我們本次試驗），如果你和筆者一樣是個窮學生或者是個人開發者的話，當然如果有公測賬號可以選擇輸入自己的AppID。
項目名稱這里我們填：FirstApp， 項目目錄選擇一個常用的目錄即可，記得勾選“在當前目錄中創建quick start 項目”（選中后系統會為我們生成一個簡單的頁面，否則什么也不生成）。接著點擊“添加項目”。
接下來就進入到小程序模擬器的主界面：
界面左邊是當前正在運行?的程序的預覽視圖，每次我們編輯完代碼按 ctrl/ command + s 保存，預覽視圖就會自動刷新至最新狀態。
中間是當前工作的項目目錄，這里我們會發現模擬器已經自動幫我們生成了一些初始化的代碼。待會我們再來一一介紹這些文件分別是用來干什么的。
右邊就是我們的代碼編輯區，這里就是我們敲代碼的地方啦。
快速上手
在深入講解之前我們先來敲一下代碼
點擊項目目錄中的 index.wxml，在第9行輸入如下代碼：
編輯完后保存，這時你會看到右邊預覽界面發生了變化。
我們發現原有的Hello World下面出現了另外一個Hello World，而且試著用鼠標點擊一下，就會發現似乎是可以編輯的。這是因為我們添加了<input />標簽，它可以監聽用戶鍵盤的輸入。
更多詳情請看 input | WeChat
接下來我們打開 index.js，輸入如下代碼（注意大小寫及用于分隔屬性的逗號）：
保存以后試著在剛才新添加的輸入框中編輯一下，登登登登?。?/p>
可以看到文本內容就會隨著我們輸入框內容的改變而改變啦！
理論時間（不感冒的可選擇跳過）
熟悉VM框架的人看到這里可能會很有親切感，沒錯，微信團隊吸取了它們的一些特性，只不過這里的用法更簡潔。
只要你在每個頁面對應的Page對象的data屬性中定義了新的變量，那么頁面的wxml就可以用Mustache 語法（雙大括號）全局地讀取到你定義在data屬性中的變量。
簡單地說，就是只要你在data設置了一個新屬性：
Page({
? ? data: {
? ? ? ? ? 新屬性 ：新屬性的值
? ? }
})
在 .wxml中就可這樣調用它：
<view>{{ 新屬性 }}</view> ? ? ? ?<-- 頁面中會顯示 “ 新屬性的值 ” /-->
想要修改data中的值官方推薦使用 setData 方法，使用 this.data.變量名 可在 .js 文件中獲取data中的數據。范例如下：
var newMotto = this.data.motto + ' ! '
this.setData({
? ? ?motto：newMotto
})
想了解更多請查閱 數據綁定 | WeChat
注意看index.wxml中我們在<input />標簽中加入了 bindinput屬性，這是一個事件綁定的使用方式。意思就是當我們在這個輸入框進行任意輸入時，都會觸發bindinput屬性對應的函數或代碼塊，在這里我們讓其觸發 inputMotto() 函數。
可以看到這個inputMotto屬性被賦值了一個匿名函數，這個函數接收一個事件對象e（可以取任意名字），這是該函數被回調時被傳入的。里面包含了觸發及被觸發對象的一些信息，其中就有我們需要的輸入框中的值。它被存儲在 e.detail.value 中。
打印在 console 的 e.detail 的內容如下：
可以看到 cursor 為當前輸入框中的文本長度，value 為文本值。
接下來教大家使用微信提供的API（接口）。
在index.wxml中輸入：
保存后查看頁面：
可以看到我們為頁面添加了一個按鈕<button>標簽及圖片<image>標簽，其中按鈕綁定了點擊事件chooseImage，也就是說當我們點擊按鈕是就會觸發chooseImage方法。
而圖片則用 tempFilePathSet 作為src資源路徑，style屬性是為圖片設置的樣式。因為當前src為空，故圖片沒有顯示。
在index.js中輸入：
可以看到我們首先在data中定義了 tempFilePathSet 屬性（第8行），接著定義了 chooseImage 方法。
在第37行，我們調用了小程序為我們設置的全局 wx 對象，這個對象包含了所有微信暴露出來的接口。
也就是說，如果我想使用微信內置的一些功能，比如獲取用戶基本信息，讀取圖片，獲取位置，微信支付等，我們只能通過調用 wx 對象中的方法來實現。
在這里我們使用了 wx 對象中的 chooseImage 方法來讀取用戶本地圖片。success 方法將會在獲取到本地圖片路徑成功后被回調，并被傳入 res 參數，這個參數包含了用戶所選取的圖片的本地路徑。
代碼編輯完畢后保存，點擊之前定義的 chooseImage 按鈕，這時會發現出現一個彈出框（在手機端應為微信讀取界面），選擇一張圖片后，登登登登~~
好了，看到這里你應該對于小程序有了基本的了解。雖然我們只是做了一些很簡單的功能，但是小程序開發中所需要的大部分內容其實都已經涉及到了。接下來請跟我回溯一下：
1. 我們首先在 page 中定義好界面中所需要的數據及方法。
2. 接著在頁面中添加了組件，并為其綁定了事件。
3. 然后調用了微信的API，并通過API獲取我們需要的數據或操作。
雖然實際開發中還有些細枝末節的東西需要我們去考慮，但是總體而言都離不開這三個步驟。
趕緊來試試吧
下集預告：想知道小程序究竟是怎么運行起來的？就讓我們在下一章節繼續深入地剖析一下小程序的內部運行機制吧。
未完待續
