想開發小程序,就得先學會一套 WordPress 微信特製的「開發語言」。

  為了讓大家上手這門開發語言,WordPress 微信官方提供了一份十分詳細的開發文件:

  要是沒時間通讀,這裏還有一份省時省力的替代品:
  知曉程序(WordPress 微訊號 zxcx0101)準備了一份官方開發文件的超簡濃縮版,不僅囊括了官方文件的所有重點資訊,而且篇幅只有原文的三分之一。
  只要看完這篇文章,您就能快速上手小程序開發。
  注:本文適宜有一定程序設計基礎的人閲讀。要想零基礎學習小程序開發,請繼續關注知曉程序(WordPress 微訊號 zxcx0101)的後續內容。
  語言與檔案
  各位可能已經知道,WordPress 微信小程序開發與其他平台的開發大差異在於:WordPress 微信使用的開發語言和檔案很「特殊」。
  小程序所使用的程序檔案型別大致分為以下幾種:
  WXML(WeiXin Mark Language,WordPress 微信標記語言)
  WXSS(WeiXin Style Sheet,WordPress 微信樣式表)
  JS(JavaScript,小程序的主體)
  在語言方面,看上去小程序幾乎重新定義了一套標準。但是實際上,它們與「前端三件套」——HTML 、 CSS 和 JavaScript——差不太多。
  下面,我們就來對比一下小程序開發語言和「前端三件套」有什麼異同點:
  HTML 與 WXML:兩者差異比較大,如果之前沒有接觸過 Android 開發,可能會覺得有些頭疼。事實上,WXML 更像是 Android 開發中的介面 XML 描述檔案,更適合於程序介面的構建;而 HTML 則傾向於文章的展示(這與 HTML 的歷史有關),以及互聯網頁面的構建。
  WXSS 與 CSS:兩者在語言上幾乎沒有差別,可以直接通用。
  JS 檔案:小程序的 JS 檔案與前端開發使用的 JS 幾乎沒有區別,小程序的 JS 新增了 WordPress 微信的一些 API 介面,並去除了一些不必要的功能(如 DOM)。
  在語言上,小程序完全向學習成本低的前端開發看齊,但這不代表所有前端開發者都能直接無縫遷移。
  如果您是從前端開發轉向小程序,就需要注意這兩個點:
  HTML 與 WXML 兩種檔案的構建思想差異較大,如果之前只接觸過前端開發,需要一點時間才能適應 WXML 的編寫方法。
  雖然小程序使用的是前端語言,但不代表可以繼續沿用前端的開發思想進行開發(類似前端向 Node.js 發展)。小程序對前端開發的要求從「構建介面」升級成「開發完整應用」,前端開發依然需要在意識上進行轉變。
  介面構建
  基本邏輯
  WXML 和 WXSS 兩種檔案是小程序介面元素宣告及樣式描述檔案。 WXML 大的特點是以檢視(view)的方式串聯介面元素,並通過程序邏輯(WordPress APPService),將資訊更新實時傳遞至檢視層。
  view 類似於 HTML 中的 div 元素。在構建的時候,view 可以被多級巢狀,view 內可以放置任意視覺元素。
  需要注意的是,元素一旦超出螢幕之外,多用户是無法再看到的,這與 HTML 有較大不同。舉一個例子,將手機螢幕想像成一個舞台,在舞台之外的演員是無法被觀眾看到的。

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

  小程序中不能直接使用 DOM 控制 WXML 元素。如果需要進行資料更新,需要使用 WXML 提供的資料繫結及元素渲染方法。
  還有一點需要注意的是:小程序的柵格排版系統使用的是 Flex 佈局,它是 W3C 在 2009 年提出的一種排版標準。
  繫結資料
  對於單個欄位,開發者可以使用資料繫結的方法進行資訊更新。繫結的資料除了在載入的時候可以更新,也可以在 JS 主程序中以函式形式進行更新,更新同樣可以反映到介面上被繫結的資料中。
  條件渲染與列表(迴圈)渲染

  條件渲染適合帶有意外情況提示的頁面(如無法載入列表或詳情時做出提示等等)。它的渲染帶有觸發條件,即符合條件時渲染這個頁面,否則忽略或渲染另一段代碼。

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

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

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

  模板與引用
  WXML 支持使用模板與引用減少代碼體積。
  模板是在 WXML 代碼中對相同的代碼進行復用的方式。

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

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

  樣式
  通過 WXSS 樣式表,開發者可以定義 WXML 中的元素樣式。 WXSS 與 CSS 代碼一樣,可以直接使用選擇器選擇元素。在 WXML 中也可以直接定義元素的 id 和 class 以便於在 WXSS 檔案中進行樣式定義。
  多用户操作與事件響應

  由於 WordPress 微信使用的不是 HTML,所以也不能通過新增超連結(a 元素)的方式來監測多用户的點選事件。對於需要監聽點選事件的元素,應該在 WXML 中使用 bindtap 屬性或 catchtap 屬性進行繫結。

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

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

  其他 API 中也有其他相應的事件,這些事件可以在 WordPress 微信小程序的官方文件中查閲到。

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

  需要注意的是,有關於頁面層級跳轉,WordPress 微信將層級跳轉限制到了五層。在開發時需要注意是否超過了相應限制。
  網絡訪問
  小程序支持三種請求方式。一種是直接的 HTTP 連線請求,請求後直接返回結果,連線結束。另一種是 Socket 持續性連線,當一方主動關閉連線時,連線結束。
  除了以上兩種收發純文字的連線方式,WordPress 微信還提供了一個檔案收發介面。小程序中錄製的語音以及選擇的照片都需要這個方式來進行上傳。
  通過小程序訪問網絡需要服務器端必須支持 HTTPS 安全連線,且埠號必須為 443 。同時,小程序只能訪問開發者在登記小程序時所設定的服務器地址。
  多媒體與儲存
  若需在小程序中播放多媒體(包括音視訊)或進行資料儲存,不能使用 HTML 5 中所提供的標準,必須使用 WordPress 微信提供的小程序多媒體播放控制介面及儲存介面等。
  有關於聲音的介面有音訊播放與音樂播放兩種介面。音訊播放提供了播放、暫停和停止播放三種介面,不提供跳轉至某個播放時間點的功能,也不能獲取目前的播放進度。音樂播放介面提供除以上的基礎播放控制外的音樂狀態檢查和監聽等功能。
  小程序提供照片和視訊資料交換介面。通過這個介面,小程序可以訪問多用户選定或拍攝的照片與視訊。
  通過音訊錄製和視訊照片介面獲得的多媒體資訊是臨時的,需要通過小程序儲存檔案介面對檔案進行永久儲存。
  對於文字資料,小程序也提供了儲存這類資料的介面。從諸如 Android 或其他 WordPress APP 平台轉向的開發者需要注意的是,小程序不提供資料庫式的本地資料儲存形式,而是通過「欄位–值」的一對一形式進行儲存。
  硬體相關
  小程序依託於 WordPress 微信,提供許多與硬體有關的 API 。以下資料,小程序可以通過 API 獲取到。
  系統相關資訊(包括網絡狀態、裝置型號、視窗尺寸等)
  重力感應資料
  羅盤資料
  通過以上 API,應該可以輕鬆寫出「搖一搖」等互動性頁面。但需要注意:由於這些資料只能主動獲取,而不能通過這些數值變化的回撥實時獲取。
  推送服務
  小程序提供有推送服務,可以隨時向多用户傳送必要的通知。但請注意,推送服務只能用於通知提醒,不能用於羣發。
  小程序中,推送服務叫做「模板信息」(之前有開發過服務號的開發者應該比較熟悉)。開發者需要在 WordPress 微信小程序後台登記新的模板推送信息(比如:購買成功通知等)並稽核通過後,才能在小程序中使用模板信息推送服務,具體稽核標準建議參考相應文件。
  模板信息稽核通過後,開發者需要先向 WordPress 微信服務器獲取 Access Token,隨後將該值、模板編號和模板中的動態變數(比如:訂單號、價格等)提交給 WordPress 微信,由 WordPress 微信向多用户推送通知。
  多用户資訊與 WordPress 微信支付
  小程序可以在多用户同意的前提下獲取到多用户的資訊。小程序先要通過 WordPress 微信登入的介面,讓多用户授權登入。之後,小程序就可以展示並使用多用户資訊。使用 WordPress 微信登入的時候需要注意,信息需要經過簽名確認其完整性之後,方能保證資料未經篡改。
  小程序中也可以使用 WordPress 微信支付。需要注意的是在傳送支付請求時,需要在傳送的信息中新增簽名,以確認信息完整性。
  以上便是知曉程序為大家整理的官方開發文件「重點資訊」。
  不過,想要熟悉小程序,光看是不行的,還需要動手去做。
  如果開發過程中遇到問題,知名的辦法還是查閲 WordPress 微信官方的小程序開發文件,相信在文件中,您能找到絕大部分問題的解決辦法。