0 起因

隨著各種工具/輪子越來越多遭垛，做程序員可以說是越來越瀟灑冰悠，真真的吃著火鍋唱著歌姓惑，閑了調(diào)調(diào)BUG褐奴。

今天要分享的是一套完整的帶后臺的小程序，完全從0開始于毙，沒有借助微擎等小程序生成框架敦冬。

1 成果

從第一天早上10點的Idea到第二天凌晨6點提交上架，除去做飯+吃喝拉撒唯沮，總共花費約16個小時脖旱。

復(fù)盤下來，覺得整個過程頗有代表性介蛉，故分享出來萌庆，供諸位拍磚。

（兜兜轉(zhuǎn)轉(zhuǎn)币旧，幾經(jīng)波折踊兜，10天之前寫的文章，今晚終于得以上線佳恬。原來是截圖捏境，現(xiàn)在終于可以直接貼小程序了，更為直觀）

一文一圖

PS：最近又花了兩天時間毁葱，做了另外一個小程序【拍照閱讀】垫言，是拍照文字自動識別自動朗讀的，用了小程序的云開發(fā)倾剿，代碼量不大筷频，正準(zhǔn)備開源。小程序碼亮一下前痘，各位給把把脈~

拍照閱讀

2 工具清單

2.1 準(zhǔn)備階段

• 思維導(dǎo)圖：幕布
• 小程序申請：微信公眾平臺

2.2 開發(fā)階段

2.2.1 后臺]

• 版本管理：碼云
• 后臺開發(fā)IDE：PHPStorm
• 后臺框架：PHP + Laravel
• 數(shù)據(jù)庫：MySQL
• 微信后臺對接（Laravel插件）：EasyWechat
• 圖片存儲（Laravel插件）：Aliyun-oss-storage

2.2.2 小程序

• 小程序開發(fā)IDE：微信開發(fā)者工具
• 小程序：官方的文檔凛捏、組件、API
• 瀑布流展示（小程序插件）：BrickLayout曉瀑布流

2.2.3 設(shè)計

• 圖標(biāo)：iconfont
• UI參考：WeUI小程序版
• 編輯：Photoshop

2.3 運維階段

• 小程序助手
• 小程序數(shù)據(jù)助手
• 小程序客服小助手

3 開發(fā)過程

3.1 從Idea到動手

吃夠了不經(jīng)調(diào)研的動手開搞帶來的苦頭芹缔，近幾年對于Idea到產(chǎn)品是頗為謹(jǐn)慎的坯癣。像這次干凈利索的決定，顯然已經(jīng)是好久不見最欠。

其實我是不推薦這么迅速的作出開發(fā)新項目的決定的示罗，除非具備幾個因素：1惩猫、項目開發(fā)周期短，1-3天為宜蚜点；2轧房、具備立竿見影的效果；3绍绘、沒錢了奶镶。

從Idea到產(chǎn)品，首先需要梳理思路陪拘。之前用的xmind厂镇，最近一直用新出的幕布，后者更方便分享藻丢，多端可用剪撬，比較適合國內(nèi)的使用習(xí)慣。

思維導(dǎo)圖

3.2 著手設(shè)計

產(chǎn)品最終的形態(tài)，在開發(fā)之處最好是要有原型的旦委，否則開發(fā)過程中奇徒，會逐步失去方向，被瑣碎的事情干擾缨硝，以致最終開發(fā)出的產(chǎn)品和最初的設(shè)想有很大出入摩钙。

產(chǎn)品原型的工具，在上面沒有列出來查辩，是因為項目太小胖笛，畫原型圖在時間上劃不來。原型圖的工具推薦下 墨刀宜岛，和幕布一樣长踊，也是可以在線分享演示的，這在團隊協(xié)作和給客戶演示時非常方便萍倡。

這次的設(shè)計身弊，就是完全在腦子里打了個草稿，又去找了找同類型的產(chǎn)品取了點經(jīng)，一個大概的產(chǎn)品模型就有了佑刷。

至于風(fēng)格什么樣莉擒，那就只能靠天吃飯了酿炸。因為這么短的時間瘫絮，不可能去動用設(shè)計的兄弟，所以就在 iconfont 和 ooopic 一類的設(shè)計網(wǎng)站上找靈感填硕。好在iconfont上剛好有一組圖標(biāo)麦萤，與心目中的產(chǎn)品比較契合，果斷下載扁眯。

至此壮莹，logo、圖標(biāo)姻檀、框架等都齊了命满，開始最激動的擼代碼階段。

3.3 擼代碼

一個人搞定前后端绣版，這里面就有些門道了胶台。
先干啥后干啥，每個人的喜好不同杂抽。以效率為出發(fā)點诈唬，我有如下建議：首搭框架，先前再后缩麸，先橫再豎铸磅，敏捷交付。

【首搭框架】杭朱，是指先把前后端的基礎(chǔ)框架搭建起來阅仔，該配的基礎(chǔ)功能先做好。比如Laravel的本地調(diào)試環(huán)境弧械、代碼倉庫八酒、云端服務(wù)器、備案過的域名梦谜、小程序的賬號丘跌、業(yè)務(wù)域名配置等等，這些環(huán)節(jié)先在腦子里過一遍唁桩，再從頭到尾整個做完闭树。

之所以一鼓作氣全部做完，是因為在后面編碼的過程中荒澡，一旦被上面一些小問題卡住报辱，思路就容易被打亂，影響效率单山。并且碍现，很多事情是需要較長的時間的幅疼，比如域名備案，慢的話就得一二十天昼接，如果被域名卡住爽篷，項目流產(chǎn)的可能性就會直線攀升。

第二是【先前再后】慢睡。這個意思則是在開發(fā)某個功能時逐工，先設(shè)計前端界面和邏輯漂辐，再做后端接口和數(shù)據(jù)髓涯。反過來不行么？行，但是不好。在這種快速迭代開發(fā)的情況下膳犹，前端頁面和邏輯沒有經(jīng)過系統(tǒng)的設(shè)計，會經(jīng)常發(fā)生變動。這和傳統(tǒng)團隊開發(fā)不太一樣，沒有概要設(shè)計到詳細(xì)設(shè)計再到開發(fā)的過程，更沒有并行開發(fā)的條件沐寺，因此要因地制宜卜朗，采取更適合這種小型作戰(zhàn)的方式方法懈涛。

當(dāng)然埋心，這個建議重點關(guān)注的是具體的功能開發(fā)闲坎，而不是完全取消前置設(shè)計。如果沒有整體的框架設(shè)計茬斧，是萬萬不行的腰懂。

第三是【先橫再豎】。我們從水平和垂直兩個方向项秉，去劃分具體的功能绣溜。比如這個項目中有四個頁面，分別是發(fā)現(xiàn)頁娄蔼、發(fā)布頁怖喻、個人主頁、以及單篇展示頁岁诉。我在開發(fā)時锚沸，先把四個頁面建好，把tab和圖標(biāo)都加進去唉侄，頁面切換做好咒吐，先感受下最終的效果。這種方式叫水平開發(fā)，好處在于讓你會對產(chǎn)品的最終形態(tài)先有所感知恬叹，如果有不舒服的地方候生，及時地進行調(diào)整。

當(dāng)我們對某個頁面绽昼，或者某個跨頁面的功能進行開發(fā)時唯鸭，則稱之為垂直開發(fā)。此時的功能顆粒度就會相對較小硅确，也更容易把控目溉。

最后是【敏捷交付】，是脫胎于敏捷開發(fā)模式的菱农。意思是要持續(xù)的向客戶交付可用的產(chǎn)品缭付，這里的客戶就是開發(fā)者自身。在前幾個原則的基礎(chǔ)上循未，要實現(xiàn)敏捷交付陷猫，還應(yīng)該注意不要被細(xì)枝末節(jié)的點牽絆住。比如某個圖標(biāo)的配色不好的妖，某個按鈕的位置擺的不正等等绣檬。切記，一定要抓大放小嫂粟，美化完善的工作一定放在最最后娇未。再者，一款產(chǎn)品就是要在不斷的打磨下星虹，才能奔著精品而去零抬。

3.4 運營準(zhǔn)備

一個產(chǎn)品的啟動是很有講究的，尤其是社交和UGC產(chǎn)品搁凸。當(dāng)一個用戶初次使用時媚值，如果覺得你這個產(chǎn)品冷冷清清毫無生氣，是很難沉下心來去體驗的护糖。所以褥芒，適當(dāng)?shù)摹白骷佟笔翘岣哂脩趔w驗的增長黑客手段。

在產(chǎn)品達到一定量級后嫡良，一定記得把這些措施去除锰扶。比如王者榮耀的排位匹配，當(dāng)你的等級很低時寝受，會匹配一些AI機器人陪玩坷牛，以鼓勵玩家。

當(dāng)?shù)竭_人數(shù)比較多的等級階段時很澄，就會降低AI機器人的比率京闰，因為讓用戶等待時間過久颜及，是一件體驗非常不好的事。同樣的蹂楣，在我們這個產(chǎn)品中俏站，用戶發(fā)出去的文章，在達到一定時間內(nèi)痊土，應(yīng)當(dāng)引入一定的激勵機制肄扎，以鼓勵用戶。當(dāng)用戶較多時赁酝，真實的互動足夠激勵用戶再創(chuàng)作時犯祠，則可取消激勵機制，徹底度過項目的冷啟動階段酌呆。

4 擴散

如上所述衡载，這樣一個產(chǎn)品，站在前人的肩膀上肪笋，可以快速搭建一個簡單的MVP月劈，而之后的運營和迭代才是難中之難。

首先藤乙，任何的迭代開發(fā)，要保持一個大方向不動搖惭墓。換句話說坛梁，產(chǎn)品的調(diào)性不要輕易改變。比如做上面這樣一款社交產(chǎn)品腊凶，就扎扎實實圍繞社交打磨功能划咐，當(dāng)可以成為精品的時候，再考慮逐步橫向拓展钧萍，諸如廣告褐缠、帶貨、游戲等风瘦。

微信就是一個很好的例子队魏。近幾個月，微信動作頻繁万搔，上線了一大批變現(xiàn)功能胡桨，并且前提是以用戶體驗不受較大影響。社交是微信的方向瞬雹，是微信的固有屬性昧谊，根深蒂固；如果把這個根基動了酗捌，上層功能模塊也便不牢靠了呢诬。對面的支付寶涌哲，不斷創(chuàng)新，不論從功能還是排版尚镰，均發(fā)揮了產(chǎn)品經(jīng)理極大的腦洞膛虫。結(jié)果是最終偃旗息鼓，不再大動社交的腦筋钓猬。

其次稍刀，產(chǎn)品初期的迭代要根據(jù)市場反饋靈活調(diào)整。市場反饋怎么看敞曹？數(shù)據(jù)账月。像微信小程序，就給出了相當(dāng)完善的運營工具澳迫，其他諸如阿拉丁第三方工具局齿，也可以作為不錯的輔助。

具體怎么玩呢橄登？看活動效果抓歼，看推廣渠道帶來的指標(biāo)增長，看某個功能調(diào)整帶來的用戶波動拢锹，等等谣妻。這是個大話題，不是一兩篇能搞定的卒稳。推薦一本范冰的《增長黑客》吧蹋半，里面更多的從技術(shù)角度上闡述了如何對運營效果進行改善，比較適合技術(shù)人員充電充坑。

5 后記

整個過程都是一個人完成的减江，對于小項目尚能如此，稍微大些的就需要考慮到協(xié)作問題捻爷。改天會就中小型團隊協(xié)作的過程辈灼，以及用到的一些提高效能的工具進行分享。

另外也榄，【一文一圖】這個小產(chǎn)品巡莹，我會接著做下去。成手蝎，或者不成榕莺，過幾個月我再回來把整個過程復(fù)盤，把中間的迭代棵介、運營钉鸯、推廣等環(huán)節(jié)分享出來，希望能對你有所幫助邮辽。