前言

微信之父張小龍?jiān)谀瓿醯哪谴窝葜v中曾表示：“我自己是很多年的程序員嗡呼，我覺(jué)得我們應(yīng)該為開(kāi)發(fā)的團(tuán)隊(duì)做一些事情”华嘹。幾個(gè)月后场仲，微信正式推出微信應(yīng)用號(hào)（即微信小程序），在互聯(lián)網(wǎng)中掀起了又一波熱潮仁热。于是榜揖，很多人準(zhǔn)備要開(kāi)發(fā)微信的小程序，如果你真的想要開(kāi)發(fā)小程序抗蠢，就要先學(xué)會(huì)一套微信特制的“開(kāi)發(fā)語(yǔ)言”举哟。為了更好地上手這門(mén)開(kāi)發(fā)語(yǔ)言，下面這三件事你一定要知道：

語(yǔ)言與文件

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

[if !supportLists]·[endif]WXML（WeiXin Mark Language妨猩，微信標(biāo)記語(yǔ)言）

[if !supportLists]·[endif]WXSS（WeiXin Style Sheet，微信樣式表）

[if !supportLists]·[endif]JS（JavaScript秽褒，小游戲的主體）

在語(yǔ)言方面册赛，下程序看似重新定義了一套標(biāo)準(zhǔn)。但實(shí)際上震嫉，他們與“前端三件套”（HTML、CSS和JavaScript）差不太多牡属。來(lái)來(lái)來(lái)票堵，看一下微信小程序開(kāi)發(fā)語(yǔ)言和“前端三件套”的異同點(diǎn)。

界面搭建

1逮栅、基本邏輯

WXML和WXSS兩種文件是小程序界面元素聲明及樣式描述文件悴势。

WXML最大的特點(diǎn)是以視圖（View）的方式串聯(lián)界面元素，并通過(guò)程序邏輯（AppService）將信息更新實(shí)時(shí)傳遞至視圖層措伐。

View類(lèi)似于HTML中的div元素特纤，在構(gòu)建的時(shí)候，View可以被多級(jí)嵌套侥加，View內(nèi)可以放置任意視覺(jué)元素捧存。

需要注意的是，元素一旦超出屏幕之外担败，用戶(hù)就無(wú)法看到了昔穴，這是與HTML喲較大的不同。小程序喲專(zhuān)門(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ù)據(jù)

對(duì)于單個(gè)字段崭放，開(kāi)發(fā)者可以使用數(shù)據(jù)綁定的方法進(jìn)行信息更新哨苛。綁定的數(shù)據(jù)除了在加載的時(shí)候可以更新，也可以在JS主程序中以函數(shù)形式進(jìn)行更新币砂，更新同樣可以反應(yīng)到界面上被綁定的數(shù)據(jù)中建峭。

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

條件渲染適用于有意外情況提示的頁(yè)面（如無(wú)法加載列表或詳情時(shí)决摧，做出提示等等）亿蒸。它的渲染帶有觸發(fā)條件，即符合條件時(shí)渲染這個(gè)頁(yè)面掌桩，否則忽略或渲染另一端代碼边锁。兩個(gè)花括號(hào)所包含的判斷條件中的變量于主程序JS代碼中的data中聲明。將同一元素渲染代碼進(jìn)行集合波岛。循環(huán)的數(shù)據(jù)可以通過(guò)數(shù)組的方式寫(xiě)入data中供WXML訪(fǎng)問(wèn)茅坛。渲染完畢后，渲染判斷條件的變動(dòng)可以影響界面變動(dòng)则拷。

4贡蓖、模板與引用

WXML支持使用模板與引用減少代碼體積。模板是在WXML代碼中對(duì)相同的代碼進(jìn)行復(fù)用的方式煌茬〕馄蹋可以將多個(gè)模板寫(xiě)入至同一個(gè)文件，并使用import在其他文件中進(jìn)行引用坛善。如果需要整個(gè)頁(yè)面引用晾蜘，需要使用include。

5浑吟、樣式

通過(guò)WXSS樣式表笙纤，開(kāi)發(fā)者可以定義WXML中的元素樣式。WXSS與CSS代碼一樣组力，可以直接使用選擇器選擇元素省容，在WXML中也可以直接定義元素的id和class以便于在WXSS文件中進(jìn)行樣式定義。

6燎字、用戶(hù)操作與事件響應(yīng)

由于微信使用的不是HTML腥椒，所以也不能通過(guò)添加超鏈接（a元素）的方式來(lái)檢測(cè)用戶(hù)的點(diǎn)擊事件阿宅。對(duì)于需要監(jiān)聽(tīng)點(diǎn)擊事件的元素，應(yīng)該在WXML中使用bindtap屬性或catchtap屬性進(jìn)行綁定笼蛛。除了點(diǎn)擊一次洒放，微信也提供按住、開(kāi)始觸摸滨砍、松手等事件響應(yīng)往湿。在WXML中綁定好一個(gè)事件之后，就能在主程序中使用惋戏。其他的API中也有相應(yīng)的事件领追，這些事件樂(lè)意在微信小程序的官方文檔中查閱到。當(dāng)需要在小程序的頁(yè)面間進(jìn)行跳轉(zhuǎn)時(shí)响逢，應(yīng)該使用wx.navigateTo()方式绒窑。注意，有關(guān)于頁(yè)面層級(jí)跳轉(zhuǎn)舔亭，微信將層級(jí)跳轉(zhuǎn)限制在5層些膨。在開(kāi)發(fā)時(shí)一定注意不要超過(guò)了相應(yīng)限制。

網(wǎng)絡(luò)請(qǐng)求方式

網(wǎng)絡(luò)訪(fǎng)問(wèn)小程序支持三種請(qǐng)求方式：HTTP連接钦铺、WebSocket订雾、文件收發(fā)連接。

[if !supportLists]·[endif]HTTP連接：請(qǐng)求后直接返回結(jié)果矛洞，連接結(jié)束葬燎；

[if !supportLists]·[endif]Socket連接：持續(xù)性連接，當(dāng)一方主動(dòng)關(guān)閉連接時(shí)缚甩，連接結(jié)束；

[if !supportLists]·[endif]文件收發(fā)連接：顧名思義窑邦，發(fā)生在文件傳輸時(shí)的連接擅威。（錄制的語(yǔ)音和選擇的照片都需要這個(gè)連接完成）。

注意冈钦，通過(guò)小程序訪(fǎng)問(wèn)網(wǎng)絡(luò)需要服務(wù)器必須支持HTTPS連接郊丛，且端口必須為443。同時(shí)瞧筛，小程序只能訪(fǎng)問(wèn)開(kāi)發(fā)者在登記小程序時(shí)設(shè)定的服務(wù)器地址厉熟。

開(kāi)發(fā)語(yǔ)言和“前端三件套”的異同點(diǎn)

[if !supportLists]·[endif]HTML與WXML：兩者差異比較大，如果之前沒(méi)有接觸過(guò)Android開(kāi)發(fā)较幌，可能會(huì)覺(jué)得有些頭疼揍瑟。事實(shí)上，WXML更像是Android開(kāi)發(fā)中的界面XML描述文件乍炉，適合于程序界面的構(gòu)建绢片；而HTML則傾向于文章的展示（這與HTML的歷史有關(guān)）滤馍，以及互聯(lián)網(wǎng)頁(yè)面的構(gòu)建。

[if !supportLists]·[endif]WXSS與CSS：兩者在語(yǔ)言上幾乎沒(méi)有差別底循，可以直接通用巢株。

[if !supportLists]·[endif]JS文件：小程序的JS文件與前端開(kāi)發(fā)使用的JS幾乎沒(méi)有區(qū)別，只是小程序的JS新增了微信的一些API接口熙涤，并去除了一些不必要的功能（如DOM）阁苞。

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

[if !supportLists]·[endif]1茸歧、HTML與WXML兩種文件的構(gòu)建思想差異較大倦炒，如果之前只接觸過(guò)前端開(kāi)發(fā)，需要一點(diǎn)時(shí)間才能適應(yīng)WXML的編寫(xiě)方法软瞎。

[if !supportLists]·[endif]2逢唤、雖然小程序使用的是前端語(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)變。微信小程序：開(kāi)發(fā)之前要知道的三件事

前言

微信之父張小龍?jiān)谀瓿醯哪谴窝葜v中曾表示：“我自己是很多年的程序員只锭，我覺(jué)得我們應(yīng)該為開(kāi)發(fā)的團(tuán)隊(duì)做一些事情”著恩。幾個(gè)月后，微信正式推出微信應(yīng)用號(hào)（即微信小程序）蜻展，在互聯(lián)網(wǎng)中掀起了又一波熱潮喉誊。于是，很多人準(zhǔn)備要開(kāi)發(fā)微信的小程序纵顾，如果你真的想要開(kāi)發(fā)小程序伍茄，就要先學(xué)會(huì)一套微信特制的“開(kāi)發(fā)語(yǔ)言”。為了更好地上手這門(mén)開(kāi)發(fā)語(yǔ)言施逾，下面這三件事你一定要知道：

語(yǔ)言與文件

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

[if !supportLists]·[endif]WXML（WeiXin Mark Language，微信標(biāo)記語(yǔ)言）

[if !supportLists]·[endif]WXSS（WeiXin Style Sheet汉额，微信樣式表）

[if !supportLists]·[endif]JS（JavaScript曹仗，小游戲的主體）

在語(yǔ)言方面，下程序看似重新定義了一套標(biāo)準(zhǔn)蠕搜。但實(shí)際上怎茫，他們與“前端三件套”（HTML、CSS和JavaScript）差不太多妓灌。來(lái)來(lái)來(lái)遭居，看一下微信小程序開(kāi)發(fā)語(yǔ)言和“前端三件套”的異同點(diǎn)啼器。

界面搭建

1、基本邏輯

WXML和WXSS兩種文件是小程序界面元素聲明及樣式描述文件俱萍。

WXML最大的特點(diǎn)是以視圖（View）的方式串聯(lián)界面元素端壳，并通過(guò)程序邏輯（AppService）將信息更新實(shí)時(shí)傳遞至視圖層。

View類(lèi)似于HTML中的div元素枪蘑，在構(gòu)建的時(shí)候损谦，View可以被多級(jí)嵌套，View內(nèi)可以放置任意視覺(jué)元素岳颇。

需要注意的是照捡，元素一旦超出屏幕之外，用戶(hù)就無(wú)法看到了话侧，這是與HTML喲較大的不同栗精。小程序喲專(zhuān)門(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ù)據(jù)

對(duì)于單個(gè)字段倔撞，開(kāi)發(fā)者可以使用數(shù)據(jù)綁定的方法進(jìn)行信息更新粤策。綁定的數(shù)據(jù)除了在加載的時(shí)候可以更新，也可以在JS主程序中以函數(shù)形式進(jìn)行更新误窖，更新同樣可以反應(yīng)到界面上被綁定的數(shù)據(jù)中。

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

條件渲染適用于有意外情況提示的頁(yè)面（如無(wú)法加載列表或詳情時(shí)霹俺，做出提示等等）。它的渲染帶有觸發(fā)條件毒费，即符合條件時(shí)渲染這個(gè)頁(yè)面丙唧，否則忽略或渲染另一端代碼。兩個(gè)花括號(hào)所包含的判斷條件中的變量于主程序JS代碼中的data中聲明觅玻。將同一元素渲染代碼進(jìn)行集合想际。循環(huán)的數(shù)據(jù)可以通過(guò)數(shù)組的方式寫(xiě)入data中供WXML訪(fǎng)問(wèn)培漏。渲染完畢后，渲染判斷條件的變動(dòng)可以影響界面變動(dòng)胡本。

4牌柄、模板與引用

WXML支持使用模板與引用減少代碼體積。模板是在WXML代碼中對(duì)相同的代碼進(jìn)行復(fù)用的方式侧甫∩河叮可以將多個(gè)模板寫(xiě)入至同一個(gè)文件，并使用import在其他文件中進(jìn)行引用披粟。如果需要整個(gè)頁(yè)面引用咒锻，需要使用include。

5守屉、樣式

通過(guò)WXSS樣式表惑艇，開(kāi)發(fā)者可以定義WXML中的元素樣式。WXSS與CSS代碼一樣拇泛，可以直接使用選擇器選擇元素滨巴，在WXML中也可以直接定義元素的id和class以便于在WXSS文件中進(jìn)行樣式定義。

6碰镜、用戶(hù)操作與事件響應(yīng)

由于微信使用的不是HTML兢卵，所以也不能通過(guò)添加超鏈接（a元素）的方式來(lái)檢測(cè)用戶(hù)的點(diǎn)擊事件。對(duì)于需要監(jiān)聽(tīng)點(diǎn)擊事件的元素绪颖，應(yīng)該在WXML中使用bindtap屬性或catchtap屬性進(jìn)行綁定秽荤。除了點(diǎn)擊一次，微信也提供按住柠横、開(kāi)始觸摸窃款、松手等事件響應(yīng)。在WXML中綁定好一個(gè)事件之后牍氛，就能在主程序中使用晨继。其他的API中也有相應(yīng)的事件，這些事件樂(lè)意在微信小程序的官方文檔中查閱到搬俊。當(dāng)需要在小程序的頁(yè)面間進(jìn)行跳轉(zhuǎn)時(shí)紊扬，應(yīng)該使用wx.navigateTo()方式。注意唉擂，有關(guān)于頁(yè)面層級(jí)跳轉(zhuǎn)餐屎，微信將層級(jí)跳轉(zhuǎn)限制在5層。在開(kāi)發(fā)時(shí)一定注意不要超過(guò)了相應(yīng)限制玩祟。

網(wǎng)絡(luò)請(qǐng)求方式

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

[if !supportLists]·[endif]HTTP連接：請(qǐng)求后直接返回結(jié)果藏鹊，連接結(jié)束润讥；

[if !supportLists]·[endif]Socket連接：持續(xù)性連接，當(dāng)一方主動(dòng)關(guān)閉連接時(shí)盘寡，連接結(jié)束楚殿；

[if !supportLists]·[endif]文件收發(fā)連接：顧名思義，發(fā)生在文件傳輸時(shí)的連接宴抚。（錄制的語(yǔ)音和選擇的照片都需要這個(gè)連接完成）勒魔。

注意，通過(guò)小程序訪(fǎng)問(wèn)網(wǎng)絡(luò)需要服務(wù)器必須支持HTTPS連接菇曲，且端口必須為443冠绢。同時(shí)，小程序只能訪(fǎng)問(wèn)開(kāi)發(fā)者在登記小程序時(shí)設(shè)定的服務(wù)器地址常潮。

開(kāi)發(fā)語(yǔ)言和“前端三件套”的異同點(diǎn)

[if !supportLists]·[endif]HTML與WXML：兩者差異比較大弟胀，如果之前沒(méi)有接觸過(guò)Android開(kāi)發(fā)，可能會(huì)覺(jué)得有些頭疼喊式。事實(shí)上孵户，WXML更像是Android開(kāi)發(fā)中的界面XML描述文件，適合于程序界面的構(gòu)建岔留；而HTML則傾向于文章的展示（這與HTML的歷史有關(guān)）夏哭，以及互聯(lián)網(wǎng)頁(yè)面的構(gòu)建。

[if !supportLists]·[endif]WXSS與CSS：兩者在語(yǔ)言上幾乎沒(méi)有差別献联，可以直接通用竖配。

[if !supportLists]·[endif]JS文件：小程序的JS文件與前端開(kāi)發(fā)使用的JS幾乎沒(méi)有區(qū)別，只是小程序的JS新增了微信的一些API接口里逆，并去除了一些不必要的功能（如DOM）进胯。

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

[if !supportLists]·[endif]1诸衔、HTML與WXML兩種文件的構(gòu)建思想差異較大盯漂，如果之前只接觸過(guò)前端開(kāi)發(fā)，需要一點(diǎn)時(shí)間才能適應(yīng)WXML的編寫(xiě)方法笨农。

[if !supportLists]·[endif]2就缆、雖然小程序使用的是前端語(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)變。