寫(xiě)在前面

前后兩天花了大約四五個(gè)小時(shí)制作完了自己第一個(gè)小程序，當(dāng)然是沒(méi)法發(fā)布的，小程序的發(fā)布要求還是挺嚴(yán)格的：企業(yè)資質(zhì)、HTTPS、審核。

先大概介紹下自己，我9年前和很多網(wǎng)友一樣開(kāi)始自學(xué)編程，這些年來(lái)什么語(yǔ)言都學(xué)過(guò)、什么平臺(tái)都接觸過(guò)，自己也做過(guò)十來(lái)個(gè)產(chǎn)品，所以編程基礎(chǔ)不是很穩(wěn)固但是各方面都相對(duì)比較熟悉，因此在接觸小程序的時(shí)候上手比較快。

至于為什么現(xiàn)在選擇開(kāi)發(fā)小程序，原因很簡(jiǎn)單，嘗嘗鮮！

學(xué)習(xí)

雖然很早就聽(tīng)說(shuō)小程序要出來(lái)了，但是在我的潛意識(shí)中，小程序不過(guò)是一個(gè)被微信優(yōu)化、限制、規(guī)范過(guò)的WebApp。

果然下載完開(kāi)發(fā)工具一看，起碼從表面來(lái)看確實(shí)就是一個(gè)“輕量級(jí)、功能非常不強(qiáng)大”的前端框架。典型的JS/CSS/HTML結(jié)構(gòu)，微信非得重新取個(gè)名字也沒(méi)辦法，逼格還是得有的。

然后去看了下官網(wǎng)文檔，真的是吃了一驚，文檔少的可憐，不是說(shuō)不全面，而是確實(shí)微信就提供了這么多原生功能。很多常用的JS組件全都沒(méi)有，看樣子之后很多地方都需要自己實(shí)現(xiàn)。

大概瀏覽了一遍，開(kāi)發(fā)邏輯基本和常規(guī)前端無(wú)異，如果遇到大工程，可以用glup或者grant等工具。

設(shè)計(jì)

用demo寫(xiě)了幾句話之后大概明白了語(yǔ)法規(guī)則，然后就開(kāi)始思考做個(gè)什么。

一時(shí)半會(huì)想不到做什么，就把之前做的一個(gè)跑車(chē)展示軟件拿出來(lái)再做一遍吧。

這是當(dāng)時(shí)在iOS和安卓上做完的效果：

品牌列表

車(chē)型瀏覽

所以整體軟件結(jié)構(gòu)非常簡(jiǎn)單，一個(gè)品牌列表頁(yè)，一個(gè)左右滑動(dòng)的詳情頁(yè)。當(dāng)然由于微信小程序的限制，不能外鏈，不能加iframe視頻，因此圖集、視頻功能取消。

整個(gè)小程序唯一的互動(dòng)就是點(diǎn)贊。點(diǎn)贊數(shù)會(huì)記錄到服務(wù)器統(tǒng)計(jì)，同時(shí)在本地也保存一下，因此不是真正意義上做到用戶(hù)點(diǎn)贊。

為什么？因?yàn)闆](méi)有申請(qǐng)小程序appid，無(wú)法真正獲取用戶(hù)信息。

開(kāi)發(fā)

首頁(yè)列表的開(kāi)發(fā)非常簡(jiǎn)單，思路是：

1.請(qǐng)求服務(wù)器數(shù)據(jù)列表

2.用for標(biāo)簽渲染出每個(gè)item

3.為每個(gè)item添加點(diǎn)擊事件，OK

代碼非常簡(jiǎn)單，一句請(qǐng)求、一句頁(yè)面跳轉(zhuǎn)。

首頁(yè)開(kāi)發(fā)

在頁(yè)面布局上，雖說(shuō)是CSS，但是感覺(jué)還是不如CSS好用，還是遇到了很多未解之謎。尤其在我的設(shè)計(jì)里需要懸浮、百分比設(shè)計(jì)，結(jié)果總是出現(xiàn)莫名的bug，最后不得已固定了像素。

然后就是詳情頁(yè)，好在微信提供了一個(gè)類(lèi)似banner廣告的組建Swiper，功能可以說(shuō)是異常地不強(qiáng)大！

自定義性非常糟糕，萬(wàn)幸地是提供了一個(gè)滑動(dòng)change事件。

再后面就是去寫(xiě)每一個(gè)item的布局，費(fèi)了好大勁，總是發(fā)現(xiàn)微信的image組建底部會(huì)出現(xiàn)空白，無(wú)論改變margin還是padding都沒(méi)用，不得已全部改成view。

詳情頁(yè)

UI全部寫(xiě)完后就要實(shí)現(xiàn)應(yīng)用唯一一個(gè)互動(dòng)功能：點(diǎn)贊。

1.向服務(wù)器發(fā)起請(qǐng)求，點(diǎn)贊+1

2.本地記錄被點(diǎn)贊的汽車(chē)id

3.swiper滑動(dòng)時(shí)刷新是否點(diǎn)贊

在這里遇到了一個(gè)大坑，可能是小弟愚昧，微信竟然沒(méi)有提供元素獲取的方法，沒(méi)有jQuery的seletor，也沒(méi)有HTML原生的getElement，導(dǎo)致我都不知道怎么去獲取按鈕。希望懂的朋友留言交流一下，謝謝。

最后不得已留了兩個(gè)按鈕，一個(gè)點(diǎn)贊，一個(gè)已點(diǎn)贊，根據(jù)狀態(tài)隱藏。

寫(xiě)在結(jié)尾

第一個(gè)功能非常簡(jiǎn)單的小程序就做完了，要說(shuō)有什么用，沒(méi)什么用，自己玩的開(kāi)心就行了。當(dāng)然這也是一個(gè)學(xué)習(xí)的過(guò)程，后面肯定要開(kāi)發(fā)并發(fā)布更多的小程序，也會(huì)去接一些小程序開(kāi)發(fā)外包。

作為一名開(kāi)發(fā)者，微信小程序的開(kāi)發(fā)體驗(yàn)讓我很失望，遠(yuǎn)遠(yuǎn)不如前端。但是作為一名產(chǎn)品，我卻很開(kāi)心，小程序提供了大量機(jī)遇，可以用最簡(jiǎn)單的方式實(shí)現(xiàn)非常多的功能。