2017年6月14日，開發微信小程序已經是當下最熱門的話題，下面將從多方面來談談開發微信小程序相關的內容。

6月14日消息，據彭博社報道，為了與新東家沃爾瑪（Walmart）融合得更加順暢，Jet.com（去年8月被沃爾瑪以33億美元收購）正計劃逐步剔除自己平臺上所售的Costco旗下品牌產品。

6月18日，永輝將在福州開出第一家永輝生活店。值得注意的是，這也是永輝首家24小時營業門店。據了解，這家24小時門店商品由永輝物流統一配送，沒有熟食但提供蔬菜水果以及冷凍冰鮮類商品。

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

小程序所使用的程序文件類型大致分為以下幾種：

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

用戶信息與微信支付

小程序可以在用戶同意的前提下獲取到用戶的信息。

首先，小程序要通過微信登錄的接口，讓用戶授權登錄。之后，小程序就可以展示并使用用戶信息了。

在使用微信登錄的時候需要注意， 消息需要經過簽名確認其完整性之后，方能保證數據未經篡改。

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

想了解更多微信小程序開發和微信小程序大全都可以進入微信小程序商城系統開發了解。