官方文檔濃縮系列一官方開(kāi)發(fā)文檔解讀_h

1、官方文檔濃縮系列一官方開(kāi)發(fā)文檔解讀語(yǔ)言與文件微信小程序開(kāi)發(fā)與其他平臺(tái)開(kāi)發(fā)的最大差異在于：微信使用的開(kāi)發(fā)語(yǔ)言和文件很特殊。小程序所使用的程序文件類型大致分為以下幾種： WXML（WeiXin Mark Language，微信標(biāo)記語(yǔ)言） WXSS（WeiXtyle Sheet，微信樣式表） JS（Java，小程序的主體）在語(yǔ)言方面，小程序看似重新定義了一套標(biāo)準(zhǔn)。但實(shí)際上，它們與前端三件套HTML、CSS 和 Java差不太多。下面，我們就來(lái)對(duì)比一下小程序開(kāi)發(fā)語(yǔ)言和前端三件套有什么異同點(diǎn)： HTML 與 WXML：兩者差異比較大，如果之前沒(méi)有接觸過(guò) Android 開(kāi)發(fā)，可能會(huì)覺(jué)得有些頭疼。事實(shí)上，

2、WXML 更像是 Android 開(kāi)發(fā)中的界面 XML 描述文件，適合于程序界面的構(gòu)建；而HTML 則傾向于文章的展示（這與 HTML 的歷史有關(guān)），以及互聯(liá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òu)建思想差異較大，如果之前

3、只接觸過(guò)前端開(kāi)發(fā)，需要一點(diǎn)時(shí)間才能適應(yīng) WXML 的編寫(xiě)方法。 雖然小程序使用的是前端語(yǔ)言，但不代表可以繼續(xù)沿用前端的開(kāi)發(fā)思想進(jìn)行開(kāi)發(fā)。小程序?qū)η岸碎_(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í)時(shí)傳遞至視圖層。view 類似于 HTML 中的 div 元素。在構(gòu)建的時(shí)候，view 可以被多級(jí)嵌套，view 內(nèi)可以放置任意視覺(jué)元素。需要注意的是，元素一旦超出屏幕之外，用戶就

4、無(wú)法看到了，這與 HTML 有較大不同。比如，我們將手機(jī)屏幕想像成一個(gè)舞臺(tái)，舞臺(tái)之外的演員是無(wú)法被觀眾看到的。小程序有專門(mén)用于滾動(dòng)的視圖。如果希望界面是一個(gè)可以自由滾動(dòng)的界面（例如列表等），可以使用 scroll-view 視圖，在WXSS中將其大小調(diào)整為整個(gè)屏幕，并設(shè)置 scroll-y（上下滾動(dòng)）或 scroll-x（左右滾動(dòng)）為 true。小程序中不能直接使用 DOM 控制 WXML 元素。如果需要進(jìn)行數(shù)據(jù)更新，就得使用 WXML提供的數(shù)據(jù)綁定及元素渲染方法。還有一點(diǎn)需要注意的是：小程序的柵格排版系統(tǒng)使用的是 Flex 布局，它是 W3C 在 2009 年提出的一種排版標(biāo)準(zhǔn)。2. 綁定數(shù)

5、據(jù)對(duì)于單個(gè)字段，開(kāi)發(fā)者可以使用數(shù)據(jù)綁定的方法進(jìn)行信息更新。綁定的數(shù)據(jù)除了在加載的時(shí)候可以更新，也可以在 JS 主程序中以函數(shù)形式進(jìn)行更新，更新同樣可以反映到界面上被綁定的數(shù)據(jù)中。3. 條件渲染與列表（循環(huán)）渲染條件渲染適用于有意外情況提示的頁(yè)面（如無(wú)法加載列表或詳情時(shí)，做出提示等等）。它的渲染帶有觸發(fā)條件，即符合條件時(shí)渲染這個(gè)頁(yè)面，否則忽略或渲染另一段代碼。兩個(gè)花括號(hào)所包含的判斷條件中的變量于主程序JS代碼中的data中聲明。若需要在界面中構(gòu)建一個(gè)列表，可以使用 WXML 中的循環(huán)渲染，將同一元素渲染代碼進(jìn)行集合。循環(huán)的數(shù)據(jù)可以通過(guò)數(shù)組的方式寫(xiě)入 data 中供 WXML 訪問(wèn)。渲染完畢后，渲

6、染判斷條件的變動(dòng)可以影響界面變動(dòng)。4. 模板與引用WXML 支持使用模板與引用減少代碼體積。模板是在 WXML 代碼中對(duì)相同的代碼進(jìn)行復(fù)用的方式。可以將多個(gè)模板寫(xiě)入至同一文件，并使用 import 在其他文件中進(jìn)行引用。如果需要整個(gè)頁(yè)面引用，需要使用到 include。5. 樣 式通過(guò) WXSS 樣式表，開(kāi)發(fā)者可以定義 WXML 中的元素樣式。WXSS 與 CSS 代碼一樣，可以直接使用選擇器選擇元素。在 WXML中也可以直接定義元素的id 和 class 以便于在 WXSS 文件中進(jìn)行樣式定義。6. 用戶操作與響應(yīng)對(duì)于需要點(diǎn)擊的元素，應(yīng)該在 WXML 中使用 bindtap屬性或catcht

7、ap屬性進(jìn)行綁定。除了點(diǎn)擊一次，微信也提供按住、開(kāi)始觸摸、松手等響應(yīng)。在 WXML 中綁定好一個(gè)之后，就能在主程序 JS 中使用。其他 API 中也有其他相應(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)絡(luò)訪問(wèn)小程序支持三種請(qǐng)求方式。一種是直接的 HTTP 連接請(qǐng)求，請(qǐng)求后直接返回結(jié)果，連接結(jié)束。另一種是 Socket 持續(xù)性連接，當(dāng)一方主動(dòng)關(guān)閉連接時(shí)，連接結(jié)束。除了以上兩種收發(fā)純文本的連接方式，微信還提供了一個(gè)文件

8、收發(fā)接口。 小程序中錄制的語(yǔ)音以及選擇的照片都需要這個(gè)方式來(lái)進(jìn)行上傳。通過(guò)小程序訪問(wèn)網(wǎng)絡(luò)需要服務(wù)器端必須支持 HTTPS 安全連接，且端必須為 443。同時(shí)，小程序只能訪問(wèn)開(kāi)發(fā)者在登記小程序時(shí)所設(shè)定的服務(wù)器地址。多媒體與存儲(chǔ)若需在小程序中播放多媒體（包括音視頻）或進(jìn)行數(shù)據(jù)存儲(chǔ)，不能使用 HTML 5 中所提供的標(biāo)準(zhǔn)， 必須使用微信提供的小程序多媒體播放控制接口及存儲(chǔ)接口等。關(guān)于聲音的接口，有音頻播放與音樂(lè)播放兩種。音頻播放提供了播放、暫停和停止播放三種接口，不提供跳轉(zhuǎn)至某個(gè)播放時(shí)間點(diǎn)的功能，也不能獲取目前的播放進(jìn)度。音樂(lè)播放接口提供除以上的基礎(chǔ)播放控制外的音樂(lè)狀態(tài)檢查和等功能。小程序提供照片和

9、視頻數(shù)據(jù)交換接口。通過(guò)這個(gè)接口，小程序可以訪問(wèn)用戶選定或拍攝的照片與視頻。通過(guò)音頻錄制和視頻照片接口獲得的多媒體信息是臨時(shí)的，需要通過(guò)小程序存儲(chǔ)文件接口對(duì)文件進(jìn)行永久保存。對(duì)于文本數(shù)據(jù)，小程序也提供了存儲(chǔ)這類數(shù)據(jù)的接口。從諸如 Android 或其他 app 平臺(tái)轉(zhuǎn)向的開(kāi)發(fā)者需要注意的是，小程序不提供數(shù)據(jù)庫(kù)式的本地?cái)?shù)據(jù)保存形式，而是通過(guò) 字段 - 值的一對(duì)一形式進(jìn)行保存。硬件相關(guān)小程序依托于微信，提供許多與硬件有關(guān)的 API。小程序可以通過(guò) API 獲取到以下數(shù)據(jù)： 系統(tǒng)相關(guān)信息（包括網(wǎng)絡(luò)狀態(tài)、設(shè)備型號(hào)、窗口尺寸等） 重力感應(yīng)數(shù)據(jù) 羅盤(pán)數(shù)據(jù)通過(guò)以上 API，應(yīng)該可以輕松寫(xiě)出搖一搖等互動(dòng)性頁(yè)面。

10、但需要注意：這些數(shù)據(jù)只能主動(dòng)獲取，不能通過(guò)這些數(shù)值變化的回調(diào)實(shí)時(shí)獲取。推送服務(wù)小程序提供推送服務(wù)，可以隨時(shí)向用戶發(fā)送必要。 但請(qǐng)注意，推送服務(wù)只能用于提醒，不能用于。在小程序中，推送服務(wù)叫做模板消息（之前有開(kāi)發(fā)過(guò)服務(wù)號(hào)的開(kāi)發(fā)者應(yīng)該比較熟悉）。開(kāi)發(fā)者需要在微信小程序登記新的模板推送消息（比如：購(gòu)買(mǎi)成功等）并審核通過(guò)后，才能在小程序中使用模板消息推送服務(wù)。具體審核標(biāo)準(zhǔn)建議參考相應(yīng)文檔。模板消息審核通過(guò)后，開(kāi)發(fā)者需要先向微信服務(wù)器獲取 Access Token，隨后將該值、模板編號(hào)和模板中的動(dòng)態(tài)變量（比如：訂單號(hào)、價(jià)格等）提交給微信，由微信向用戶推送。用戶信息與微信支付小程序可以在用戶同意的前提下獲取到用戶的信息。首先，小程序要通過(guò)微信登錄的接口，讓用戶授權(quán)登錄。之后，小程序就可以展示并使用用戶信息了。在使用微信登錄的時(shí)候需要注意，消息需要經(jīng)過(guò)簽名確認(rèn)其完整性之后，方能保證數(shù)據(jù)未經(jīng)篡改