一個(gè)小程序的誕生過(guò)程
2019-10-09
小程序的使用范圍越來(lái)越廣，隨之而來(lái)的各種小程序開(kāi)發(fā)工具也如雨后春筍，今天要分享的是一套完整的帶后臺(tái)的小程序，完全從0開(kāi)始，沒(méi)有借助任何小程序生成框架。
一、概述
從第一天早上10點(diǎn)的Idea到第二天凌晨6點(diǎn)提交上架，除去做飯+吃喝拉撒，總共花費(fèi)約16個(gè)小時(shí)。復(fù)盤(pán)下來(lái)，覺(jué)得整個(gè)過(guò)程頗有代表性，故分享出來(lái)，供諸位拍磚。
二、工具清單
2.1 準(zhǔn)備階段
思維導(dǎo)圖：幕布
小程序申請(qǐng)：微信公眾平臺(tái)
2.2 開(kāi)發(fā)階段
2.2.1 后臺(tái)
版本管理：碼云
后臺(tái)開(kāi)發(fā)IDE：PHPStorm
后臺(tái)框架：PHP + Laravel
數(shù)據(jù)庫(kù)：MySQL
微信后臺(tái)對(duì)接（Laravel插件）：EasyWechat
圖片存儲(chǔ)（Laravel插件）：Aliyun-oss-storage
2.2.2 小程序
小程序開(kāi)發(fā)IDE：微信開(kāi)發(fā)者工具
小程序：官方的文檔、組件、API
瀑布流展示（小程序插件）：BrickLayout曉瀑布流
2.2.3 設(shè)計(jì)
圖標(biāo)：iconfont
UI參考：WeUI小程序版
編輯：Photoshop
2.3 運(yùn)維階段
小程序助手
小程序數(shù)據(jù)助手
小程序客服小助手
三、開(kāi)發(fā)過(guò)程
3.1 從Idea到動(dòng)手
吃夠了不經(jīng)調(diào)研的動(dòng)手開(kāi)搞帶來(lái)的苦頭，近幾年對(duì)于Idea到產(chǎn)品是頗為謹(jǐn)慎的。像這次干凈利索的決定，顯然已經(jīng)是好久不見(jiàn)。
其實(shí)我是不推薦這么迅速的作出開(kāi)發(fā)新項(xiàng)目的決定的，除非具備幾個(gè)因素：
項(xiàng)目開(kāi)發(fā)周期短，1-3天為宜；
具備立竿見(jiàn)影的效果；
沒(méi)錢(qián)了。
從Idea到產(chǎn)品，首先需要梳理思路。
之前用的xmind，最近一直用新出的幕布，后者更方便分享，多端可用，比較適合國(guó)內(nèi)的使用習(xí)慣。
時(shí)間緊迫，簡(jiǎn)單畫(huà)了畫(huà)。如果是較大的項(xiàng)目，則需要有比較系統(tǒng)的思路。這里推薦下 processon，之前一直用他畫(huà)流程圖，最近發(fā)現(xiàn)它又新出了諸如商業(yè)畫(huà)布一類的工具，很好用。
3.2 著手設(shè)計(jì)
產(chǎn)品最終的形態(tài)，在開(kāi)發(fā)之處最好是要有原型的，否則開(kāi)發(fā)過(guò)程中，會(huì)逐步失去方向，被瑣碎的事情干擾，以致最終開(kāi)發(fā)出的產(chǎn)品和最初的設(shè)想有很大出入。
產(chǎn)品原型的工具，在上面沒(méi)有列出來(lái)，是因?yàn)轫?xiàng)目太小，畫(huà)原型圖在時(shí)間上劃不來(lái)。原型圖的工具推薦下墨刀，和幕布一樣，也是可以在線分享演示的，這在團(tuán)隊(duì)協(xié)作和給客戶演示時(shí)非常方便。
這次的設(shè)計(jì)，就是完全在腦子里打了個(gè)草稿，又去找了找同類型的產(chǎn)品取了點(diǎn)經(jīng)，一個(gè)大概的產(chǎn)品模型就有了。
至于風(fēng)格什么樣，那就只能靠天吃飯了。因?yàn)檫@么短的時(shí)間，不可能去動(dòng)用設(shè)計(jì)的兄弟，所以就在 iconfont 和 ooopic 一類的設(shè)計(jì)網(wǎng)站上找靈感。
好在iconfont上剛好有一組圖標(biāo)，與心目中的產(chǎn)品比較契合，果斷下載。
至此，logo、圖標(biāo)、框架等都齊了，開(kāi)始最激動(dòng)的擼代碼階段。
3.3 擼代碼
一個(gè)人搞定前后端，這里面就有些門(mén)道了。
先干啥后干啥，每個(gè)人的喜好不同。
以效率為出發(fā)點(diǎn)，我有如下建議：首搭框架，先前再后，先橫再豎，敏捷交付。
首搭框架，是指先把前后端的基礎(chǔ)框架搭建起來(lái)，該配的基礎(chǔ)功能先做好。比如Laravel的本地調(diào)試環(huán)境、代碼倉(cāng)庫(kù)、云端服務(wù)器、備案過(guò)的域名、小程序的賬號(hào)、業(yè)務(wù)域名配置等等，這些環(huán)節(jié)先在腦子里過(guò)一遍，再?gòu)念^到尾整個(gè)做完。
之所以一鼓作氣全部做完，是因?yàn)樵诤竺婢幋a的過(guò)程中，一旦被上面一些小問(wèn)題卡住，思路就容易被打亂，影響效率。并且，很多事情是需要較長(zhǎng)的時(shí)間的，比如域名備案，慢的話就得一二十天，如果被域名卡住，項(xiàng)目流產(chǎn)的可能性就會(huì)直線攀升。
第二是先前再后。這個(gè)意思則是在開(kāi)發(fā)某個(gè)功能時(shí)，先設(shè)計(jì)前端界面和邏輯，再做后端接口和數(shù)據(jù)。反過(guò)來(lái)不行么？行，但是不好。
在這種快速迭代開(kāi)發(fā)的情況下，前端頁(yè)面和邏輯沒(méi)有經(jīng)過(guò)系統(tǒng)的設(shè)計(jì)，會(huì)經(jīng)常發(fā)生變動(dòng)。這和傳統(tǒng)團(tuán)隊(duì)開(kāi)發(fā)不太一樣，沒(méi)有概要設(shè)計(jì)到詳細(xì)設(shè)計(jì)再到開(kāi)發(fā)的過(guò)程，更沒(méi)有并行開(kāi)發(fā)的條件，因此要因地制宜，采取更適合這種小型作戰(zhàn)的方式方法。
當(dāng)然，這個(gè)建議重點(diǎn)關(guān)注的是具體的功能開(kāi)發(fā)，而不是完全取消前置設(shè)計(jì)。如果沒(méi)有整體的框架設(shè)計(jì)，是萬(wàn)萬(wàn)不行的。
第三是先橫再豎。我們從水平和垂直兩個(gè)方向，去劃分具體的功能。
比如這個(gè)項(xiàng)目中有四個(gè)頁(yè)面，分別是發(fā)現(xiàn)頁(yè)、發(fā)布頁(yè)、個(gè)人主頁(yè)、以及單篇展示頁(yè)。我在開(kāi)發(fā)時(shí)，先把四個(gè)頁(yè)面建好，把tab和圖標(biāo)都加進(jìn)去，頁(yè)面切換做好，先感受下最終的效果。這種方式叫水平開(kāi)發(fā)，好處在于讓你會(huì)對(duì)產(chǎn)品的最終形態(tài)先有所感知，如果有不舒服的地方，及時(shí)地進(jìn)行調(diào)整。
當(dāng)我們對(duì)某個(gè)頁(yè)面，或者某個(gè)跨頁(yè)面的功能進(jìn)行開(kāi)發(fā)時(shí)，則稱之為垂直開(kāi)發(fā)。此時(shí)的功能顆粒度就會(huì)相對(duì)較小，也更容易把控。
最后是敏捷交付，是脫胎于敏捷開(kāi)發(fā)模式的。意思是要持續(xù)的向客戶交付可用的產(chǎn)品，這里的客戶就是開(kāi)發(fā)者自身。
在前幾個(gè)原則的基礎(chǔ)上，要實(shí)現(xiàn)敏捷交付，還應(yīng)該注意不要被細(xì)枝末節(jié)的點(diǎn)牽絆住。比如某個(gè)圖標(biāo)的配色不好，某個(gè)按鈕的位置擺的不正等等。切記，一定要抓大放小，美化完善的工作一定放在最最后。再者，一款產(chǎn)品就是要在不斷的打磨下，才能奔著精品而去。
3.4 運(yùn)營(yíng)準(zhǔn)備
一個(gè)產(chǎn)品的啟動(dòng)是很有講究的，尤其是社交和UGC產(chǎn)品。當(dāng)一個(gè)用戶初次使用時(shí)，如果覺(jué)得你這個(gè)產(chǎn)品冷冷清清毫無(wú)生氣，是很難沉下心來(lái)去體驗(yàn)的。所以，適當(dāng)?shù)?ldquo;作假”是提高用戶體驗(yàn)的增長(zhǎng)黑客手段。
在產(chǎn)品達(dá)到一定量級(jí)后，一定記得把這些措施去除。比如王者榮耀的排位匹配，當(dāng)你的等級(jí)很低時(shí)，會(huì)匹配一些AI機(jī)器人陪玩，以鼓勵(lì)玩家。當(dāng)?shù)竭_(dá)人數(shù)比較多的等級(jí)階段時(shí)，就會(huì)降低AI機(jī)器人的比率，因?yàn)樽層脩舻却龝r(shí)間過(guò)久，是一件體驗(yàn)非常不好的事。
同樣的，在我們這個(gè)產(chǎn)品中，用戶發(fā)出去的文章，在達(dá)到一定時(shí)間內(nèi)，應(yīng)當(dāng)引入一定的激勵(lì)機(jī)制，以鼓勵(lì)用戶。當(dāng)用戶較多時(shí)，真實(shí)的互動(dòng)足夠激勵(lì)用戶再創(chuàng)作時(shí)，則可取消激勵(lì)機(jī)制，徹底度過(guò)項(xiàng)目的冷啟動(dòng)階段（時(shí)間關(guān)系，當(dāng)前版本并沒(méi)有加入激勵(lì)機(jī)制）。
四、擴(kuò)散
如上所述，這樣一個(gè)產(chǎn)品，站在前人的肩膀上，可以快速搭建一個(gè)簡(jiǎn)單的MVP，而之后的運(yùn)營(yíng)和迭代才是難中之難。
首先，任何的迭代開(kāi)發(fā)，要保持一個(gè)大方向不動(dòng)搖。換句話說(shuō)，產(chǎn)品的調(diào)性不要輕易改變。
比如做上面這樣一款社交產(chǎn)品，就扎扎實(shí)實(shí)圍繞社交打磨功能，當(dāng)可以成為精品的時(shí)候，再考慮逐步橫向拓展，諸如廣告、帶貨、游戲等。
微信就是一個(gè)很好的例子。
近幾個(gè)月，微信動(dòng)作頻繁，上線了一大批變現(xiàn)功能，并且前提是以用戶體驗(yàn)不受較大影響。社交是微信的方向，是微信的固有屬性，根深蒂固；如果把這個(gè)根基動(dòng)了，上層功能模塊也便不牢靠了。
對(duì)面的支付寶，不斷創(chuàng)新，不論從功能還是排版，均發(fā)揮了產(chǎn)品經(jīng)理極大的腦洞。結(jié)果是最終偃旗息鼓，不再大動(dòng)社交的腦筋。
其次，產(chǎn)品初期的迭代要根據(jù)市場(chǎng)反饋靈活調(diào)整。市場(chǎng)反饋怎么看？數(shù)據(jù)。像微信小程序，就給出了相當(dāng)完善的運(yùn)營(yíng)工具，其他諸如阿拉丁第三方工具，也可以作為不錯(cuò)的輔助。
具體怎么玩呢？看活動(dòng)效果，看推廣渠道帶來(lái)的指標(biāo)增長(zhǎng)，看某個(gè)功能調(diào)整帶來(lái)的用戶波動(dòng)，等等。這是個(gè)大話題，不是一兩篇能搞定的。推薦一本范冰的《增長(zhǎng)黑客》吧，里面更多的從技術(shù)角度上闡述了如何對(duì)運(yùn)營(yíng)效果進(jìn)行改善，比較適合技術(shù)人員充電。
一、概述
從第一天早上10點(diǎn)的Idea到第二天凌晨6點(diǎn)提交上架，除去做飯+吃喝拉撒，總共花費(fèi)約16個(gè)小時(shí)。復(fù)盤(pán)下來(lái)，覺(jué)得整個(gè)過(guò)程頗有代表性，故分享出來(lái)，供諸位拍磚。
二、工具清單
2.1 準(zhǔn)備階段
思維導(dǎo)圖：幕布
小程序申請(qǐng)：微信公眾平臺(tái)
2.2 開(kāi)發(fā)階段
2.2.1 后臺(tái)
版本管理：碼云
后臺(tái)開(kāi)發(fā)IDE：PHPStorm
后臺(tái)框架：PHP + Laravel
數(shù)據(jù)庫(kù)：MySQL
微信后臺(tái)對(duì)接（Laravel插件）：EasyWechat
圖片存儲(chǔ)（Laravel插件）：Aliyun-oss-storage
2.2.2 小程序
小程序開(kāi)發(fā)IDE：微信開(kāi)發(fā)者工具
小程序：官方的文檔、組件、API
瀑布流展示（小程序插件）：BrickLayout曉瀑布流
2.2.3 設(shè)計(jì)
圖標(biāo)：iconfont
UI參考：WeUI小程序版
編輯：Photoshop
2.3 運(yùn)維階段
小程序助手
小程序數(shù)據(jù)助手
小程序客服小助手
三、開(kāi)發(fā)過(guò)程
3.1 從Idea到動(dòng)手
吃夠了不經(jīng)調(diào)研的動(dòng)手開(kāi)搞帶來(lái)的苦頭，近幾年對(duì)于Idea到產(chǎn)品是頗為謹(jǐn)慎的。像這次干凈利索的決定，顯然已經(jīng)是好久不見(jiàn)。
其實(shí)我是不推薦這么迅速的作出開(kāi)發(fā)新項(xiàng)目的決定的，除非具備幾個(gè)因素：
項(xiàng)目開(kāi)發(fā)周期短，1-3天為宜；
具備立竿見(jiàn)影的效果；
沒(méi)錢(qián)了。
從Idea到產(chǎn)品，首先需要梳理思路。
之前用的xmind，最近一直用新出的幕布，后者更方便分享，多端可用，比較適合國(guó)內(nèi)的使用習(xí)慣。
時(shí)間緊迫，簡(jiǎn)單畫(huà)了畫(huà)。如果是較大的項(xiàng)目，則需要有比較系統(tǒng)的思路。這里推薦下 processon，之前一直用他畫(huà)流程圖，最近發(fā)現(xiàn)它又新出了諸如商業(yè)畫(huà)布一類的工具，很好用。
3.2 著手設(shè)計(jì)
產(chǎn)品最終的形態(tài)，在開(kāi)發(fā)之處最好是要有原型的，否則開(kāi)發(fā)過(guò)程中，會(huì)逐步失去方向，被瑣碎的事情干擾，以致最終開(kāi)發(fā)出的產(chǎn)品和最初的設(shè)想有很大出入。
產(chǎn)品原型的工具，在上面沒(méi)有列出來(lái)，是因?yàn)轫?xiàng)目太小，畫(huà)原型圖在時(shí)間上劃不來(lái)。原型圖的工具推薦下墨刀，和幕布一樣，也是可以在線分享演示的，這在團(tuán)隊(duì)協(xié)作和給客戶演示時(shí)非常方便。
這次的設(shè)計(jì)，就是完全在腦子里打了個(gè)草稿，又去找了找同類型的產(chǎn)品取了點(diǎn)經(jīng)，一個(gè)大概的產(chǎn)品模型就有了。
至于風(fēng)格什么樣，那就只能靠天吃飯了。因?yàn)檫@么短的時(shí)間，不可能去動(dòng)用設(shè)計(jì)的兄弟，所以就在 iconfont 和 ooopic 一類的設(shè)計(jì)網(wǎng)站上找靈感。
好在iconfont上剛好有一組圖標(biāo)，與心目中的產(chǎn)品比較契合，果斷下載。
至此，logo、圖標(biāo)、框架等都齊了，開(kāi)始最激動(dòng)的擼代碼階段。
3.3 擼代碼
一個(gè)人搞定前后端，這里面就有些門(mén)道了。
先干啥后干啥，每個(gè)人的喜好不同。
以效率為出發(fā)點(diǎn)，我有如下建議：首搭框架，先前再后，先橫再豎，敏捷交付。
首搭框架，是指先把前后端的基礎(chǔ)框架搭建起來(lái)，該配的基礎(chǔ)功能先做好。比如Laravel的本地調(diào)試環(huán)境、代碼倉(cāng)庫(kù)、云端服務(wù)器、備案過(guò)的域名、小程序的賬號(hào)、業(yè)務(wù)域名配置等等，這些環(huán)節(jié)先在腦子里過(guò)一遍，再?gòu)念^到尾整個(gè)做完。
之所以一鼓作氣全部做完，是因?yàn)樵诤竺婢幋a的過(guò)程中，一旦被上面一些小問(wèn)題卡住，思路就容易被打亂，影響效率。并且，很多事情是需要較長(zhǎng)的時(shí)間的，比如域名備案，慢的話就得一二十天，如果被域名卡住，項(xiàng)目流產(chǎn)的可能性就會(huì)直線攀升。
第二是先前再后。這個(gè)意思則是在開(kāi)發(fā)某個(gè)功能時(shí)，先設(shè)計(jì)前端界面和邏輯，再做后端接口和數(shù)據(jù)。反過(guò)來(lái)不行么？行，但是不好。
在這種快速迭代開(kāi)發(fā)的情況下，前端頁(yè)面和邏輯沒(méi)有經(jīng)過(guò)系統(tǒng)的設(shè)計(jì)，會(huì)經(jīng)常發(fā)生變動(dòng)。這和傳統(tǒng)團(tuán)隊(duì)開(kāi)發(fā)不太一樣，沒(méi)有概要設(shè)計(jì)到詳細(xì)設(shè)計(jì)再到開(kāi)發(fā)的過(guò)程，更沒(méi)有并行開(kāi)發(fā)的條件，因此要因地制宜，采取更適合這種小型作戰(zhàn)的方式方法。
當(dāng)然，這個(gè)建議重點(diǎn)關(guān)注的是具體的功能開(kāi)發(fā)，而不是完全取消前置設(shè)計(jì)。如果沒(méi)有整體的框架設(shè)計(jì)，是萬(wàn)萬(wàn)不行的。
第三是先橫再豎。我們從水平和垂直兩個(gè)方向，去劃分具體的功能。
比如這個(gè)項(xiàng)目中有四個(gè)頁(yè)面，分別是發(fā)現(xiàn)頁(yè)、發(fā)布頁(yè)、個(gè)人主頁(yè)、以及單篇展示頁(yè)。我在開(kāi)發(fā)時(shí)，先把四個(gè)頁(yè)面建好，把tab和圖標(biāo)都加進(jìn)去，頁(yè)面切換做好，先感受下最終的效果。這種方式叫水平開(kāi)發(fā)，好處在于讓你會(huì)對(duì)產(chǎn)品的最終形態(tài)先有所感知，如果有不舒服的地方，及時(shí)地進(jìn)行調(diào)整。
當(dāng)我們對(duì)某個(gè)頁(yè)面，或者某個(gè)跨頁(yè)面的功能進(jìn)行開(kāi)發(fā)時(shí)，則稱之為垂直開(kāi)發(fā)。此時(shí)的功能顆粒度就會(huì)相對(duì)較小，也更容易把控。
最后是敏捷交付，是脫胎于敏捷開(kāi)發(fā)模式的。意思是要持續(xù)的向客戶交付可用的產(chǎn)品，這里的客戶就是開(kāi)發(fā)者自身。
在前幾個(gè)原則的基礎(chǔ)上，要實(shí)現(xiàn)敏捷交付，還應(yīng)該注意不要被細(xì)枝末節(jié)的點(diǎn)牽絆住。比如某個(gè)圖標(biāo)的配色不好，某個(gè)按鈕的位置擺的不正等等。切記，一定要抓大放小，美化完善的工作一定放在最最后。再者，一款產(chǎn)品就是要在不斷的打磨下，才能奔著精品而去。
3.4 運(yùn)營(yíng)準(zhǔn)備
一個(gè)產(chǎn)品的啟動(dòng)是很有講究的，尤其是社交和UGC產(chǎn)品。當(dāng)一個(gè)用戶初次使用時(shí)，如果覺(jué)得你這個(gè)產(chǎn)品冷冷清清毫無(wú)生氣，是很難沉下心來(lái)去體驗(yàn)的。所以，適當(dāng)?shù)?ldquo;作假”是提高用戶體驗(yàn)的增長(zhǎng)黑客手段。
在產(chǎn)品達(dá)到一定量級(jí)后，一定記得把這些措施去除。比如王者榮耀的排位匹配，當(dāng)你的等級(jí)很低時(shí)，會(huì)匹配一些AI機(jī)器人陪玩，以鼓勵(lì)玩家。當(dāng)?shù)竭_(dá)人數(shù)比較多的等級(jí)階段時(shí)，就會(huì)降低AI機(jī)器人的比率，因?yàn)樽層脩舻却龝r(shí)間過(guò)久，是一件體驗(yàn)非常不好的事。
同樣的，在我們這個(gè)產(chǎn)品中，用戶發(fā)出去的文章，在達(dá)到一定時(shí)間內(nèi)，應(yīng)當(dāng)引入一定的激勵(lì)機(jī)制，以鼓勵(lì)用戶。當(dāng)用戶較多時(shí)，真實(shí)的互動(dòng)足夠激勵(lì)用戶再創(chuàng)作時(shí)，則可取消激勵(lì)機(jī)制，徹底度過(guò)項(xiàng)目的冷啟動(dòng)階段（時(shí)間關(guān)系，當(dāng)前版本并沒(méi)有加入激勵(lì)機(jī)制）。
四、擴(kuò)散
如上所述，這樣一個(gè)產(chǎn)品，站在前人的肩膀上，可以快速搭建一個(gè)簡(jiǎn)單的MVP，而之后的運(yùn)營(yíng)和迭代才是難中之難。
首先，任何的迭代開(kāi)發(fā)，要保持一個(gè)大方向不動(dòng)搖。換句話說(shuō)，產(chǎn)品的調(diào)性不要輕易改變。
比如做上面這樣一款社交產(chǎn)品，就扎扎實(shí)實(shí)圍繞社交打磨功能，當(dāng)可以成為精品的時(shí)候，再考慮逐步橫向拓展，諸如廣告、帶貨、游戲等。
微信就是一個(gè)很好的例子。
近幾個(gè)月，微信動(dòng)作頻繁，上線了一大批變現(xiàn)功能，并且前提是以用戶體驗(yàn)不受較大影響。社交是微信的方向，是微信的固有屬性，根深蒂固；如果把這個(gè)根基動(dòng)了，上層功能模塊也便不牢靠了。
對(duì)面的支付寶，不斷創(chuàng)新，不論從功能還是排版，均發(fā)揮了產(chǎn)品經(jīng)理極大的腦洞。結(jié)果是最終偃旗息鼓，不再大動(dòng)社交的腦筋。
其次，產(chǎn)品初期的迭代要根據(jù)市場(chǎng)反饋靈活調(diào)整。市場(chǎng)反饋怎么看？數(shù)據(jù)。像微信小程序，就給出了相當(dāng)完善的運(yùn)營(yíng)工具，其他諸如阿拉丁第三方工具，也可以作為不錯(cuò)的輔助。
具體怎么玩呢？看活動(dòng)效果，看推廣渠道帶來(lái)的指標(biāo)增長(zhǎng)，看某個(gè)功能調(diào)整帶來(lái)的用戶波動(dòng)，等等。這是個(gè)大話題，不是一兩篇能搞定的。推薦一本范冰的《增長(zhǎng)黑客》吧，里面更多的從技術(shù)角度上闡述了如何對(duì)運(yùn)營(yíng)效果進(jìn)行改善，比較適合技術(shù)人員充電。
訪問(wèn)手機(jī)端更方便
技術(shù)創(chuàng)造價(jià)值 服務(wù)締造品牌
Copyright ? 2011-2024 鄭州開(kāi)拓者電子科技有限公司 All Rights Reserved
友情鏈接：
小程序開(kāi)發(fā)