国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序實現運動步數排名與發布個人動態&服務器部署

laoLiueizo / 1290人閱讀

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

1. 項目規劃

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

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

2. 支撐技術點分析 2.1 七牛云存儲

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

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

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

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

引入官方開發文件：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", // 華東區 根據存儲區域填寫
    //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值，加上七牛給你的外鏈域名，這樣，你就可以顯示文件了。

2.2 服務器與域名

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

遠程連接部署項目（安裝環境，運行后臺，域名解析，外網訪問）

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

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

購買SSL證書

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

阿里有對單域名免費的證書，時間為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 server
https.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與運動步數 與同一微信群的用戶進行pk

4）每次分享或點擊分享鏈接，系統將自動更新該用戶的運動步數

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

技術點：

1）獲取用戶運動步數

2）獲取群id

3) 各群之間間運動數據隔離

效果如下圖所示

授權后顯示步數。

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

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

  
  onLoad: function (opt) {
      //在storage中創建用戶的當日分享情況 也就是分享到了哪些群，將這些群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
    })
 }

獲取個人運動數據

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: "我已經運動了" + 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: "請重新打開運動權限",
                    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) {
          // 轉發失敗
        }
      }
    }

刷新群內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;
  }
},

5. 后端開發

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

5.1 獲取用戶openid與session_key 
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;

}
5.2 運動數據與群id數據獲取

這兩個數據屬于隱私數據，需要用算法解密，具體的流程，微信開發手冊上有，我就不多說了，需要用到上一步的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
  }
}
5.3 創建與讀取運動數據

當用戶分享自己的運動數據到微信群內時或者微信群內其他用戶通過該鏈接進入小程序時，后端將獲創建或者更新該用戶的群內運動數據。

const creategroupsport = async function(data){ // 給某個用戶創建一條群運動記錄
  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
}
//讀取群內運動數據
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;
}
5.4 動態的獲取

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

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,//開始的數據索引，比如當page=2 時offset=10 ，而pagesize我們定義為10，則現在為索引為10，也就是從第11條開始返回數據條目
            limit:pagesize*1//每頁限制返回的數據條數
       })
 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,//開始的數據索引，比如當page=2 時offset=10 ，而pagesize我們定義為10，則現在為索引為10，也就是從第11條開始返回數據條目
    limit:pagesize*1//每頁限制返回的數據條數
  })
  console.log(data);
  return data;
}
6. 總結

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108695.html

相關文章

  • 庫&amp;插件&amp;框架&amp;工具

    摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

    Codeing_ls 評論0 收藏0

  • 庫&amp;插件&amp;框架&amp;工具

    摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

    xiaowugui666 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<