1. 项目规划
本项目为基于微信手机应用平台的一款运动互动型小程序,实现了用户即时运动步数群内PK与个人动态的发布,小程序前端采用原生框架,后端采用基于Node的koa2框架,数据库采用MYSQL,对象存储采用七牛云,服务器采用阿里ECS,域名采用CA认证。
运行效果如下
2. 支撑技术点分析
2.1 七牛云存储
在这个项目中,有个功能为动态发布,允许用户上传图片,动态发布后,所有人可在动态广场看到该动态,存储图片有很多方式,例如通过表单将文件转为为二级制发送给后端,然后存数据库中,但是,这样我就要多写很多代码,所有我决定将图片存储到图床,我数据库中保存图片链接即可,图床有很多,不一一描述了,我这次用的是七牛云,个人认证成功后将获得一定空间的免费存储空间。
建立存储空间(ydonline),选定存储区域(华北)。
注册成功后,将获得两组秘钥,这东西很重要,上传文件时,需要知道uptoken,uptoken是根据AK与SC生成的,七牛云开发文档中建议后端生成uptoken值,但我嫌麻烦,直接在线生成了uptoken,也就是说该uptoken是写死的。
uptoken生成地址:http://pchou.qiniudn.com/qiniutool/uptoken.html deadline的时间设置长一些
引入官方开发文件:qiniuUploader.js
小程序端存储图片关键代码:
1 | releaseNotice.js |
上传文件到指定的存储空间,七牛会返回文件的key值,加上七牛给你的外链域名,这样,你就可以显示文件了。
2.2 服务器与域名
我买过两次服务器,第一次是阿里的,另外一次也是阿里的。但这次,我买的是windows版云ECS ,首先,明确需求。
- 远程连接部署项目(安装环境,运行后台,域名解析,外网访问)
- 进行域名CA认证, 小程序的请求必须得是HTTPS。
在windows 服务器上部署项目 简单, 远程链接时,选择共享本地某个硬盘的资料,连接成功后,把本地的环境软件全部安装上去,本次需要在服务器上安装 node.js、git、mysql这三个软件。
购买SSL证书
https://yundunnext.console.aliyun.com/?p=casnext#/overview/cn-hangzhou
阿里有对单域名免费的证书,时间为1年,于是我为该项目的域名购买了https。
点击下载 =>选择 其他
解压后,里面有两个文件,一个是crt,一个是key,将这两个文件发在后台文件夹下/ssl包下 (可随便命名)
后台加载这两个文件。
1 | app.js 关键代码 |
这样,后台就跑在htpps下了。
在服务器上运行后台:
然后你用自己的电脑打开该域名,你会发现根本连接不上。
那么,这是什么鬼?
原来 阿里的windows 服务器 防火墙做了限制,且服务器安全组也做了限制。
打开防火墙=>高级设置=>入站规则=>新建规则。
选择端口 =>填写端口
本次需要填写三个端口号, 后台的80(http) 443(https) 3306(mysql)
在阿里云控制器那里配置安全组,如下图所示。
填写 那三个端口号, 授权对象那里 填写 0.0.0.0/0
做完这一步,大功告成了,你的域名可以被访问了。
3. 数据库设计
数据表有两张,分为动态表与运动数据表,如下图所示。
4. 前端设计与开发
4.1 首页
首页主要由动态广场与底部的tabbar组成,动态广场显示状态正常(state==1)的动态,私人动态与禁止动态不能被他人所看见,在数据表设计中,uid其实就是openid。 用户上传了图片后,数据库中保存的是其访问地址,多个地址之间用逗号分隔,形成字符串, 前端拿到图片地址后,将其转成数组。
关键代码如下:
1 | onShow:async function(){ |
动态页面使用分页加载,每次下拉加载10条,内容展示区使用 scroll-view组件,设置bindscrolltolower=”upper”,下拉时触发upper方法。
关键代码如下:
1 | upper: function () { |
4.2 动态发布页
动态发布页主要有文本输入框,图片上传区、发布按钮组成。
该页面为重要页面,在发布前,我们需要获取发布者的头像、昵称、openid,如果这三个必要条件缺一的话,我们就会阻止用户发布动态并且提示用户授权登录。
获取openid关键代码如下:
1 | app.js |
用户在进入小程序时,我就会让一次后台请求,根据wx.login返回的code解密生成 openid与 session_key,我将其存放在storage中,其实,我不推荐将session_key放在storage中,按正常开发方式,应该是后台临时存储session_key,并返回一个sessionid给用户,不应该把session_key返回给用户。但是,我在用koa-session时,一直没有成功,不知道什么鬼!没办法,我只好把session_key返回给用户了。
上传图片关键代码:
1 | didPressChooesImage: function () { |
4.3 我的页面
我的页面包含了用户的数据统计信息与小程序的推广信息,目前有待完善,从我的页面进去的动态页面只包含用户自己发布的。
在未登陆时,页面显示默认头像,点击头像,授权个人信息,显示微信头像与昵称。
4.4 群间运动PK
接下来,重头戏来了,运动数据pk为该小程序的核心功能,
功能点:
1)获取用户此时的运动步数并展示出来
2)分享自己的运动步数到微信群 并在页面上形成 pk排名区
3)其他用户通过分享进入小程序,系统获取其群id与运动步数 与同一微信群的用户进行pk
4)每次分享或点击分享链接,系统将自动更新该用户的运动步数
5) pk排名区只展示当日的排名情况,晚上12点后自动清空pk区
技术点:
1)获取用户运动步数
2)获取群id
3) 各群之间间运动数据隔离
效果如下图所示
授权后显示步数。
点击选择一个聊天后,将发布分享到微信群里,分享成功后,前端获取到ShareTicket,群内其他人通过该链接进来,前端也会获取到ShareTicket,调用 wx.getShareInfo()将加密数据发送给后端解密,可获得 openGid ,将用户的步数与openGid等信息存储起来,形成了groupsport表。
保存当日已分享的群id,获取ShareTicket 关键代码:
1 |
|
获取个人运动数据
1 | onShow: function () { |
分享时获取群id
1 | onShareAppMessage: function () { |
刷新群内pk
1 | getfirstgroupsport: async function () { |
点击分享链接获取shareTicket,通过链接进入小程序的场景值是1044
1 | app.js |
5. 后端开发
后端采用的是koa2,通过sequelize.js实现与mysql的连接。
5.1 获取用户openid与session_key
1 | function getOpenId(code) { |
5.2 运动数据与群id数据获取
这两个数据属于隐私数据,需要用算法解密,具体的流程,微信开发手册上有,我就不多说了,需要用到上一步的session_key来解密。
1 | //WXBizDataCryptconst:微信提供的解密方法 |
5.3 创建与读取运动数据
当用户分享自己的运动数据到微信群内时或者微信群内其他用户通过该链接进入小程序时,后端将获创建或者更新该用户的群内运动数据。
1 | const creategroupsport = async function(data){ // 给某个用户创建一条群运动记录 |
1 | //读取群内运动数据 |
5.4 动态的获取
对用户发布的动态,后台目前主要有 增,改,查三类方法,我说一下分页查询。
1 | const findallnotice = async function(ctx){ // 查询所有 |
6. 总结
我洋洋洒洒写了几千字,看上去举重若轻,但是在实际开发中经常会碰见各种各样的问题,该项目从原型设计与开发到部署都是我独自完成的,中间也踩了一些坑,这个项目最终没能上线,是因为,个人主体账号不能发布关于GUC的小程序。
本文首发于我的个人博客: https://www.catac.cn,转载时请注明来源,
该项目源码地址:https://github.com/oumingliang/ydonline.git
也欢迎各位与我交流,个人QQ:2541511219