微信小程序開發語言的選擇

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

小程序所使用的程序文件類型大體分爲如下幾種：

①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，隨後將該值、模板編號和模板中的動態變量(好比：訂單號、價格等)提交給微信，由微信向用戶推送通知。

用戶信息與微信支付

小程序能夠在用戶贊成的前提下獲取到用戶的信息。

首先，小程序要經過微信登陸的接口，讓用戶受權登陸。以後，小程序就能夠展現並使用用戶信息了。

在使用微信登陸的時候須要注意， 消息須要通過簽名確認其完整性以後，方能保證數據未經篡改。

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