微信小程序?qū)W習微信小程序開發(fā)需要學習什么

學習微信小程序開發(fā)需要學習什么？如果你真的想要開發(fā)小程序，就要先學會一套微信特制的“開發(fā)語言”，下面就讓我們簡單梳理一下。

語言與文件

微信小程序來發(fā)與其他平臺開發(fā)的最大差異在于：微信使用的開發(fā)語言和文件很“個性”。小程序所使用的程序文件類型大致分為以下幾種：

• WXML(WeiXin Mark Language， 微信標記語言)
• WXSS(WeiXin Style Sheet，微信樣式表)
• JS(JavaScript， 小游戲的主體)

在語言方面，下程序看似重新定義了一套標準。但實際上，他們與“前端三件套”(HTML、CSS和JavaScript)差不太多。來來來，看一下微信小程序開發(fā)語言和“前端三件套”的異同點。

界面搭建

1、基本邏輯

WXML和WXSS兩種文件是小程序界面元素聲明及樣式描述文件。WXML最大的特點是以視圖(View)的方式串聯(lián)界面元素，并通過程序邏輯(AppService)將信息更新實時傳遞至視圖層。View類似于HTML中的p元素，在構(gòu)建的時候，View可以被多級嵌套，View內(nèi)可以放置任意視覺元素。

需要注意的是，元素一旦超出屏幕之外，用戶就無法看到了，這是與HTML喲較大的不同。小程序喲專門用于滾動的視圖。如果希望界面是一個可以自由滾動的界面(例如列表等)，可以使用scroll-view視圖，在WXSS中將其大小調(diào)整為整個屏幕，并設置scroll-y(上下滾動)或scroll-x(左右滾動)為true，

注意，小程序中不能直接使用DOM控制WXML元素。如果需要進行數(shù)據(jù)更新，就要使用WXML提供的數(shù)據(jù)綁定及元素渲染方法，還有一點，小程序的柵格排版系統(tǒng)使用的是Flex布局，它是W3C在2009年提出的一種排版標準。

2、綁定數(shù)據(jù)

對于單個字段，開發(fā)者可以使用數(shù)據(jù)綁定的方法進行信息更新。綁定的數(shù)據(jù)除了在加載的時候可以更新，也可以在JS主程序中以函數(shù)形式進行更新，更新同樣可以反應到界面上被綁定的數(shù)據(jù)中。

3、條件渲染與列表(循環(huán))渲染

條件渲染適用于有意外情況提示的頁面(如無法加載列表或詳情時，做出提示等等)。它的渲染帶有觸發(fā)條件，即符合條件時渲染這個頁面，否則忽略或渲染另一端代碼。兩個花括號所包含的判斷條件中的變量于主程序JS代碼中的data中聲明。將同一元素渲染代碼進行集合。循環(huán)的數(shù)據(jù)可以通過數(shù)組的方式寫入data中供WXML訪問。渲染完畢后，渲染判斷條件的變動可以影響界面變動。

4、模板與引用

WXML支持使用模板與引用減少代碼體積。模板是在WXML代碼中對相同的代碼進行復用的方式。可以將多個模板寫入至同一個文件，并使用import在其他文件中進行引用。如果需要整個頁面引用，需要使用include。

5、樣式

通過WXSS樣式表，開發(fā)者可以定義WXML中的元素樣式。WXSS與CSS代碼一樣，可以直接使用選擇器選擇元素，在WXML中也可以直接定義元素的id和class以便于在WXSS文件中進行樣式定義。

6、用戶操作與事件響應

由于微信使用的不是HTML，所以也不能通過添加超鏈接(a元素)的方式來檢測用戶的點擊事件。對于需要監(jiān)聽點擊事件的元素，應該在WXML中使用bindtap屬性或catchtap屬性進行綁定。除了點擊一次，微信也提供按住、開始觸摸、松手等事件響應。在WXML中綁定好一個事件之后，就能在主程序中使用。其他的API中也有相應的事件，這些事件樂意在微信小程序的官方文檔中查閱到。當需要在小程序的頁面間進行跳轉(zhuǎn)時，應該使用wx.navigateTo()方式。

注意，有關于頁面層級跳轉(zhuǎn)，微信將層級跳轉(zhuǎn)限制在5層。在開發(fā)時一定注意不要超過了相應限制。

網(wǎng)絡請求方式

網(wǎng)絡訪問小程序支持三種請求方式：HTTP連接、WebSocket、文件收發(fā)連接。

• HTTP連接：請求后直接返回結(jié)果，連接結(jié)束;
• Socket連接：持續(xù)性連接，當一方主動關閉連接時，連接結(jié)束;
• 文件收發(fā)連接：顧名思義，發(fā)生在文件傳輸時的連接。(錄制的語音和選擇的照片都需要這個連接完成)。

注意，通過小程序訪問網(wǎng)絡需要服務器必須支持HTTPS連接，且端口必須為443。同時，小程序只能訪問開發(fā)者在登記小程序時設定的服務器地址。

開發(fā)語言和“前端三件套”的異同點

• HTML與WXML：兩者差異比較大，如果之前沒有接觸過Android開發(fā)，可能會覺得有些頭疼。事實上，WXML更像是Android開發(fā)中的界面XML描述文件，適合于程序界面的構(gòu)建;而HTML則傾向于文章的展示(這與HTML的歷史有關)，以及互聯(lián)網(wǎng)頁面的構(gòu)建。
• WXSS與CSS：兩者在語言上幾乎沒有差別，可以直接通用。
• JS文件：小程序的JS文件與前端開發(fā)使用的JS幾乎沒有區(qū)別，只是小程序的JS新增了微信的一些API接口，并去除了一些不必要的功能(如DOM)。

在有眼上，小程序完全向?qū)W習成本最低的前端開發(fā)看齊，但這不代表所有開發(fā)者都能無縫遷移。如果你是從前端開發(fā)轉(zhuǎn)向小程序，就要注意這兩點：

1、HTML與WXML兩種文件的構(gòu)建思想差異較大，如果之前只接觸過前端開發(fā)，需要一點時間才能適應WXML的編寫方法。

2、雖然小程序使用的是前端語言，但不代表可以繼續(xù)沿用的開發(fā)思想進行開發(fā)。小程序?qū)η岸碎_發(fā)的要求從【構(gòu)建界面】升級成【開發(fā)完整應用】，前端開發(fā)需要在意識上進行轉(zhuǎn)變。

學習微信小程序開發(fā)需要學習什么，包括語言與文件、界面搭建和網(wǎng)絡請求方式等幾個方面，弄清開發(fā)語言和“前端三件套”的異同點等，建議先做足功課，以保證開發(fā)工作順利進行。