微信使用的開(kāi)發(fā)語(yǔ)言和檔案很「特殊」。

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

①WXML(WeiXin Mark Language，微信標(biāo)記語(yǔ)言)

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

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

在語(yǔ)言方面，小程式看似重新定義了一套標(biāo)準(zhǔn)。但實(shí)際上，它們與「前端三件套」——HTML、CSS 和 Java——差很多。

相關(guān)學(xué)習(xí)推薦：小程式開(kāi)發(fā)教學(xué)

下面，我們就來(lái)對(duì)比一下小程式開(kāi)發(fā)語(yǔ)言和「前端三件組」有什麼異同點(diǎn)：

HTML 與WXML：兩者差異比較大，如果之前沒(méi)有接觸過(guò)Android 開(kāi)發(fā)，可能會(huì)覺(jué)得有些頭痛。事實(shí)上，WXML 更像是 Android 開(kāi)發(fā)中的介面 XML 描述文件，適合於程式介面的建構(gòu);而 HTML 則傾向於文章的展示(這與 HTML 的歷史有關(guān))，以及網(wǎng)路頁(yè)面的建構(gòu)。

WXSS 與 CSS：兩者在語(yǔ)言上幾乎沒(méi)有差別，可以直接通用。

JS 檔案：小程式的JS 檔案與前端開(kāi)發(fā)使用的JS 幾乎沒(méi)有區(qū)別，只是小程式的JS 新增了微信的一些API 接口，並去除了一些不必要的功能(如DOM)。

在語(yǔ)言上，小程式完全向?qū)W習(xí)成本最低的前端開(kāi)發(fā)看齊，但這不代表所有前端開(kāi)發(fā)者都能無(wú)縫遷移。

如果你是從前端開(kāi)發(fā)轉(zhuǎn)向小程序，就需要注意這兩個(gè)點(diǎn)：

HTML 與WXML 兩個(gè)檔案的建構(gòu)思想差異較大，如果之前只接觸過(guò)前端開(kāi)發(fā)，需要一點(diǎn)時(shí)間適應(yīng)WXML 的寫法。

雖然小程式使用的是前端語(yǔ)言，但不代表可以繼續(xù)沿用前端的開(kāi)發(fā)想法進(jìn)行開(kāi)發(fā)。小程式對(duì)前端開(kāi)發(fā)的要求從「建構(gòu)介面」升級(jí)成「開(kāi)發(fā)完整應(yīng)用」，前端開(kāi)發(fā)需要在意識(shí)上進(jìn)行轉(zhuǎn)變。

介面建構(gòu)

1. 基本邏輯

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

WXML 最大的特點(diǎn)是以視圖(view)的方式串聯(lián)介面元素，並透過(guò)程式邏輯(AppService)，將資訊更新即時(shí)傳遞至視圖層。

view 類似 HTML 中的 p 元素。在建構(gòu)的時(shí)候，view 可以被多層嵌套，view 內(nèi)可以放置任意視覺(jué)元素。

需要注意的是，元素一旦超出螢?zāi)恢猓褂谜呔蜔o(wú)法看到了，這與 HTML 有較大不同。

例如，我們將手機(jī)螢?zāi)幌胂癯梢粋€(gè)舞臺(tái)，舞臺(tái)以外的演員是無(wú)法被觀眾看到的。

小程式有專門用於捲動(dòng)的視圖。

如果希望介面是一個(gè)可以自由滾動(dòng)的介面(例如列表等)，可以使用scroll-view 視圖，在WXSS 中將其大小調(diào)整為整個(gè)螢?zāi)?，並設(shè)定scroll- y(上下滾動(dòng))或scroll-x(左右滾動(dòng))為true。

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

還有一點(diǎn)要注意的是：小程式的柵格排版系統(tǒng)使用的是 Flex 佈局，它是 W3C 在 2009 年提出的一種排版標(biāo)準(zhǔn)。

2. 綁定資料

對(duì)於單一字段，開(kāi)發(fā)者可以使用資料綁定的方法進(jìn)行資訊更新。

綁定的資料除了在載入的時(shí)候可以更新，也可以在JS 主程式中以函數(shù)形式進(jìn)行更新，更新同樣可以反映到介面上被綁定的資料中。

3. 條件渲染與清單(循環(huán))渲染

條件渲染適用於有意外狀況提示的頁(yè)面(如無(wú)法載入清單或詳情時(shí)，做出提示等等)。

它的渲染帶有觸發(fā)條件，也就是在符合條件時(shí)渲染這個(gè)頁(yè)面，否則忽略或渲染另一段程式碼。

兩個(gè)花括號(hào)所包含的判斷條件中的變數(shù)於主程式JS 程式碼中的data中聲明。

若需要在介面中建立一個(gè)列表，可以使用 WXML 中的循環(huán)渲染，將相同元素渲染程式碼進(jìn)行集合。循環(huán)的資料可以透過(guò)數(shù)組的方式寫入 data 中供 WXML 存取。

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

4. 範(fàn)本與引用

WXML 支援使用範(fàn)本與參考減少程式碼體積。

模板是在 WXML 程式碼中對(duì)相同的程式碼進(jìn)行重複使用的方式。

可以將多個(gè)範(fàn)本寫入至同一文件，並使用 import 在其他文件中進(jìn)行引用。

如果需要整個(gè)頁(yè)面引用，需要使用到 include。

#5.樣式

透過(guò)WXSS 樣式表，開(kāi)發(fā)者可以定義WXML 中的元素樣式。

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

6. 使用者操作與事件回應(yīng)

由於微信使用的不是HTML，所以也不能透過(guò)新增超連結(jié)(a 元素)的方式來(lái)監(jiān)控使用者的點(diǎn)擊事件。

對(duì)於需要監(jiān)聽(tīng)點(diǎn)擊事件的元素，應(yīng)該在 WXML 中使用 bindtap 屬性或 catchtap 屬性進(jìn)行綁定。

除了點(diǎn)擊一次，微信也提供按住、開(kāi)始觸控、鬆手等事件回應(yīng)。

在 WXML 中綁定好一個(gè)事件之後，就能在主程式 JS 中使用。

其他API 中也有其他對(duì)應(yīng)的事件，這些事件可以在微信小程式的正式文件中查閱到。

當(dāng)需要在小程式的頁(yè)間進(jìn)行跳轉(zhuǎn)時(shí)，應(yīng)該使用 wx.navigateTo() 方式。

需要注意的是，有關(guān)於頁(yè)面層級(jí)跳轉(zhuǎn)，微信將層級(jí)跳轉(zhuǎn)限製到了五層。在開(kāi)發(fā)時(shí)需要注意是否超過(guò)了相應(yīng)限制。

網(wǎng)路存取

小程式支援三種請(qǐng)求方式。

一種是直接的 HTTP 連線請(qǐng)求，請(qǐng)求後直接傳回結(jié)果，連線結(jié)束。另一種是 Socket 持續(xù)性連接，當(dāng)一方主動(dòng)關(guān)閉連線時(shí)，連線結(jié)束。

除了以上兩種收發(fā)純文字的連接方式，微信也提供了一個(gè)檔案收發(fā)介面。小程式中錄製的語(yǔ)音以及選擇的照片都需要這個(gè)方式來(lái)上傳。

透過(guò)小程式存取網(wǎng)路需要伺服器端必須支援 HTTPS 安全連接，且連接埠號(hào)碼必須為 443。

同時(shí)，小程式只能存取開(kāi)發(fā)者在登記小程式時(shí)所設(shè)定的伺服器位址。

多媒體與存儲(chǔ)

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

關(guān)於聲音的接口，有音訊播放與音樂(lè)播放兩種。

音訊播放提供了播放、暫停和停止播放三種接口，不提供跳轉(zhuǎn)至某個(gè)播放時(shí)間點(diǎn)的功能，也無(wú)法取得目前的播放進(jìn)度。

音樂(lè)播放介面提供除以上的基礎(chǔ)播放控制外的音樂(lè)狀態(tài)檢查和監(jiān)聽(tīng)等功能。

小程式提供照片和視訊資料交換介面。透過(guò)這個(gè)接口，小程式可以存取用戶選定或拍攝的照片與影片。

透過(guò)音訊錄製和視訊照片介面所獲得的多媒體資訊是暫時(shí)的，需要透過(guò)小程式儲(chǔ)存檔案介面對(duì)檔案進(jìn)行永久保存。

對(duì)於文字?jǐn)?shù)據(jù)，小程式也提供了儲(chǔ)存這類數(shù)據(jù)的介面。從諸如 Android 或其他 app 平臺(tái)轉(zhuǎn)向的開(kāi)發(fā)者需要注意的是，小程式不提供資料庫(kù)式的本機(jī)資料保存形式，而是透過(guò) 「欄位 - 值」的一對(duì)一形式進(jìn)行儲(chǔ)存。

硬體相關(guān)

小程式依託於微信，提供許多與硬體相關(guān)的 API。

小程式可以透過(guò)API 取得到以下資料：

系統(tǒng)相關(guān)資訊(包含網(wǎng)路狀態(tài)、裝置型號(hào)、視窗尺寸等)

重力感應(yīng)資料

羅盤資料

透過(guò)以上API，應(yīng)該可以輕鬆寫出“搖一搖”等互動(dòng)性頁(yè)面。

但要注意： 這些資料只能主動(dòng)獲取，不能透過(guò)這些數(shù)值變化的回呼即時(shí)取得。

推播服務(wù)

小程式提供推播服務(wù)，可以隨時(shí)向使用者發(fā)送必要的通知。但請(qǐng)注意，推播服務(wù)只能用於通知提醒，不能用於群發(fā)。

在小程式中，推播服務(wù)叫做「範(fàn)本訊息」(之前有開(kāi)發(fā)過(guò)服務(wù)號(hào)碼的開(kāi)發(fā)者應(yīng)該比較熟悉)。開(kāi)發(fā)者需要在微信小程式後臺(tái)登記新的範(fàn)本推播訊息(例如：購(gòu)買成功通知等)並審核通過(guò)後，才能在小程式中使用範(fàn)本訊息推播服務(wù)。具體審核標(biāo)準(zhǔn)建議參考相應(yīng)文件。

範(fàn)本訊息審核通過(guò)後，開(kāi)發(fā)者需要先向微信伺服器取得Access Token，隨後將該值、範(fàn)本編號(hào)和範(fàn)本中的動(dòng)態(tài)變數(shù)(例如：訂單編號(hào)、價(jià)格等)提交給微信，由微信向用戶推播通知。

使用者資訊與微信支付

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

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

在使用微信登入的時(shí)候需要注意， 訊息需要經(jīng)過(guò)簽章確認(rèn)其完整性之後，方能保證資料未經(jīng)竄改。

小程式中也可以使用微信支付。需要注意的是發(fā)送支付請(qǐng)求時(shí)，需要在發(fā)送的訊息中新增簽名，以確認(rèn)訊息完整性。

相關(guān)學(xué)習(xí)推薦：微信小程式教學(xué)

以上是微信小程式完整開(kāi)發(fā)綱要的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！