一、開發前的準備

開發環境：微信推出的官方開發工具。

申請Appid：相關公司或個人申請到Appid后可以進行真機的調試和預覽，否則只能在開發工具里進行調試。

備案域名和證書：微信小程序僅支持https協議，所以務必綁定含有證書的域名，才能在正式上線后進行使用。

二、項目結構

微信小程序底層借鑒了React框架的思想，整個開發圍繞著組件化開發和數據綁定的模式進行，與傳統的jQuery開發邏輯不同。

在開發工具中建立項目，選擇quick start選項，會自動生成項目的框架，并補充部分代碼。

如圖所示，.wxss后綴是樣式文件，類似于css，整個文件的書寫語法和css一致，.js后綴的是腳本文件，和傳統前端開發的js文件作用一樣，.json后綴文件是配置文件，頁面相關配置的書寫都在這個文件中。這些文件在進入小程序之后就會運行，生成小程序實例。

下面我們簡單學習一下這三個文件的作用。

1、app.js是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量、建立一些登錄和獲取用戶信息的全局方法，進行本地數據的讀寫存儲。

2、 app.json 是對整個小程序的全局配置。在這個文件中我們可以注冊每個頁面，設定小程序窗口的背景顏色和導航文字，設置小程序的tab分頁等。

3、app.wxss 是整個小程序的公共樣式表。它是全局的，頁面里的元素也都可以直接使用該文件里的樣式規則。

Pages文件夾里放置著各個頁面的文件夾，utils里是一個通用工具類方法文件夾。我們在小程序里看到的每個頁面，都是放置在pages文件夾里的。

三、頁面文件結構

例如我們想要寫一個充值頁面叫做charge，首先要在app.json文件中進行頁面的注冊，然后就在pages里新建一個叫做charge的文件夾，該文件夾內必須包含四個文件：charge.wxml, charge.wxss, charge.js和 charge.json。這四個文件缺一不可，并且一定要保證后綴以外的名字完全一致。

.wxml后綴文件是頁面的結構，類似于傳統前端開發的html文件，.wxss是該頁面的樣式文件，.js是頁面的腳本文件，.json是頁面的配置文件。

一個簡單的.wxml文件代碼如下：

書寫結構和html文件很像，微信小程序只是重新進行了標簽的定義，但是在小程序里，每個標簽都是一個組件，根據官方文檔我們可以快速找到常用組件的標簽寫法和對應的屬性。

小程序支持在wxml文件里進行數據綁定，使用“{{ }}”來完成綁定。對應的數據可以寫在js文件中。同時，小程序也支持條件渲染和列表渲染。

再來看看js頁面的簡單結構：

在js文件中，我們可以聲明綁定的數據，監聽處理頁面的生命周期函數，定義頁面的交互事件，獲取小程序實例調用實例方法等。

小程序的js文件，內置對象是Page而非瀏覽器內置的window對象，因此，所有以window對象為基礎而寫的庫或插件都無法在小程序中使用（例如jQuery）。除此以外，小程序里也沒有document對象，所有DOM的操作都是基于綁定的數據來進行變化，而不能直接在腳本里進行DOM操作。熟悉Angular，React或者Vue的朋友應該可以很容易理解這種設計。

需要注意的是，如果頁面無需新的配置項，也必須包含.json文件，并且文件里最少要有一個大括號（如“{ }”），否則會報錯。

這樣我們就處理了一個頁面了，每個頁面都可以按照這樣的方式來開發，但請記住一定要在app.json文件中進行頁面的注冊，否則是無效的哦。

四、與后臺通信

網絡請求是開發中必不可少的環節，微信小程序的網絡請求是有一些地方需要注意的。

首先，微信小程序的請求都是HTTPS請求，其次，content-type 默認為 ‘application/json’， content-type的設置是需要注意的，地址url里不能有端口，還要確保服務器的TLS版本支持1.2及以下。

而官方沒有指出的是，微信小程序的請求是不自帶session的，這一點與傳統瀏覽器的前端開發不同，大家在實際的開發中就會發現這一點，因此，我們也必須使用一些開發技巧來保存相關的session，并在網絡請求的時候一并發送給后臺。

五、手機預覽

將自己的微信號綁定到小程序對應AppId的開發者當中，就可以實現掃一掃預覽。

在開發工具的左側點擊“項目”，會彈出上圖，然后點擊預覽，掃描二維碼即可在手機里預覽項目，如果相關的https服務還沒有部署完成又仍然想要預覽調試，則可以勾選“開發環境不校驗請求域名以及TLS版本”。

除此以外，小程序也可以進行模塊化的開發，模板功能可以讓開發者定義代碼片段，然后在不同的地方調用。小程序還有很多跟設備關聯的API以及面向用戶的開放接口，在熟悉了開發基礎知識以后便可以進階性的去學習與了解這些API啦。