微信小程式完整開發綱要

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

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

①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 中的 p 元素。在建構的時候，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，隨後將該值、範本編號和範本中的動態變數(例如：訂單編號、價格等)提交給微信，由微信向用戶推播通知。

使用者資訊與微信支付

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

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

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

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

相關學習推薦：微信小程式教學

以上是微信小程式完整開發綱要的詳細內容。更多資訊請關注PHP中文網其他相關文章！