《地圖氣球》小程式從產品到運維的個人全棧開發過程分享（長文）

前言

怕過不了審，先宣告一下，這不是廣告，因為這個小程式沒上架。

從5年前入行的時候就一直想做一個社交產品，最近工作略閒，加之小程式火爆，下班後時間多，於是就花費了一個月業餘時間，動手做了一個基於地理位置的資訊社交類小應用，由於個人資質無法上線此類的小程式，開發過程僅為鍛鍊思維和技術，特此分享給大家。編碼技術略菜，望各位大神莫笑話。

全棧說明

因為開始是奔著想上線去的，所有要做的事情很多，而不僅僅是前端+後端這樣的全棧。大體整體過程如下：

1.產品部分： 最開始在腦子裡設想應用的用途和使用流程及頁面的互動

2.美工部分： 開發過程中部分需用用到的圖片資源（中途有請過美工同事幫忙）

3.前端部分： 包括小程式端和後臺管理系統

4.後端部分： 後端程式與資料庫

5.運維部分： 域名備案、ssl證照配置、Nginx均衡負載等伺服器部署過程

6.測試部分： 全程功能自測、介面壓力測試

技術棧

小程式（wepy）+後臺管理系統（vue+iview）+後端程式（node+express）+資料庫（MongoDB）

產品

產品命名： 地圖氣球 （原諒我沒文學水平....）

功能簡介： 基於地圖地理位置的文字+多媒體資訊社交，有點類似發空間說說或者微博，使用者可以傳送文字或圖片或語音或視訊等資訊，該條資訊將生成一個氣球，在釋出地點所在的地圖位置上顯示。其他使用者可以挪動全國地圖，撿取自己想要檢視的氣球，開啟後檢視內容。

功能盤點：（草圖不完整，我就直接展示成品後的截圖吧）

1.首頁：一個全屏的地圖介面，地圖上飄著當前區域範圍內的氣球，點選即可進入詳情頁檢視內容

2.詳情：氣球的內容，包含評論及其他如地理地址、瀏覽量、點贊、手機型號等零碎資訊

3.釋出：一個文字與多媒體的資訊釋出頁面

4.個人中心：整個應用功能點的集合

5.我的主頁（抄襲朋友圈）

6.附近使用者（公司同事馬賽克伺候）

7.意見反饋

剩餘幾個什麼我的氣球，我的回覆，我關注的，我的粉絲，篇幅問題就不再一一展示了，基本都是列表頁。

開發

專案目錄

小程式 小程式端採用了wepy框架來開發，畢竟用習慣了vue，喜歡vue的程式碼組織方式，另外就是喜歡用sass寫樣式。

npm install wepy-cli -g //安裝wepy wepy init standard mapballoon //建立小程式專案

一個wpy檔案代表一個頁面，雖然也可以用元件化，但是感覺頁面都比較簡單，而且wepy的元件模式還有點小問題，有時候不會熱過載元件新內容。

小程式的開發過程沒什麼複雜度，基本都是畫頁面，取資料和發資料，挑幾個小點講一下。 唯一有點坑的就是，在小程式中，地圖、視訊等很多特殊元件都是由原生渲染的，處於檢視最頂層，只支援cover-view作為覆蓋元素，這樣一來，可自由發揮的程度大大降低。

1.語音功能

語音稍微比圖片和視訊複雜一些，圖片和視訊只要一個picker就搞定了。利用wx.getRecorderManager()和wx.createInnerAudioContext()自己寫錄音過程和播放過程。其思路是：呼叫wx.getRecorderManager()的start方法即開始錄音，在wx.getRecorderManager()的onStop回撥中得到錄音的檔案地址，把檔案地址交給wx.createInnerAudioContext()去播放，整個過程搭配自己寫的UI進行視覺化操作。

2.多媒體檔案的上傳

這個當然選第三方的檔案雲端儲存伺服器啦，既節省伺服器資源，又加速了檔案的傳輸。這裡我選擇七牛雲端儲存。 下載七牛的小程式版sdk，直接就是一個js檔案，然後自己寫一個方法上傳方法。

圖中的uptoken是由後端根據七牛賬號的accessKey和secretKey生產的一串驗證token，後端生成方法如下：

整體上傳思路為：小程式中選中檔案----上傳至七牛----七牛返回檔案地址----將地址提交給後端資料庫

2.圖片鑑黃

作為遵紀守法的好猿，圖片是不允許使用者亂髮的（如果實在沒地方發請發我郵箱^_^）。恰好七牛也提供了鑑黃功能，使用起來非常簡單：將上傳到七牛後的圖片地址url加上引數get請求即可，例如圖片url是http://abc.jpg，則get請求http://abc.jpg?qpulp就可以得到返回結果如下：

其中label欄位返回值：0涉黃 1性感 2正常 然後根據自己的業務需求進行攔截

後臺管理系統

使用前後端分離方式開發，基於vue+iview-admin，直接clone了iview-admin的專案，在此基礎上去修改和去除。 *iview-admin *iview 後臺管理頁面基本都是簡單的增刪改查，由於篇幅原因，這裡無法一一贅述，挑幾個地方講吧： 1.axios的簡單封裝

頁面與後端互動需要使用到token，把token存在sessionStorage中，每次請求之前放在頭部，後端從頭部取出token做驗證。

有個小需求：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。

控制器中引入模型進行增刪改查和其他操作

路由把請求導向到對應的控制器

將路由注入到app.js

2.jwt通訊

想了解jwt的點選這裡，我選用的是express-jwt，直接npm安裝引入後，程式碼如下：

從截圖中第一段程式碼，順便說一下跨域問題，這裡使用的是cors跨域，想簡單瞭解cors可以百度或者看我的另一篇文章

3.基於地理位置的資料查詢

MongoDB自帶$near操作符可以直接基於經緯度查詢，並且自動根據距離排序。這個功能用於做附近的使用者非常方便。

使用者表中記錄了使用者登入的經緯度，查詢時coordinates欄位賦值了某個使用者的當前經緯度，即可查出以這個使用者為中心方圓x米內的資料，省去了自己寫程式計算的過程。

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，安裝後目錄如下：

綠色的Nginx應用程式雙擊就可以開啟Nginx，但在此之前得先去配置一下，用文字編輯器開啟conf/nginx.conf 先配置ssl證照： 1.從阿里雲控制檯下載已申請通過的證照Nginx安裝包，在Nginx安裝目錄下新建（如果沒有）名為“cert”的資料夾，把證照檔案放進去。 2.在conf/nginx.conf配置檔案中，配置443埠的監聽：

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來訪問域名了,綠色則表示證照有效：

既然安裝了Nginx，均衡負載總得體驗一下吧，在conf/nginx.conf中簡單的配置一下：

如圖示，建立一個upstream方案，每一個server代表一個主機地址，然後將80埠的訪問通過proxy_pass反向代理到upstream方案，隨機分配給其中的主機。通俗來講也就是，以前一臺伺服器幹活，現在三臺伺服器幹活。

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個名額哦。

小小的打個廣告：最近考慮換工作，有沒有深圳的公司招前端的，聯絡我郵箱，^_^。