- 耗時(shí)18個(gè)小時(shí)，開發(fā)出來了一個(gè)完整微信小程序。
- 發(fā)布時(shí)間：2021/1/22 來源：郴邦科技 瀏覽：86
想要做一個(gè)小程序？工具人可以幫你一天就完成，我分享一下我歷經(jīng)了18個(gè)小時(shí)做出來了一個(gè)完整的小程序的經(jīng)驗(yàn)，以及我開發(fā)的思路，以及后端代碼給大家展示。
時(shí)代在發(fā)展，社會(huì)在進(jìn)步，市面上的各種工具越是越來越多，我們做程序員的也是可以說也是越來越快活了，可以說是，吃吃燒烤喝喝酒，閑著了就調(diào)試調(diào)試BUG。
那么今天我就來分享分享我前兩天剛開發(fā)的一套完整的同樣也帶后臺(tái)的小程序，完全是從0到有的開發(fā)出來的，也是沒有借助任何的小程序框架
一，成果
從早上的六點(diǎn)到第二天下午時(shí)分提交上架，除去做飯吃飯+拉撒，總共花費(fèi)了18個(gè)小時(shí)。
進(jìn)行了復(fù)盤下來，覺得很有成就感，就分析了出來。
二，工具清單
2.1 準(zhǔn)備階段
思維導(dǎo)圖
小程序：微信公眾號(hào)平臺(tái)
2.2 開發(fā)階段
2.2.1 后臺(tái)
· 版本管理：github
· 后臺(tái)開發(fā)IDE：PHPStorm
· 后臺(tái)框架：PHP + Laravel
· 數(shù)據(jù)庫：MySQL
· 微信后臺(tái)對接（Laravel插件）：EasyWechat
· 圖片存儲(chǔ)（Larave插件）Aliyun-oss-storage
2.2.2 小程序
· 小程序開發(fā)IDE：微信開發(fā)者工具
· 小程序: 官方的文檔，組件，API
· 瀑布流展示（小程序插件）：BrickLayout曉瀑布流
2.2.3 設(shè)計(jì)
· 圖標(biāo)：iconfont
· UI參考：WeUI小程序版
· 編輯與設(shè)計(jì)：Photoshop
2.3 運(yùn)維階段
小程序助手
小程序數(shù)據(jù)助手
小程序客服小助手
三，開發(fā)過程
3.1 從ldea到動(dòng)手
吃夠了漫不經(jīng)意的生活，也是不經(jīng)意的開始對自己以后的人生規(guī)劃動(dòng)動(dòng)手開搞，帶來一些甜頭與苦頭，近年ldea到后面的產(chǎn)品也都是非常謹(jǐn)慎的，就像這次的決定，也是已經(jīng)好久沒有見到過這個(gè)場面了。
其實(shí)我也是不推薦也不建議怎么迅速的做出開發(fā)的產(chǎn)品，當(dāng)然如果具備幾個(gè)因素：
· 項(xiàng)目開發(fā)周期較短，1-3天為宜
· 同樣也具備立竿見影的效果
· 沒有資金了
從ldea到產(chǎn)品，首先需要梳理自己的思路
之前用的思維導(dǎo)圖，近期也是一直用著去年剛出的幕布，后者也更方便，也可以多端可用，也是比較適合國內(nèi)的人群使用習(xí)慣。
思維導(dǎo)圖
當(dāng)時(shí)時(shí)間也是加急，也就只是簡單的畫了畫，當(dāng)然了如果是比較大的項(xiàng)目，那還是需要有著專業(yè)系統(tǒng)的東西與思路，在此我推薦一下processon，往前也是一貫的用著它來完成我的流程圖，最近發(fā)現(xiàn)processon又出了一類的很好用的工具。
3.2著手設(shè)計(jì)
產(chǎn)品的成品，在開發(fā)之前最好也是又原型圖的，否則研發(fā)過程中，會(huì)慢慢的失去方向，被一點(diǎn)帶小事情干擾著，最后就會(huì)導(dǎo)致開發(fā)的最總產(chǎn)品與最初設(shè)想的有著很大的不同。
產(chǎn)品的原型圖工具，上面也是沒有列舉出來，也是因?yàn)轫?xiàng)目太小了，畫原型圖時(shí)間上不太劃算，原型圖設(shè)計(jì)工具我推薦，墨刀和幕布，這樣可以方便給客戶演示時(shí)非常方便。
此次的設(shè)計(jì)，就是在腦子里打出來的原型圖，腦海里打了一個(gè)草稿，又去找了一些同產(chǎn)品同行業(yè)的產(chǎn)品借鑒了一些，這樣一來一個(gè)基本的產(chǎn)品該有的就有了。
當(dāng)然至于上面風(fēng)格啊，那就只能在iconfont和ooopic這樣的設(shè)計(jì)靈感招一些創(chuàng)意出來。
還好iconfont 也是有著一組圖標(biāo)，剛好與心中產(chǎn)品也是比較默契，也就用著這套圖標(biāo)。
到此，框架，圖標(biāo)，logo，靈感，以及原型圖都有了，那么我就要開始擼代碼了
3.3 擼代碼
一個(gè)人搞定開發(fā)，設(shè)計(jì)，原型圖，UI，前后端，推廣，引流，其實(shí)這里面就有些門路了。
每個(gè)人的習(xí)慣各不相同，先做什么后做什么，也都是有方式方法的，當(dāng)然還是以快捷方便為主。
首先搭建了小程序的框架，意思就是蓋房子，先打地基，該有個(gè)東西，該留的地方，都是要先搭建好的，例如Larave的本地的調(diào)試環(huán)境，代碼的倉庫，服務(wù)器，也要有備案的域名，搭建微信小程序的賬號(hào)，業(yè)務(wù)域名的配置等等一些其他的都關(guān)系，這一套流程環(huán)節(jié)都是要在腦海里先過一遍的。
之所以消耗那么多時(shí)間一口氣做完，是因后面在編碼的過程中的一些問題卡殼了，思路也可能會(huì)被擾亂，也會(huì)營銷開發(fā)微信小程序的效率，當(dāng)然很多的事情都是時(shí)間上都是比較長的，例如域名備案，如果慢的話就得卡個(gè)很長時(shí)間，最總小程序也會(huì)停止開發(fā)。
還有第二點(diǎn)是先前在后，這個(gè)意思是說，在開發(fā)微信小程序時(shí)，先設(shè)計(jì)開發(fā)前端的界面和邏輯，再反過來做接口和數(shù)據(jù)等等其他的問題，不行么？行，但是不好。
因?yàn)殡S著快速的迭代開發(fā)小程序的情況之下，前端界面和邏輯都時(shí)沒有經(jīng)過系統(tǒng)式的設(shè)計(jì)和流程，發(fā)生變動(dòng)的話，這就和傳統(tǒng)團(tuán)隊(duì)開發(fā)不太一樣，沒有很全面詳細(xì)的設(shè)計(jì)再到開發(fā)的過程，也更沒有并存的開發(fā)條件，所以因地制宜，采取更適合這種小型作戰(zhàn)的方式方法。
當(dāng)然了，這個(gè)還是建議重點(diǎn)關(guān)注的是具體的功能應(yīng)用式的開發(fā)，而不是完全取消前置界面的設(shè)計(jì)，如果沒有了開發(fā)框架的設(shè)計(jì)，同樣也是不行的，就像房子不能沒有地基一樣的道理。
第三，就是先橫再豎，我們從水平和垂直的這兩個(gè)方式，去進(jìn)行細(xì)致的劃分著功能。
比如某個(gè)項(xiàng)目中有四個(gè)界面，分別是發(fā)現(xiàn)頁面，發(fā)布信息頁，以及單篇展示頁，我在開發(fā)時(shí)，要先把這個(gè)也買你建好，把tad和圖標(biāo)也都是添加了進(jìn)去，界面也都要切好，還是要先感受一下，最終的小程序效果，這種交水平式開發(fā)，還是有很多好處的好處就是，讓你會(huì)對最終的形態(tài)有信心有感知，當(dāng)然如果有什么不舒服的地方，也是可以進(jìn)行調(diào)整把控。
最后是敏捷的支付，或者是脫胎與快速的開發(fā)模式的，大概的意思就是要持續(xù)的跟用戶客戶交付，可用的一些產(chǎn)品，在這里就是客戶就是開發(fā)者自身的。
在一些開發(fā)基礎(chǔ)原則上面，也一定要抓住按鈕大小，合適嗎，適用嗎，美觀等一系列的問題，在進(jìn)行深度的打磨，才能精致。
3.4 運(yùn)營準(zhǔn)備
某個(gè)產(chǎn)品的啟動(dòng)也是非常有講究的，尤其是社交UGC游戲產(chǎn)品，當(dāng)一個(gè)用戶的第一次的使用，如果覺得產(chǎn)品很冷清，同樣也是毫無體驗(yàn)，用戶是很難再體驗(yàn)下去的，所以也要適當(dāng)?shù)摹白骷佟本鸵扔螒蚶锩鏁?huì)有人機(jī)一樣的道理，就是為了提升用戶的體驗(yàn)度。
當(dāng)產(chǎn)品在一定的量級(jí)之后，也要記好把這些“作假”移除掉，比如吃雞的配位機(jī)制，當(dāng)用戶的段位很低時(shí)，系統(tǒng)會(huì)自動(dòng)匹配一些AI人機(jī)，這樣也是鼓勵(lì)玩家去接著玩下去，有體驗(yàn)感。當(dāng)然當(dāng)用戶人數(shù)達(dá)到了一定的數(shù)量量級(jí)后，也要適當(dāng)?shù)慕档?/span>AI機(jī)器人的比率，讓用戶等待的時(shí)間過長也不是一件好事。
四，后記
項(xiàng)目的整個(gè)過程都是我自己一個(gè)人完成的，對于這種小項(xiàng)目尚能如此，當(dāng)然了稍微大一點(diǎn)的項(xiàng)目就需要考慮協(xié)作等問題，以及也要用一系列高效率的工具進(jìn)行開發(fā)和工作的進(jìn)度問題。