微信小程序開(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ǔ)言”。為了更好地上手這門開(kāi)發(fā)語(yǔ)言,下面這三件事你一定要知道:
語(yǔ)言與文件
微信小程序來(lái)發(fā)與其他平臺(tái)開(kāi)發(fā)的最大差異在于:微信使用的開(kāi)發(fā)語(yǔ)言和文件很“個(gè)性”。
小程序所使用的程序文件類型大致分為以下幾種:
- WXML(WeiXin Mark Language,微信標(biāo)記語(yǔ)言)
- WXSS(WeiXin Style Sheet,微信樣式表)
- 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類似于HTML中的div元素,在構(gòu)建的時(shí)候,View可以被多級(jí)嵌套,View內(nèi)可以放置任意視覺(jué)元素。
需要注意的是,元素一旦超出屏幕之外,用戶就無(wú)法看到了,這是與HTML喲較大的不同。小程序喲專門用于滾動(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訪問(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、用戶操作與事件響應(yīng)
由于微信使用的不是HTML,所以也不能通過(guò)添加超鏈接(a元素)的方式來(lái)檢測(cè)用戶的點(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ò)訪問(wèn)小程序支持三種請(qǐng)求方式:HTTP連接、WebSocket、文件收發(fā)連接。
- HTTP連接:請(qǐng)求后直接返回結(jié)果,連接結(jié)束;
- Socket連接:持續(xù)性連接,當(dāng)一方主動(dòng)關(guān)閉連接時(shí),連接結(jié)束;
- 文件收發(fā)連接:顧名思義,發(fā)生在文件傳輸時(shí)的連接。(錄制的語(yǔ)音和選擇的照片都需要這個(gè)連接完成)。
注意,通過(guò)小程序訪問(wèn)網(wǎng)絡(luò)需要服務(wù)器必須支持HTTPS連接,且端口必須為443。同時(shí),小程序只能訪問(wèn)開(kāi)發(fā)者在登記小程序時(shí)設(shè)定的服務(wù)器地址。
開(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)),以及互聯(lián)網(wǎng)頁(yè)面的構(gòu)建。
- WXSS與CSS:兩者在語(yǔ)言上幾乎沒(méi)有差別,可以直接通用。
- 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):
- 1、HTML與WXML兩種文件的構(gòu)建思想差異較大,如果之前只接觸過(guò)前端開(kāi)發(fā),需要一點(diǎn)時(shí)間才能適應(yīng)WXML的編寫(xiě)方法。
- 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)變。