微信使用的開發語言和檔案很「特殊」。

小程式所使用的程式檔案型別大致分為以下幾種：

①WXML(WeiXin Mark Language，微信標記語言)

②WXSS(WeiXin Style Sheet，微信樣式表)

③JS(Java，小程式的主體)

在語言方面，小程式看似重新定義了一套標準。但實際上，它們與「前端三件套」——HTML、CSS 和 Java——差不太多。

下面，我們就來對比一下小程式開發語言和「前端三件套」有什麼異同點：

HTML 與 WXML：兩者差異比較大，如果之前沒有接觸過 Android 開發，可能會覺得有些頭疼。事實上，WXML 更像是 Android 開發中的介面 XML 描述檔案，適合於程式介面的構建;而 HTML 則傾向於文章的展示(這與 HTML 的歷史有關)，以及網際網路頁面的構建。

WXSS 與 CSS：兩者在語言上幾乎沒有差別，可以直接通用。

JS 檔案：小程式的 JS 檔案與前端開發使用的 JS 幾乎沒有區別，只是小程式的 JS 新增了微信的一些 API 介面，並去除了一些不必要的功能(如 DOM)。

在語言上，小程式完全向學習成本最低的前端開發看齊，但這不代表所有前端開發者都能無縫遷移。

如果你是從前端開發轉向小程式，就需要注意這兩個點：

HTML 與 WXML 兩種檔案的構建思想差異較大，如果之前只接觸過前端開發，需要一點時間才能適應 WXML 的編寫方法。

雖然小程式使用的是前端語言，但不代表可以繼續沿用前端的開發思想進行開發。小程式對前端開發的要求從「構建介面」升級成「開發完整應用」，前端開發需要在意識上進行轉變。

介面構建

1. 基本邏輯

WXML 和 WXSS 兩種檔案是小程式介面元素宣告及樣式描述檔案。

WXML 最大的特點是以檢視(view)的方式串聯介面元素，並通過程式邏輯(AppService)，將資訊更新實時傳遞至檢視層。

view 類似於 HTML 中的 div 元素。在構建的時候，view 可以被多級巢狀，view 內可以放置任意視覺元素。

需要注意的是，元素一旦超出螢幕之外，使用者就無法看到了，這與 HTML 有較大不同。

比如，我們將手機螢幕想像成一個舞臺，舞臺之外的演員是無法被觀眾看到的。

小程式有專門用於滾動的檢視。

如果希望介面是一個可以自由滾動的介面(例如列表等)，可以使用 scroll-view 檢視，在 WXSS 中將其大小調整為整個螢幕，並設定 scroll-y(上下滾動)或 scroll-x(左右滾動)為 true。

小程式中不能直接使用 DOM 控制 WXML 元素。如果需要進行資料更新，就得使用 WXML 提供的資料繫結及元素渲染方法。

還有一點需要注意的是：小程式的柵格排版系統使用的是 Flex 佈局，它是 W3C 在 2009 年提出的一種排版標準。

2. 繫結資料

對於單個欄位，開發者可以使用資料繫結的方法進行資訊更新。

繫結的資料除了在載入的時候可以更新，也可以在 JS 主程式中以函式形式進行更新，更新同樣可以反映到介面上被繫結的資料中。

3. 條件渲染與列表(迴圈)渲染

條件渲染適用於有意外情況提示的頁面(如無法載入列表或詳情時，做出提示等等)。

它的渲染帶有觸發條件，即符合條件時渲染這個頁面，否則忽略或渲染另一段程式碼。

兩個花括號所包含的判斷條件中的變數於主程式 JS 程式碼中的 data 中宣告。

若需要在介面中構建一個列表，可以使用 WXML 中的迴圈渲染，將同一元素渲染程式碼進行集合。迴圈的資料可以通過陣列的方式寫入 data 中供 WXML 訪問。

渲染完畢後，渲染判斷條件的變動可以影響介面變動。

4. 模板與引用

WXML 支援使用模板與引用減少程式碼體積。

模板是在 WXML 程式碼中對相同的程式碼進行復用的方式。

可以將多個模板寫入至同一檔案，並使用 import 在其他檔案中進行引用。

如果需要整個頁面引用，需要使用到 include。

5. 樣式

通過 WXSS 樣式表，開發者可以定義 WXML 中的元素樣式。

WXSS 與 CSS 程式碼一樣，可以直接使用選擇器選擇元素。在 WXML 中也可以直接定義元素的 id 和 class 以便於在 WXSS 檔案中進行樣式定義。

6. 使用者操作與事件響應

由於微信使用的不是 HTML，所以也 不能通過新增超連結(a 元素)的方式來監測使用者的點選事件。

對於需要監聽點選事件的元素，應該在 WXML 中使用 bindtap 屬性或 catchtap 屬性進行繫結。

除了點選一次，微信也提供按住、開始觸控、鬆手等事件響應。

在 WXML 中繫結好一個事件之後，就能在主程式 JS 中使用。

其他 API 中也有其他相應的事件，這些事件可以在微信小程式的官方文件中查閱到。

當需要在小程式的頁面間進行跳轉時，應該使用 wx.navigateTo() 方式。

需要注意的是，有關於頁面層級跳轉，微信將層級跳轉限制到了五層。在開發時需要注意是否超過了相應限制。

網路訪問

小程式支援三種請求方式。

一種是直接的 HTTP 連線請求，請求後直接返回結果，連線結束。另一種是 Socket 持續性連線，當一方主動關閉連線時，連線結束。

除了以上兩種收發純文字的連線方式，微信還提供了一個檔案收發介面。 小程式中錄製的語音以及選擇的照片都需要這個方式來進行上傳。

通過小程式訪問網路需要伺服器端必須支援 HTTPS 安全連線，且埠號必須為 443。

同時，小程式只能訪問開發者在登記小程式時所設定的伺服器地址。

多媒體與儲存

若需在小程式中播放多媒體(包括音視訊)或進行資料儲存，不能使用 HTML 5 中所提供的標準， 必須使用微信提供的小程式多媒體播放控制介面及儲存介面等。

關於聲音的介面，有音訊播放與音樂播放兩種。

音訊播放提供了播放、暫停和停止播放三種介面，不提供跳轉至某個播放時間點的功能，也不能獲取目前的播放進度。

音樂播放介面提供除以上的基礎播放控制外的音樂狀態檢查和監聽等功能。

小程式提供照片和視訊資料交換介面。通過這個介面，小程式可以訪問使用者選定或拍攝的照片與視訊。

通過音訊錄製和視訊照片介面獲得的多媒體資訊是臨時的，需要通過小程式儲存檔案介面對檔案進行永久儲存。

對於文字資料，小程式也提供了儲存這類資料的介面。從諸如 Android 或其他 app 平臺轉向的開發者需要注意的是，小程式不提供資料庫式的本地資料儲存形式，而是通過 「欄位 - 值」的一對一形式進行儲存。

硬體相關

小程式依託於微信，提供許多與硬體有關的 API。

小程式可以通過 API 獲取到以下資料：

系統相關資訊(包括網路狀態、裝置型號、視窗尺寸等)

重力感應資料

羅盤資料

通過以上 API，應該可以輕鬆寫出「搖一搖」等互動性頁面。

但需要注意： 這些資料只能主動獲取，不能通過這些數值變化的回撥實時獲取。

推送服務

小程式提供推送服務，可以隨時向用戶傳送必要的通知。 但請注意，推送服務只能用於通知提醒，不能用於群發。

在小程式中，推送服務叫做「模板訊息」(之前有開發過服務號的開發者應該比較熟悉)。開發者需要在微信小程式後臺登記新的模板推送訊息(比如：購買成功通知等)並稽核通過後，才能在小程式中使用模板訊息推送服務。具體稽核標準建議參考相應文件。

模板訊息稽核通過後，開發者需要先向微信伺服器獲取 Access Token，隨後將該值、模板編號和模板中的動態變數(比如：訂單號、價格等)提交給微信，由微信向用戶推送通知。

使用者資訊與微信支付

小程式可以在使用者同意的前提下獲取到使用者的資訊。

首先，小程式要通過微信登入的介面，讓使用者授權登入。之後，小程式就可以展示並使用使用者資訊了。

在使用微信登入的時候需要注意， 訊息需要經過簽名確認其完整性之後，方能保證資料未經篡改。

小程式中也可以使用微信支付。需要注意的是在傳送支付請求時，需要在傳送的訊息中添加簽名，以確認訊息完整性。