小程序获取微信运动步数并集成echarts报表显示_微信小程序 实现微信运动显示所有数据

需求

现在运动计步非常的火，大家常用的计步工具一般有keep、咕咚、微信运动和其他移动设备等，本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来。

先看一下最终实现效果：

微信运动规则

在开发之前需要了解一下微信运动信息的使用规则，这样会规避掉很多问题。
1、微信运动数据必须在微信生态内获取，即小程序、公众号等，且需要用户进行授权。
2、用户主动进入小程序时可以获取到最近30天的运动数据，且一次性获取全部，不能获取指定时间段内的运动数据。
3、目前只能获取到运动“步数”，其他的获取不到（例如：卡路里、公里数、运动轨迹等）。

实现步骤

如果要实现上图示例中的效果需要完成一下几个步骤：

1、调用小程序API：wx.login获取code和sessionKey；
2、调用小程序API：wx.getWeRunData 获取微信运动数据（加密）；
3、调用后端API将运动数据进行解密（Java）；
4、小程序集成echarts.js 实现线状图展示；
1
2
3
4

小程序代码（原生）

第一步：配置页面

在app.json 文件pages内增加WeRunData配置将会自动创建WeRunData.js、WeRunData.json、WeRunData.wxml和WeRunData.wxss 四个文件。

"pages":[
    "pages/WeRunData/WeRunData"
],
1
2
3

第二步：获取微信授权

var app = getApp()
var userInfo = null;
Page({
  globalData: {
    appid: 'wx4167******16a0a1',//appid需自己提供，此处的appid我随机编写
    secret: '5498fcab20f********df26bf854ba89',//secret需自己提供，此处的secret我随机编写
  },
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    encryptedData:null,
    sessionkey:null,
    iv:null
  },
  onLoad: function () {
    var that = this;
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    //登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
    wx.login({
      success: function (res) {
        if (res.code) {
          console.log("res.code:" + res.code);
          var d = that.globalData;//这里存储了appid、secret、token串  
          var l = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + d.ap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49