微信小程序開發(fā)入門（二）

任亞飛

上期我們了解了微信小程序開發(fā)者工具以及開發(fā)者工具的一些功能，這期我們正式進(jìn)入小程序開發(fā)。首先我們需要了解以下概念，這樣能對(duì)小程序的概況有一個(gè)初步認(rèn)識(shí)。在理解概念后，有些重要的內(nèi)容需要你花更多時(shí)間自學(xué)，我們也給出了文檔地址和學(xué)習(xí)指導(dǎo)。

一、小程序三大標(biāo)簽語言

1.WXML主要用來布局組件的（相當(dāng)于大樓結(jié)構(gòu)），如：樓有幾層、每層有多少房間、有什么設(shè)備。

2.WXSS主要決定顯示樣式（決定大樓的樣式），如：顏色、大小、寬高等。

3.JavaScript（JS）主要用來處理邏輯（決定大樓具備哪些功能），如：大樓具有電梯功能、空調(diào)制冷、燈光、供水、供電，主要是為了大廈的運(yùn)行。

下面用一個(gè)大廈的圖，來說明三者的關(guān)系。

WXML：相當(dāng)于布局大廈以及樓層的功能布局，一樓是商城，二樓是賣家具，三樓是餐飲娛樂。

WXSS：相當(dāng)于裝修大廈外層顏色，室內(nèi)裝修和裝飾等的工具。

JS：相當(dāng)于是讓大廈運(yùn)行起來，比如電梯乘坐功能，餐廳吃飯功能，電影院放電影的功能等。

二、小程序文件和傳統(tǒng)Web對(duì)比

三、小程序常見組件

1.View組件：View組件相當(dāng)于一個(gè)盒子，可以用來裝一些別的組件如果大家有HTML的Web基礎(chǔ)，就可以把我們小程序里的View理解為HTML里的div標(biāo)簽。如果你沒學(xué)過也無所謂，直接看看微信官方開發(fā)者文檔。文檔里有對(duì)組件的功能、屬性等描述以及代碼演示。

文檔地址：https：//developers.weixin.qq.com/miniprogram/dev/component/View.HTML2.text組件：text組件主要用來顯示文字的。

文檔地址：https：//developers.weixin.qq.com/miniprogram/dev/component/text.HTML3.input組件：input組件主要用來獲取用戶輸入的信息的，一般在用戶填寫信息、提交數(shù)據(jù)、登錄注冊(cè)時(shí)會(huì)用到。

文檔地址：https：//developers.weixin.qq.com/miniprogram/dev/component/input.HTML4.button組件：button組件是按鈕組件，自帶默認(rèn)的按鈕效果，我們后面會(huì)經(jīng)常用到。

文檔地址：https：//developers.weixin.qq.com/miniprogram/dev/component/button.HTML

四、函數(shù)和事件的學(xué)習(xí)

1.注釋：在學(xué)習(xí)具體案例課程之前，先來學(xué)習(xí)一下代碼的注釋。注釋是在代碼里給予提示使用的，主要是讓別人更快地熟悉你的代碼，也方便后期自己看自己的代碼，快速回憶起來當(dāng)時(shí)的目的和想法。注釋的快捷鍵：

Window電腦：鍵盤Ctrl鍵+/斜杠Mac電腦：鍵盤command鍵+/斜杠

WXML里的注釋：

這里我們就不難發(fā)現(xiàn)一個(gè)共同點(diǎn)了，每一個(gè)標(biāo)簽語言里面的注釋都有一個(gè)index加一個(gè)標(biāo)簽名字。其實(shí)這里就是告訴我們，index是小程序的一個(gè)頁面，WXML來布局index頁面組件的（index頁面結(jié)構(gòu)布局）；WXSS主要決定顯示index頁面的樣式，如：顏色、大小、寬高等；JS主要用來處理index頁面邏輯（決定index頁面具備哪些功能）。

2.日志打?。何覀?cè)趯W(xué)習(xí)點(diǎn)擊事件之前，需要先學(xué)習(xí)日志（log）的打印，因?yàn)槲覀冮_發(fā)過程中會(huì)經(jīng)常用到日志打印。日志打印的語法如圖：

3.函數(shù)的學(xué)習(xí)

函數(shù)的兩種使用方式如圖：

4.點(diǎn)擊事件的學(xué)習(xí)

我們?nèi)绻虢o一個(gè)WXML里面的組件定義點(diǎn)擊事件，就要用到bindtap，我們給一個(gè)組件綁定點(diǎn)擊事件的語法如圖。

我們給一個(gè)組件定義點(diǎn)擊事件，主要是給組件定義一個(gè)bindtap=“事件名”，然后在JS頁面里定義和事件名一樣的函數(shù)即可。

5.獲取用戶輸入信息

我們獲取用戶輸入會(huì)用到bindinput事件，其實(shí)我們?cè)趯W(xué)習(xí)input組件時(shí)，官方有給出這個(gè)屬性的。https：//developers.weixin.qq.com/miniprogram/dev/component/input.HTML看官方的文檔，可以知道bindinput主要是為了獲取用戶的輸入內(nèi)容。

bindinput的定義如圖。

在WXML里定義好bindinput事件以后，在JS頁面再定義一個(gè)和事件名一樣的函數(shù)即可。

五、變量的學(xué)習(xí)

1.什么是變量

用大白話講，變量就是一個(gè)裝東西的盒子。再通俗些講，變量就是用于存放數(shù)據(jù)的容器，我們通過變量名獲取對(duì)應(yīng)的數(shù)據(jù)。

如圖所示，我們的盒子（變量）可以裝名字、布爾類型的true，還可以用來裝數(shù)字。變量的本質(zhì)就是在程序的內(nèi)存中申請(qǐng)一塊用來存放數(shù)據(jù)的空間。

2.變量的組成

變量由變量名和存儲(chǔ)的值組成，語法如下：

變量有點(diǎn)類似我們的酒店房間。一個(gè)房間就可以看作是一個(gè)變量。例如我們的808號(hào)房間是情侶間。那么808這個(gè)房號(hào)就相當(dāng)于我們的變量名，情侶間就是這個(gè)變量存儲(chǔ)的值。

由于篇幅限制，我們只能對(duì)最重要的概念做簡(jiǎn)單的說明，讓你對(duì)小程序的認(rèn)識(shí)建立起一個(gè)框架。這一期我們了解了小程序三大標(biāo)簽語言：WXML+WXSS+JS，你需要繼續(xù)學(xué)習(xí)小程序常見組件，函數(shù)和事件，點(diǎn)擊事件，變量等概念。遇到問題可以多看看微信開發(fā)者文檔，里面的圖文內(nèi)容講解也非常清楚。