本文筆者將根據quick start中的範例代碼，帶大家簡單地剖析一下小程序的運行方式，並介紹小程序開發中一些通用的特性，帶著大家一步步寫出自己的小程序。

適用對象：前端初學者，對小程序開發感興趣者

tips：由於筆者也是一位前端菜鳥，所以盡量用簡單直白的語言為大家講解，如有說的不到位的地方，還望多多指教。

吊了我們一年胃口的小程序終於和大家見面了。經過了一天的發酵，小程序已經成為了今天的超級頭條（汪汪哭暈在廁所）。

經歷了一天媒體對小程序的狂轟濫炸，相信大家對於小程序一定充滿了好奇。與其跟風轉發朋友圈，不如試著自己動手，寫一個自己的小程序吧。

食材：

小程序模擬器：微信小程序官方模擬器

食材非常的簡單，只需要下載官方提供的模擬器（根據自己電腦的版本下載），下載安裝完畢以後所有的環境就搭建完成了，不需要再配置其他依賴，不得不說大廠考慮的還是比較周全的。

初始化配置

下載完畢後啟動文件，會出現一個二維碼，用任意的微信賬號掃碼登錄即可。

登錄成功後選擇第一項“本地小程序項目。

接下來會進入初始化界面。

第一項AppID可以暫時選擇不填（部分API受限但並不影響我們本次試驗），如果你和筆者一樣是個窮學生或者是個人開發者的話，當然如果有公測賬號可以選擇輸入自己的AppID。

項目名稱這裏我們填：FirstApp， 項目目錄選擇一個常用的目錄即可，記得勾選“在當前目錄中創建quick start 項目”（選中後系統會為我們生成一個簡單的頁面，否則什麽也不生成）。接著點擊“添加項目”。

接下來就進入到小程序模擬器的主界面：

界面左邊是當前正在運行的程序的預覽視圖，每次我們編輯完代碼按 ctrl/ command + s 保存，預覽視圖就會自動刷新至最新狀態。

中間是當前工作的項目目錄，這裏我們會發現模擬器已經自動幫我們生成了一些初始化的代碼。待會我們再來一一介紹這些文件分別是用來幹什麽的。

右邊就是我們的代碼編輯區，這裏就是我們敲代碼的地方啦。

快速上手

在深入講解之前我們先來敲一下代碼

點擊項目目錄中的 index.wxml，在第9行輸入如下代碼：

編輯完後保存，這時你會看到右邊預覽界面發生了變化。

我們發現原有的Hello World下面出現了另外一個Hello World，而且試著用鼠標點擊一下，就會發現似乎是可以編輯的。這是因為我們添加了<input />標簽，它可以監聽用戶鍵盤的輸入。

更多詳情請看 input | WeChat

接下來我們打開 index.js，輸入如下代碼（註意大小寫及用於分隔屬性的逗號）：

保存以後試著在剛才新添加的輸入框中編輯一下，登登登登！！

可以看到文本內容就會隨著我們輸入框內容的改變而改變啦！

理論時間（不感冒的可選擇跳過）

熟悉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獲取我們需要的數據或操作。

雖然實際開發中還有些細枝末節的東西需要我們去考慮，但是總體而言都離不開這三個步驟。

趕緊來試試吧

下集預告：想知道小程序究竟是怎麽運行起來的？就讓我們在下一章節繼續深入地剖析一下小程序的內部運行機制吧。

未完待續

小程序初體驗：手把手教你寫出第一個小程序（一）