前言：

        微信小程序最近要發(fā)布了，抽空學(xué)習(xí)下如何開發(fā)，在網(wǎng)上找到的實例，覺得不錯，給大家分享，

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

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

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

學(xué)習(xí)

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

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

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

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

設(shè)計

用demo寫了幾句話之后大概明白了語法規(guī)則，然后就開始思考做個什么。

一時半會想不到做什么，就把之前做的一個跑車展示軟件拿出來再做一遍吧。

這是當時在iOS和安卓上做完的效果：

品牌列表

車型瀏覽

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

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

為什么？因為沒有申請小程序appid，無法真正獲取用戶信息。

開發(fā)

首頁列表的開發(fā)非常簡單，思路是：

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

2.用for標簽渲染出每個item

3.為每個item添加點擊事件，OK

代碼非常簡單，一句請求、一句頁面跳轉(zhuǎn)。

首頁開發(fā)

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

然后就是詳情頁，好在微信提供了一個類似banner廣告的組建Swiper，功能可以說是異常地不強大！

自定義性非常糟糕，萬幸地是提供了一個滑動change事件。

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

詳情頁

UI全部寫完后就要實現(xiàn)應(yīng)用唯一一個互動功能：點贊。

1.向服務(wù)器發(fā)起請求，點贊+1

2.本地記錄被點贊的汽車id

3.swiper滑動時刷新是否點贊

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

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

寫在結(jié)尾

第一個功能非常簡單的小程序就做完了，要說有什么用，沒什么用，自己玩的開心就行了。當然這也是一個學(xué)習(xí)的過程，后面肯定要開發(fā)并發(fā)布更多的小程序，也會去接一些小程序開發(fā)外包。

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

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

最新評論