《地图气球》小程序从产品到运维的个人全栈开发过程分享（长文）

前言

怕过不了审，先声明一下，这不是广告，因为这个小程序没上架。

从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个名额哦。

小小的打个广告：最近考虑换工作，有没有深圳的公司招前端的，联系我邮箱，^_^。