E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现运动步数排名与发布个人动态&服务器部署

E企盈直播平台营销卖货系统

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小程序端存储图片关键代码:releaseNotice.jsconst qiniuUploader = require(“qiniuUploader.js”);function didPressChooesImage(that) {  initQiniu();  // 微信 API 选文件  wx.chooseImage({    count: 1,    success: function (res) {      var filePath = res.tempFilePaths[0];      // 交给七牛上传      qiniuUploader.upload(filePath, (res) => {        let imageurl = that.data.imageurl;        imageurl.push(getApp().data.qiniu_domain + res.key);        that.setData({          ‘imageurl’: imageurl        });      }, (error) => {        console.error(‘error: ‘ + JSON.stringify(error));      });    }  }  )}function initQiniu() {  //配置详解 https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md  var options = {    region: ‘NCN’, // 华东区 根据存储区域填写    //uptokenURL: ‘UpTokenURL.com/uptoken’,//// 从指定 url 通过 HTTP GET 获取 uptoken,返回的格式必须是 json 且包含 uptoken 字段,例如: {“uptoken”: “0MLvWPnyy…”}    uptoken: getApp().data.qiniu_uptoken,    domain: getApp().data.qiniu_domain  };  qiniuUploader.init(options);}—————————————————————————————  app.jsApp({  data: {    qiniu_domain: ‘http://pgwn32i53.bkt.clouddn.com/’,//七牛图片外链域名    qiniu_uptoken: ‘uxQXOgxXDtF-1uM_V15KQSIky5Xkdww0GhoAksLF:LWUt0HMVbICEDaSOMnMF3YLoUH4=:eyJzY29wZSI6Inlkb25saW5lIiwiZGVhZGxpbmUiOjE4NTU2NzA0MDF9’  },})上传文件到指定的存储空间,七牛会返回文件的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包下 (可随便命名)后台加载这两个文件。app.js 关键代码var app = require(‘koa’),    https = require(‘https’);app=new app();var options = {  key: fs.readFileSync(‘./ssl/key.key’),  //ssl文件路径  cert: fs.readFileSync(‘./ssl/crt.crt’)  //ssl文件路径};// start the serverhttps.createServer(options, app.callback()).listen(443);这样,后台就跑在htpps下了。在服务器上运行后台:然后你用自己的电脑打开该域名,你会发现根本连接不上。那么,这是什么鬼?原来 阿里的windows 服务器 防火墙做了限制,且服务器安全组也做了限制。打开防火墙=>高级设置=>入站规则=>新建规则。选择端口 =>填写端口本次需要填写三个端口号, 后台的80(http) 443(https)   3306(mysql)在阿里云控制器那里配置安全组,如下图所示。填写 那三个端口号, 授权对象那里 填写 0.0.0.0/0做完这一步,大功告成了,你的域名可以被访问了。3. 数据库设计数据表有两张,分为动态表与运动数据表,如下图所示。4. 前端设计与开发4.1 首页首页主要由动态广场与底部的tabbar组成,动态广场显示状态正常(state==1)的动态,私人动态与禁止动态不能被他人所看见,在数据表设计中,uid其实就是openid。 用户上传了图片后,数据库中保存的是其访问地址,多个地址之间用逗号分隔,形成字符串, 前端拿到图片地址后,将其转成数组。关键代码如下: onShow:async function(){    var that = this;    let pageno = 1;    let pagesize = this.data.pagesize;    this.setData({ pageno:1});    noticesource.findalllnotice(pageno, pagesize).then(function (res) {      console.log(res);      for (let i in res) {        let image = res[i].photo.split(‘,’);        res[i].imageurl = image;      }      that.setData({ allnotice:  res });    })  },动态页面使用分页加载,每次下拉加载10条,内容展示区使用  scroll-view组件,设置bindscrolltolower=“upper”,下拉时触发upper方法。关键代码如下: upper: function () {    var allnotice = this.data.allnotice;    var pageno = ++this.data.pageno;    var pagesize = this.data.pagesize;    console.log(pageno);    var that = this;    this.setData({ pageno: this.data.pageno++ });    noticesource.findalllnotice(pageno, pagesize).then(function (res) {      console.log(res);      for (let i in res) {        let image = res[i].photo.split(‘,’);        res[i].imageurl = image;      }        if (res.length > 0) {          allnotice=allnotice.concat(res);        }      console.log(allnotice);      that.setData({ allnotice: Array.from(new Set(allnotice)) });      })    }4.2 动态发布页动态发布页主要有文本输入框,图片上传区、发布按钮组成。该页面为重要页面,在发布前,我们需要获取发布者的头像、昵称、openid,如果这三个必要条件缺一的话,我们就会阻止用户发布动态并且提示用户授权登录。获取openid关键代码如下:app.js wx.login({      success(res) {        console.log(‘code: ‘ + res.code);        if (res.code) {          loginsource.login(res.code).then(function (data) {            console.log(data);            wx.setStorage({              key: ‘openid’,              data: data.openid,            })            wx.setStorage({              key: ‘session_key’,              data: data.session_key,            })          })        } else {          console.log(‘登录失败!’ + res.errMsg)        }      }    });用户在进入小程序时,我就会让一次后台请求,根据wx.login返回的code解密生成 openid与 session_key,我将其存放在storage中,**其实,我不推荐将session_key放在storage中,按正常开发方式,应该是后台临时存储session_key,并返回一个sessionid给用户,不应该把session_key返回给用户。**但是,我在用koa-session时,一直没有成功,不知道什么鬼!没办法,我只好把session_key返回给用户了。上传图片关键代码:  didPressChooesImage: function () {    if (this.data.imageurl.length>=4){      wx.showToast({        title:”不能超过4张”,      })      return     }    var that = this;    didPressChooesImage(that); //没有写错,只是同名,见2.1节  },      //删除指定图片deleteImage: function (e) {    let index = e.currentTarget.dataset.index;    var that = this;    var imagetemp = that.data.imageurl;    imagetemp.splice(index, 1);    that.setData({ imageurl: imagetemp });  },4.3 我的页面我的页面包含了用户的数据统计信息与小程序的推广信息,目前有待完善,从我的页面进去的动态页面只包含用户自己发布的。在未登陆时,页面显示默认头像,点击头像,授权个人信息,显示微信头像与昵称。4.4 群间运动PK接下来,重头戏来了,运动数据pk为该小程序的核心功能,功能点:1)获取用户此时的运动步数并展示出来2)分享自己的运动步数到微信群 并在页面上形成 pk排名区3)其他用户通过分享进入小程序,系统获取其群id与运动步数 与同一微信群的用户进行pk4)每次分享或点击分享链接,系统将自动更新该用户的运动步数5) pk排名区只展示当日的排名情况,晚上12点后自动清空pk区技术点:1)获取用户运动步数2)获取群id各群之间间运动数据隔离效果如下图所示授权后显示步数。点击选择一个聊天后,将发布分享到微信群里,分享成功后,前端获取到ShareTicket,群内其他人通过该链接进来,前端也会获取到ShareTicket,调用   wx.getShareInfo()将加密数据发送给后端解密,可获得 openGid ,将用户的步数与openGid等信息存储起来,形成了groupsport表。保存当日已分享的群id,获取ShareTicket 关键代码:    onLoad: function (opt) {      //在storage中创建用户的当日分享情况 也就是分享到了哪些群,将这些群id存在一个与日期挂钩的对象中,到了第二天,清空群id.      var that =AD:【E企盈小程序开发公司】E企盈系统专业开发:直播系统,直播平台系统源码,小程序,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现运动步数排名与发布个人动态&服务器部署
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏