近日，微信推出的小程序橫空出世，一下引起軒然大波，吃瓜群眾紛紛圍觀。
在這個(gè)技術(shù)快速更新，牛人輩出的大環(huán)境下。作為一名前端愛(ài)好者，對(duì)于這種剛出爐的東西也是充滿好奇。
以前出現(xiàn)了什么新的框架或者新的好玩的東西，都是等到那些身先士卒的勇士搞明白了，然后看他們的教程或心得來(lái)決定是否入手。
但這次，初生牛犢也想探探這個(gè)小程序的虛實(shí)。
1.內(nèi)測(cè)
此次微信小程序還屬于內(nèi)測(cè)版本，所以，沒(méi)有收到內(nèi)測(cè)邀請(qǐng)的開發(fā)者賬戶是不能將小程序上傳到微信上去的。但是這都不是什么大事，我們?nèi)绻幸粋€(gè)微信公眾號(hào)，我們就能開發(fā)，只是我們只能本地預(yù)覽，不能上線而已。進(jìn)入微信公眾號(hào)，打開開發(fā)者文檔即可看到關(guān)于小程序的開發(fā)說(shuō)明并獲取開發(fā)工具。然后就可以開發(fā)了。在微信公眾號(hào)剛推出的時(shí)候，我就有注冊(cè)過(guò)一個(gè)微信公眾號(hào)，但后面就沒(méi)管了。沒(méi)想到在這個(gè)時(shí)候幫了大忙了。
2.框架
小程序整體目錄結(jié)構(gòu)分為兩個(gè)層次，邏輯層，視圖層。顧名思義，邏輯層就是數(shù)據(jù)處理部分，視圖層是數(shù)據(jù)展現(xiàn)部分。視圖層采用的是.wxml和.wxss文件來(lái)渲染。根據(jù)后綴名就能猜到，這兩種文件就是和傳統(tǒng)web開發(fā)里面的html文件和css文件是一個(gè)機(jī)制。只是，微信的小程序他采用的是自己的引擎和內(nèi)核，因此他定義了自己的文件格式，但.wxss文件和.css文件語(yǔ)法是一樣的，都是樣式文件，里面的屬性也就是css屬性。只是.wxml文件和html文件有一些小區(qū)別，微信定義了一套自己的標(biāo)簽和標(biāo)簽屬性，但這一套標(biāo)簽太簡(jiǎn)單了，只有幾個(gè)標(biāo)簽，要想實(shí)現(xiàn)自己預(yù)想的效果，還是要靠編寫樣式去美化。在邏輯層，有.js和.json文件。.js文件就是用來(lái)數(shù)據(jù)處理的文件，和傳統(tǒng)的web開發(fā)中的js并無(wú)差別。.json是配置文件，用來(lái)配置當(dāng)前頁(yè)。值得注意的一點(diǎn)是，在開發(fā)中，我們每一個(gè)頁(yè)面都要對(duì)應(yīng)四個(gè)名字相同但后綴為.wxml、.wxss、.js、.json文件。例如我們要有一個(gè)首頁(yè)index，我們就應(yīng)該建一個(gè)index文件夾，并且index文件夾里面要存在index.wxml、index.wxss、index.js、index.json文件。當(dāng)程序運(yùn)行的時(shí)候，在開發(fā)者工具中，我們查看程序資源，我們就會(huì)發(fā)現(xiàn)，這些文件都被合并成了一個(gè)js文件。至于.js文件中的配置機(jī)制，就要查看文檔了。小程序除了我們自己定義的文件，還有三個(gè)全局定義文件是必不可少的。分別為app.js、app.json、app.wxss這是用來(lái)進(jìn)行全局配置的文件。具體配置，請(qǐng)看文檔。
3.特性
小程序有借鑒很多當(dāng)下前端優(yōu)秀框架的特性，像angular的雙向數(shù)據(jù)綁定、react的組件化等，如果有接觸過(guò)當(dāng)下十分火熱的一些框架，在開發(fā)的過(guò)程中，你會(huì)覺(jué)得這些語(yǔ)法很熟悉，因此上手會(huì)很快。
3.1數(shù)據(jù)雙向綁定
WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data。其語(yǔ)法和angularjs中的雙向綁定是一樣的。
/**index.wxml*/
<view> {{ ahdms }} </view>
/**index.js*/
Page({
data: {
ahdms: 'Hello MINA!'
}
})
3.2條件渲染
用 wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
3.3列表渲染
在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item.
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
items: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
由于篇幅原因，更多特性不再贅述。
4.總的來(lái)說(shuō)
經(jīng)過(guò)編寫一些測(cè)試demo，幾天下來(lái)。給我的感覺(jué)就是，這個(gè)微信小程序感覺(jué)就是一個(gè)應(yīng)用在微信端的angularjs框架、或者說(shuō)更像是一個(gè)react框架。如果有接觸過(guò)angular、react
或者是vue等，會(huì)上手的特別快。小程序的數(shù)據(jù)雙向綁定，頁(yè)面的渲染機(jī)制，自定義模板，mv*的結(jié)構(gòu)，模塊化。這些特性都很符合現(xiàn)在的前端潮流。我想這也是為什么小程序一公布
就在前端圈引起軒然大波的原因之一吧。但是，這個(gè)小程序畢竟還只是一個(gè)內(nèi)測(cè)版本，還是有幾處不足的。例如，標(biāo)簽不足，連<textarea></textarea>這樣的標(biāo)簽都沒(méi)有滿足。
由于小程序的底層是通過(guò)js去調(diào)用微信的原生接口的，所以很多細(xì)節(jié)的可自定義性不強(qiáng)。微信開發(fā)者工具很爛等。關(guān)于這些意見，我有發(fā)郵件給微信的聯(lián)系郵箱，得到的回復(fù)是
正在開發(fā)規(guī)劃，逐步滿足。雖然，這個(gè)小程序還不是很成熟，但是可以預(yù)見，這個(gè)對(duì)微信端網(wǎng)頁(yè)開發(fā)的前端工程師來(lái)說(shuō)，是一個(gè)福音。以前有很多的公司有將自己的app專門再做一套
微信網(wǎng)頁(yè)版，放到微信公眾號(hào)里面來(lái)獲取微信端的市場(chǎng)。但當(dāng)這個(gè)小程序真正穩(wěn)定的發(fā)布之后，我想native app開發(fā)者或許是會(huì)有點(diǎn)壓力的。
總的來(lái)說(shuō)，微信小程序還是很有意思的，開發(fā)速度也很快，可以預(yù)見，當(dāng)真正的穩(wěn)定版發(fā)布的時(shí)候，我想如果在個(gè)人簡(jiǎn)歷上加上一條，會(huì)微信小程序開發(fā)，估計(jì)會(huì)更有優(yōu)勢(shì)。
附上幾張測(cè)試demo效果圖吧
附上幾張測(cè)試demo效果圖吧
