摘要：項目規(guī)劃本項目為基于微信手機應用平臺的一款運動互動型小程序，實現(xiàn)了用戶即時運動步數(shù)群內(nèi)與個人動態(tài)的發(fā)布，小程序前端采用原生框架，后端采用基于的框架，數(shù)據(jù)庫采用，對象存儲采用七牛云，服務器采用阿里，域名采用認證。

本項目為基于微信手機應用平臺的一款運動互動型小程序，實現(xiàn)了用戶即時運動步數(shù)群內(nèi)PK與個人動態(tài)的發(fā)布，小程序前端采用原生框架，后端采用基于Node的koa2框架，數(shù)據(jù)庫采用MYSQL，對象存儲采用七牛云，服務器采用阿里ECS，域名采用CA認證。

運行效果如下
http://pgwn32i53.bkt.clouddn....

在這個項目中，有個功能為動態(tài)發(fā)布，允許用戶上傳圖片，動態(tài)發(fā)布后，所有人可在動態(tài)廣場看到該動態(tài)，存儲圖片有很多方式，例如通過表單將文件轉(zhuǎn)為為二級制發(fā)送給后端，然后存數(shù)據(jù)庫中，但是，這樣我就要多寫很多代碼，所有我決定將圖片存儲到圖床，我數(shù)據(jù)庫中保存圖片鏈接即可，圖床有很多，不一一描述了，我這次用的是七牛云，個人認證成功后將獲得一定空間的免費存儲空間。

建立存儲空間（ydonline），選定存儲區(qū)域(華北)。

注冊成功后，將獲得兩組秘鑰，這東西很重要，上傳文件時，需要知道uptoken，uptoken是根據(jù)AK與SC生成的，七牛云開發(fā)文檔中建議后端生成uptoken值，但我嫌麻煩，直接在線生成了uptoken，也就是說該uptoken是寫死的。

uptoken生成地址：http://pchou.qiniudn.com/qini... deadline的時間設置長一些

引入官方開發(fā)文件：qiniuUploader.js

小程序端存儲圖片關鍵代碼：

releaseNotice.js
const 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", // 華東區(qū) 根據(jù)存儲區(qū)域填寫
    //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.js

App({
  data: {
    qiniu_domain: "http://pgwn32i53.bkt.clouddn.com/",//七牛圖片外鏈域名
    qiniu_uptoken: "uxQXOgxXDtF-1uM_V15KQSIky5Xkdww0GhoAksLF:LWUt0HMVbICEDaSOMnMF3YLoUH4=:eyJzY29wZSI6Inlkb25saW5lIiwiZGVhZGxpbmUiOjE4NTU2NzA0MDF9"

  },
})

上傳文件到指定的存儲空間，七牛會返回文件的key值，加上七牛給你的外鏈域名，這樣，你就可以顯示文件了。

我買過兩次服務器，第一次是阿里的，另外一次也是阿里的。但這次，我買的是windows版云ECS ，首先，明確需求。

遠程連接部署項目（安裝環(huán)境，運行后臺，域名解析，外網(wǎng)訪問）

進行域名CA認證， 小程序的請求必須得是HTTPS。

在windows 服務器上部署項目 簡單， 遠程鏈接時，選擇共享本地某個硬盤的資料，連接成功后，把本地的環(huán)境軟件全部安裝上去，本次需要在服務器上安裝 node.js、git、mysql這三個軟件。

購買SSL證書

https://yundunnext.console.al...

阿里有對單域名免費的證書，時間為1年，于是我為該項目的域名購買了https。

點擊下載 =>選擇 其他

解壓后，里面有兩個文件，一個是crt，一個是key，將這兩個文件發(fā)在后臺文件夾下/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 server
https.createServer(options, app.callback()).listen(443);

這樣，后臺就跑在htpps下了。

在服務器上運行后臺：

然后你用自己的電腦打開該域名，你會發(fā)現(xiàn)根本連接不上。

那么，這是什么鬼？

原來 阿里的windows 服務器 防火墻做了限制，且服務器安全組也做了限制。

打開防火墻=>高級設置=>入站規(guī)則=>新建規(guī)則。

選擇端口 =>填寫端口

本次需要填寫三個端口號， 后臺的80（http） 443(https) 3306(mysql)

在阿里云控制器那里配置安全組，如下圖所示。

填寫 那三個端口號， 授權(quán)對象那里 填寫 0.0.0.0/0

做完這一步，大功告成了，你的域名可以被訪問了。

數(shù)據(jù)表有兩張，分為動態(tài)表與運動數(shù)據(jù)表，如下圖所示。

首頁主要由動態(tài)廣場與底部的tabbar組成，動態(tài)廣場顯示狀態(tài)正常（state==1）的動態(tài)，私人動態(tài)與禁止動態(tài)不能被他人所看見，在數(shù)據(jù)表設計中，uid其實就是openid。 用戶上傳了圖片后，數(shù)據(jù)庫中保存的是其訪問地址，多個地址之間用逗號分隔，形成字符串， 前端拿到圖片地址后，將其轉(zhuǎn)成數(shù)組。

關鍵代碼如下：

 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 });
    })
  },

?

動態(tài)頁面使用分頁加載，每次下拉加載10條，內(nèi)容展示區(qū)使用 scroll-view組件，設置bindscrolltolower="upper"，下拉時觸發(fā)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)) });
      })
    }

動態(tài)發(fā)布頁主要有文本輸入框，圖片上傳區(qū)、發(fā)布按鈕組成。

該頁面為重要頁面，在發(fā)布前，我們需要獲取發(fā)布者的頭像、昵稱、openid，如果這三個必要條件缺一的話，我們就會阻止用戶發(fā)布動態(tài)并且提示用戶授權(quán)登錄。

獲取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)
        }
      }
    });

用戶在進入小程序時，我就會讓一次后臺請求，根據(jù)wx.login返回的code解密生成 openid與 session_key，我將其存放在storage中，其實，我不推薦將session_key放在storage中，按正常開發(fā)方式，應該是后臺臨時存儲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節(jié)
  },
      //刪除指定圖片
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 });
  },

我的頁面包含了用戶的數(shù)據(jù)統(tǒng)計信息與小程序的推廣信息，目前有待完善，從我的頁面進去的動態(tài)頁面只包含用戶自己發(fā)布的。

在未登陸時，頁面顯示默認頭像，點擊頭像，授權(quán)個人信息，顯示微信頭像與昵稱。

接下來，重頭戲來了，運動數(shù)據(jù)pk為該小程序的核心功能，

功能點：

1）獲取用戶此時的運動步數(shù)并展示出來

2）分享自己的運動步數(shù)到微信群 并在頁面上形成 pk排名區(qū)

3）其他用戶通過分享進入小程序，系統(tǒng)獲取其群id與運動步數(shù) 與同一微信群的用戶進行pk

4）每次分享或點擊分享鏈接，系統(tǒng)將自動更新該用戶的運動步數(shù)

5） pk排名區(qū)只展示當日的排名情況，晚上12點后自動清空pk區(qū)

技術點：

1）獲取用戶運動步數(shù)

2）獲取群id

3) 各群之間間運動數(shù)據(jù)隔離

效果如下圖所示

授權(quán)后顯示步數(shù)。

點擊選擇一個聊天后，將發(fā)布分享到微信群里，分享成功后，前端獲取到ShareTicket，群內(nèi)其他人通過該鏈接進來，前端也會獲取到ShareTicket，調(diào)用 wx.getShareInfo(）將加密數(shù)據(jù)發(fā)送給后端解密，可獲得 openGid ，將用戶的步數(shù)與openGid等信息存儲起來，形成了groupsport表。

保存當日已分享的群id，獲取ShareTicket 關鍵代碼：

  
  onLoad: function (opt) {
      //在storage中創(chuàng)建用戶的當日分享情況 也就是分享到了哪些群，將這些群id存在一個與日期掛鉤的對象中，到了第二天，清空群id.  
    var that =this;
    var nowDate = new Date();
    var year = nowDate.getFullYear();
    var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
      : nowDate.getMonth() + 1;
    var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
      .getDate();
    var dateStr = year + "-" + month + "-" + day;
   
      var value = wx.getStorageSync("openGidlist")
      if (value!=undefined||value!=null) {
       console.log(value);
        if (value.date != dateStr || value.Gidlist == undefined || value.Gidlist==null){
          wx.setStorageSync("openGidlist", { date: dateStr, Gidlist: [] });
        }
      }
      //設置開啟ShareTicket
  wx.showShareMenu({
      withShareTicket: true
    })
 }

獲取個人運動數(shù)據(jù)

onShow: function () {
wx.getWeRunData({
      success: function (res) {
        console.log(res);
        let session_key = wx.getStorageSync("session_key");
        console.log(session_key);
        sportsource.getsportdata(res, session_key).then(function (data) {
          console.log(data);
          that.setData({ todaysportcount: data.data.stepInfoList[30].step });
        })
       
      }
    })
  }

分享時獲取群id

 onShareAppMessage: function () {
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
        : nowDate.getMonth() + 1;
      var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
        .getDate();
      var dateStr = year + "-" + month + "-" + day;
      var that=this;
      return {
        title: "我已經(jīng)運動了" + this.data.todaysportcount+"步，你敢來PK嗎？",
        path: "pages/sportpk/sportpk",
        success: function (res) {
          var shareTickets = res.shareTickets;
          if (shareTickets.length == 0) {
            return false;
          }
          console.log("shareTickets"+shareTickets[0]);

          wx.getShareInfo({
            shareTicket: shareTickets[0],
            success: function (res) {
              var encryptedData = res.encryptedData;
              var iv = res.iv;
              console.log(res);
              let session_key = wx.getStorageSync("session_key");
              sportsource.getsportdata(res, session_key).then(function (data) {
                console.log(data);
                let openGid = data.data.openGId;
                that.setData({ openGid: openGid});
                let openid = that.data.openid;
                let todaysportcount = that.data.todaysportcount;
                let avatarUrl = that.data.userInfo.avatarUrl;
                let nickname = that.data.userInfo.nickName;
                if (todaysportcount == undefined || todaysportcount==null){
                  wx.showToast({
                    title: "請重新打開運動權(quán)限",
                    duration: 2000
                  })
                  return
                }
                if (avatarUrl == undefined || avatarUrl == null || nickname == undefined || nickname==null) {
                  wx.showToast({
                    title: "請先點擊頭像登錄",
                    duration: 2000
                  })
                  return
                }
                // let openGidlist = that.data.openGidlist;
                let openGidlist = wx.getStorageSync("openGidlist");
                openGidlist.Gidlist.push(openGid);
                openGidlist.Gidlist = [...new Set(openGidlist.Gidlist)]
                console.log("---------------------------------------");
                console.log("openGidlist.Gidlist" + openGidlist.Gidlist);
                 console.log("---------------------------------------");
                wx.setStorageSync("openGidlist", { date: dateStr, Gidlist: openGidlist.Gidlist});
                sportsource.creategroupsport({
                   openGid,
                   openid,
                   todaysportcount,
                   avatarUrl,
                   nickname
                   }).then(function(){
                     that.setData({ sharegroupdata: [] });
                     that.getfirstgroupsport();
                   })

              })

            }
          })
        },
        fail: function (res) {
          // 轉(zhuǎn)發(fā)失敗
        }
      }
    }

刷新群內(nèi)pk

 getfirstgroupsport: async function () {
    var that = this;
    let openGidlist = wx.getStorageSync("openGidlist");
    if (openGidlist.Gidlist != undefined || openGidlist.Gidlist != null) {
      if (openGidlist.Gidlist.length > 0) {
        for (let i in openGidlist.Gidlist) {
          let data = await sportsource.getgroupsport(openGidlist.Gidlist[i]);
          console.log(data);
          let sharegroupdata = that.data.sharegroupdata;
          sharegroupdata.push(data.data.rows);
          that.setData({ sharegroupdata: sharegroupdata })
        }

      }
    }
  },

點擊分享鏈接獲取shareTicket，通過鏈接進入小程序的場景值是1044

app.js
onShow (opt){
  console.log("opt.scene" + opt.scene);
  if (opt.scene==1044){
    this.globalData.shareTicket = opt.shareTicket;
  }
},

后端采用的是koa2，通過sequelize.js實現(xiàn)與mysql的連接。

function getOpenId(code) {
  console.log(code);
  return new Promise((resolve, reject) => {
      const id = ""; // AppID(小程序ID)
      const secret = "";// AppSecret(小程序密鑰)
      let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${id}&secret=${secret}&js_code=${code}&grant_type=authorization_code`;
    axios.get(url).then(function (response) {
        console.log("response.data:"+response.data);
        resolve(response.data);
      })
      .catch(function (error) {
        console.log(error);
        reject(error);
      });

})
}
async function login(ctx) {
  const {code} = ctx.query;
  const data = await getOpenId(code);
  ctx.body = data;

}

這兩個數(shù)據(jù)屬于隱私數(shù)據(jù)，需要用算法解密，具體的流程，微信開發(fā)手冊上有，我就不多說了，需要用到上一步的session_key來解密。

//WXBizDataCryptconst：微信提供的解密方法
WXBizDataCryptconst WXBizDataCrypt = require("./WXBizDataCrypt")

var appId = "";
async function getsportdata(ctx) {
  var encryptedData=ctx.query.encryptedData;
  var iv=ctx.query.iv;
  var session_key=ctx.query.session_key;
  console.log("session_key"+session_key);
  var pc = new WXBizDataCrypt(appId,session_key);

  var data = pc.decryptData(encryptedData,iv);

  console.log("解密后 data: ", data);
  ctx.body={
    success:true,
    data:data
  }
}

當用戶分享自己的運動數(shù)據(jù)到微信群內(nèi)時或者微信群內(nèi)其他用戶通過該鏈接進入小程序時，后端將獲創(chuàng)建或者更新該用戶的群內(nèi)運動數(shù)據(jù)。

const creategroupsport = async function(data){ // 給某個用戶創(chuàng)建一條群運動記錄
  let nowDate = new Date();
  let year = nowDate.getFullYear();
  let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
    : nowDate.getMonth() + 1;
  let day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
    .getDate();
  let dateStr = year + "-" + month + "-" + day;
  var countdata = await Todolist.findAndCount({
    where:{openGid:data.openGid,createdate:dateStr,openid: data.openid}
  })
  var count=0;
  if(countdata!=undefined||countdata!=null) {
      count = countdata.count;
  }
  if(count==0) {
    await Todolist.create({
      openGid: data.openGid,
      openid: data.openid,
      todaysportcount: data.todaysportcount,
      createdate: dateStr,
      avatarUrl: data.avatarUrl,
      nickname: data.nickname
    })
  }
  else {
    await Todolist.update({
      todaysportcount: data.todaysportcount,
      avatarUrl: data.avatarUrl,
      nickname: data.nickname,
      openid: data.openid,
    },{
      where:{
        id:countdata.rows[0].id

      }
    })
  }
  return true
}

//讀取群內(nèi)運動數(shù)據(jù)
const getgroupsport = async function(openGid){
  console.log("openGid"+openGid);
  let nowDate = new Date();
  let year = nowDate.getFullYear();
  let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
    : nowDate.getMonth() + 1;
  let day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
    .getDate();
  let dateStr = year + "-" + month + "-" + day;
  const data= await Todolist.findAndCount({
    where:{openGid:openGid,createdate:dateStr},
    order: [
      ["todaysportcount", "DESC"]
    ]
  })
  console.log(data);
  return data;
}

對用戶發(fā)布的動態(tài)，后臺目前主要有 增，改，查三類方法，我說一下分頁查詢。

const findallnotice = async function(ctx){ // 查詢所有
    let pageno=ctx.pageno;
    let pagesize=ctx.pagesize;
    console.log(pageno,pagesize);
 const data= await Todolist.findAndCount({
            where: {state:1},
            offset:(pageno - 1) * pagesize,//開始的數(shù)據(jù)索引，比如當page=2 時offset=10 ，而pagesize我們定義為10，則現(xiàn)在為索引為10，也就是從第11條開始返回數(shù)據(jù)條目
            limit:pagesize*1//每頁限制返回的數(shù)據(jù)條數(shù)
       })
 console.log(data);
  return data;
}

const findmynotice = async function(ctx){ // 查詢自己的
  let pageno=ctx.pageno;
  let pagesize=ctx.pagesize;
  let uid=ctx.openid;
  console.log(pageno,pagesize,uid);
  const data= await Todolist.findAndCount({
    where:{uid:uid},
    offset:(pageno - 1) * pagesize,//開始的數(shù)據(jù)索引，比如當page=2 時offset=10 ，而pagesize我們定義為10，則現(xiàn)在為索引為10，也就是從第11條開始返回數(shù)據(jù)條目
    limit:pagesize*1//每頁限制返回的數(shù)據(jù)條數(shù)
  })
  console.log(data);
  return data;
}

我洋洋灑灑寫了幾千字，看上去舉重若輕，但是在實際開發(fā)中經(jīng)常會碰見各種各樣的問題，該項目從原型設計與開發(fā)到部署都是我獨自完成的，中間也踩了一些坑，這個項目最終沒能上線，是因為，個人主體賬號不能發(fā)布關于GUC的小程序。

本文首發(fā)于我的個人博客： https://www.catac.cn，轉(zhuǎn)載時請注明來源，

該項目源碼地址：https://github.com/ouminglian...

也歡迎各位與我交流，個人QQ:2541511219