小程序模板網(wǎng)

小燈燈實(shí)戰(zhàn)系列《一》記一次小程序開(kāi)發(fā)過(guò)程

發(fā)布時(shí)間:2017-11-23 17:49 所屬欄目:小程序開(kāi)發(fā)教程

寫(xiě)在前面前后兩天花了大約四五個(gè)小時(shí)制作完了自己第一個(gè)小程序,當(dāng)然是沒(méi)法發(fā)布的,小程序的發(fā)布要求還是挺嚴(yán)格的:企業(yè)資質(zhì)、HTTPS、審核。先大概介紹下自己,我9年前和很多網(wǎng)友一 ...

 
 
 

寫(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)非常多的功能。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/17940.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)