前言
怕過不了審，先宣告一下，這不是廣告，因為這個小程式沒上架。
從5年前入行的時候就一直想做一個社交產品，最近工作略閒，加之小程式火爆，下班後時間多，於是就花費了一個月業餘時間，動手做了一個基於地理位置的資訊社交類小應用，由於個人資質無法上線此類的小程式，開發過程僅為鍛鍊思維和技術，特此分享給大家。編碼技術略菜，望各位大神莫笑話。
全棧說明
因為開始是奔著想上線去的，所有要做的事情很多，而不僅僅是前端+後端這樣的全棧。大體整體過程如下：
1.產品部分： 最開始在腦子裡設想應用的用途和使用流程及頁面的互動
2.美工部分： 開發過程中部分需用用到的圖片資源（中途有請過美工同事幫忙）
3.前端部分： 包括小程式端和後臺管理系統
4.後端部分： 後端程式與資料庫
5.運維部分： 域名備案、ssl證照配置、Nginx均衡負載等伺服器部署過程
6.測試部分： 全程功能自測、介面壓力測試
技術棧
小程式（wepy）+後臺管理系統（vue+iview）+後端程式（node+express）+資料庫（MongoDB）
產品
產品命名： 地圖氣球 （原諒我沒文學水平....）
功能簡介： 基於地圖地理位置的文字+多媒體資訊社交，有點類似發空間說說或者微博，使用者可以傳送文字或圖片或語音或視訊等資訊，該條資訊將生成一個氣球，在釋出地點所在的地圖位置上顯示。其他使用者可以挪動全國地圖，撿取自己想要檢視的氣球，開啟後檢視內容。
功能盤點：（草圖不完整，我就直接展示成品後的截圖吧）
1.首頁：一個全屏的地圖介面，地圖上飄著當前區域範圍內的氣球，點選即可進入詳情頁檢視內容
2.詳情：氣球的內容，包含評論及其他如地理地址、瀏覽量、點贊、手機型號等零碎資訊
4.個人中心：整個應用功能點的集合
5.我的主頁（抄襲朋友圈）
6.附近使用者（公司同事馬賽克伺候）
7.意見反饋
開發
專案目錄
npm install wepy-cli -g //安裝wepy wepy init standard mapballoon //建立小程式專案
一個wpy檔案代表一個頁面，雖然也可以用元件化，但是感覺頁面都比較簡單，而且wepy的元件模式還有點小問題，有時候不會熱過載元件新內容。
1.語音功能
語音稍微比圖片和視訊複雜一些，圖片和視訊只要一個picker就搞定了。利用wx.getRecorderManager()和wx.createInnerAudioContext()自己寫錄音過程和播放過程。其思路是：呼叫wx.getRecorderManager()的start方法即開始錄音，在wx.getRecorderManager()的onStop回撥中得到錄音的檔案地址，把檔案地址交給wx.createInnerAudioContext()去播放，整個過程搭配自己寫的UI進行視覺化操作。
2.多媒體檔案的上傳
這個當然選第三方的檔案雲端儲存伺服器啦，既節省伺服器資源，又加速了檔案的傳輸。這裡我選擇七牛雲端儲存。 下載七牛的小程式版sdk，直接就是一個js檔案，然後自己寫一個方法上傳方法。
2.圖片鑑黃
作為遵紀守法的好猿，圖片是不允許使用者亂髮的（如果實在沒地方發請發我郵箱^_^）。恰好七牛也提供了鑑黃功能，使用起來非常簡單：將上傳到七牛後的圖片地址url加上引數get請求即可，例如圖片url是http://abc.jpg，則get請求http://abc.jpg?qpulp就可以得到返回結果如下：
後臺管理系統
使用前後端分離方式開發，基於vue+iview-admin，直接clone了iview-admin的專案，在此基礎上去修改和去除。
*iview-admin
*iview
後臺管理頁面基本都是簡單的增刪改查，由於篇幅原因，這裡無法一一贅述，挑幾個地方講吧：
1.axios的簡單封裝
有個小需求：axios傳送請求是有then和catch兩個回撥，假設我們在點選提交按鈕時，需要進入loading狀態，然後再請求結束（無論結果如何）時關閉loading狀態，我們需要分別在then和catch中寫loading=false。推薦一個外掛：promise.prototype.finally。安裝之後，在axios例項化之前呼叫如下：
var promiseFinally = require('promise.prototype.finally'); promiseFinally.shim();
然後axios的請求回撥就變成了三個：then、catch、finally，當我們有上述需求時，直接寫在finally裡面。
2.單頁應用中首次開啟的白屏優化
單頁應用首次開啟需要載入相對較大的js包體和其他資源，會有一段時間白屏。我在index.html中新增了loading動畫，然後在vue的main.js中window.onload時移除這個動畫遮罩。
3.後臺部分頁面展示
後端node
畢竟前端出身，後端程式選用node+express（對koa不熟，- -！ ）。
1.後端程式碼組織方式
從資料模型開始：先設定好資料表，每個根據資料表寫資料模型檔案，這裡對應mongoose的schema。
2.jwt通訊
想了解jwt的點選這裡，我選用的是express-jwt，直接npm安裝引入後，程式碼如下：
3.基於地理位置的資料查詢
MongoDB自帶$near操作符可以直接基於經緯度查詢，並且自動根據距離排序。這個功能用於做附近的使用者非常方便。
MongoDB資料庫
下載安裝，我這裡選擇的是window x64版本，安裝好之後用命令列輸入mongod檢查是否已安裝成功並且加入系統變數，如果提示沒有“不是內部或外部命令”，則手動把mongodb安裝目錄下的bin目錄新增到系統變數path中。
mongod --logpath "D:\MongoDB\data\log\logs.txt" --logappend --dbpath "D:\MongoDB\data\db" --directoryperdb --serviceName "MongoDB" --serviceDisplayName "MongoDB" --install
在命令列中輸入以上命令（注意修改日誌路徑和資料儲存路徑），即可把mongdb新增到window系統服務來啟動。以上命令追加 --auth開啟密碼驗證模式，有興趣的自己百度一下。在開發除錯過程中，建議使用視覺化的mongdb管理工具，我這裡使用的是Mongo Management Studio,如下圖：
伺服器相關的部署過程
伺服器
買的阿里雲ECS窮逼版的配置，我選了Windows Server 2008 R2 企業版 64位中文版（CentOS不會玩），直接遠端桌面連線進入伺服器，安裝node和mongodb，為了方便部署專案我還裝了git。由本地機器開發完成後提交程式碼到碼雲，再由伺服器pull最新程式碼來執行。
域名和ssl證照
因為小程式要求使用https協議的介面，所以域名必須備案，必須配置ssl證照。 在阿里雲買了一個域名，同時購買一個免費的ssl證照，然後域名經過十來天的備案，將域名解析至伺服器。準備就緒，等待Nginx安裝。
Nginx與負載均衡
根據網上教程下載和安裝window版的Nginx，安裝後目錄如下：
server { listen 443; server_name localhost; ssl on; root html; index index.html index.htm; ssl_certificate cert/證照.pem; ssl_certificate_key cert/證照.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM- SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; location / { root html; index index.html index.htm; } }
注意上面程式碼中“證照”兩字需對應下載時的證照檔名，這裡我只是隨便命名。 到這裡即可在瀏覽器輸入https來訪問域名了,綠色則表示證照有效：
pm2程式守護
pm2是非常優秀工具,它提供對基於node.js的專案執行託管服務。
npm install pm2 -g
pm2 start app.js --name mapballoon //mapballoon為PM2程式名稱
測試
自己手動測試了每一個頁面的功能，大概花了個把星期反覆修改BUG，過程就不都說了。
總結
1.累，真的累，全程自己一個人，差不多一個月的業餘時間，感覺頭髮都保不住了。
2.充實，邊做邊學很多經驗，比如一些第三方的sdk和服務（七牛，騰訊地圖，地理距離計算等等）。
3.現在個人想做點什麼東西不容易，資質不夠。
篇幅問題，文中沒有提到太多技術點，望見諒。
視訊演示
由於沒有資質不能上線，但如果你們誰感興趣的想體驗的可以留言或給我發郵件(826327700@qq.com)，我把你拉入體驗版，只有15個名額哦。
小小的打個廣告：最近考慮換工作，有沒有深圳的公司招前端的，聯絡我郵箱，^_^。