需求
现在运动界很热。大家常用的系谱工具一般是keep、蜂蜜、微信运动和其他移动设备等。本文是基于微信小程序获取和可视化用户的微信运动数据。(阿尔伯特爱因斯坦)(美国)。
先看一下最终实现效果：
微信运动规则
在开发之前需要了解一下微信运动信息的使用规则，这样会规避掉很多问题。
1、微信运动数据必须在微信生态内获取，即小程序、公众号等，且需要用户进行授权。
2、用户主动进入小程序时可以获取到最近30天的运动数据，且一次性获取全部，不能获取指定时间段内的运动数据。
3、目前只能获取到运动“步数”，其他的获取不到（例如：卡路里、公里数、运动轨迹等）。
实现步骤
如果要实现上图示例中的效果需要完成一下几个步骤：
1、调用小程序API：wx.login获取code和sessionKey；
2、调用小程序API：wx.getWeRunData 获取微信运动数据（加密）；
3、调用后端API将运动数据进行解密（Java）；
4、小程序集成ec 实现线状图展示；
小程序代码（原生）
第一步：配置页面
在a 文件pages内增加WeRunData配置将会自动创建WeRunDa、WeRunDaon、WeRunDa和WeRunDa 四个文件。
"pages":[
"pages/WeRunData/WeRunData"
],
第二步：获取微信授权
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('bu;),
encryptedData:null,
sessionkey:null,
iv:null
},
onLoad: function () {
var that = this;
if ) {
({
userInfo: a,
hasUserInfo: true
})
} else if ) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
a = res => {
({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
a = res.userInfo
({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
//登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
wx.login({
success: function (res) {
if ) {
con("res.code:" + res.code);
var d = ;//这里存储了appid、secret、token串
var l = '; + d.appid + '&secret=' + d.secret + '&js_code=' + res.code + '&grant_type=authorization_code';
wx.request({
url: l,
data: {},
method: 'GET',
success: function (res) {
var obj = {};
obj.openid = res.da;
con("openid:" + obj.openid);
con("session_key:" + res.da);
obj.expires_in = Da() + res.da;
({
sessionkey: res.da,
})
wx.setStorageSync('user', obj);//存储openid
wx.getWeRunData({
success(res) {
// 拿 encryptedData 到开发者后台解密开放数据
const encryptedData = res.encryptedData
con("encryptedData:" + encryptedData)
// 或拿 cloudID 通过云调用直接获取开放数据
const cloudID = res.cloudID
con("cloudID:" + cloudID)
con("iv:" + res.iv)
// 解密运动数据
({
encryptedData: res.encryptedData,
iv: res.iv
})
// 调用第三步去解密
();
}
})
}
});
} else {
con('获取用户登录态失败！' + res.errMsg)
}
}
});
},
getUserInfo: function (e) {
con(e)
a = e.de
({
userInfo: e.de,
hasUserInfo: true
})
}
})
第三步：解密运动数据
WeRunDa 解密
getEncryptedData: function () {
var that = this;
wx.request({
url: ';, // 这里需要去请求后端代码进行解密，示例中使用Java实现。
method: "POST",
data: {
encryptedData: ,
sessionkey: ,
iv:
},
header: {
"Content-Type": "application/json"
},
success: function (res) {
con("解密后的数据为：", res);
if == 200) {
let stepInfoList = res.da;
let data = [];
let categories = [];
for (let i = 0; i < ; i++) {
ca(stepInfoList[i].stepTime);
da(stepInfoList[i].step);
}
c = categories;
c = data;
// 调用第四步 可视化加载
();
}
}
})
},
第四步：集成ec 运动数据可视化
集成步骤可以参考Echarts官方步骤：
WeRunDa 渲染图表
import * as echarts from '../../ec-canvas/echarts';
var chartData = {
main: {
data: [], // 运动步数集合
categories: [] // 运动日期集合
}
};
//初始化图表
init_echarts: function () {
((canvas, width, height) => {
// 初始化图表
const Chart = ec(canvas, null, {
width: width,
height: height
});
C());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return Chart;
});
},
// 获取数据
getOption: function () {
var that = this
var legendList = []
var option = {
title: {
left: 'center'
},
color: ["#37A2DA"],
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: c
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [{
type: 'line',
smooth: true,
data: c
}]
};
return option
}
第五步：页面布局
WeRunDa
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 点击微信授权 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{u}}" background-size="cover"></image>
<text class="userinfo-nickname">{{u}}</text>
</block>
</view>
<view class="container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>
WeRunDa
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
background: #f0145a;
width: 100%;
height: 300rpx;
}
.userinfo-btn{
margin-top: 50rpx;
background: none !important;
color: #fff !important;
font-size: 40rpx;
}
.userinfo-avatar {
width: 108rpx;
height: 108rpx;
margin: 40rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #fff;
}
ec-canvas {
width: 100%;
height: 70%;
position: absolute;
margin-top: 300rpx;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
后端解密代码（Java）
Encry
// 解密微信运动数据
@ApiImplicitParam(name = "map",value = "{\"encryptedData\":\"001\",\"sessionkey\":\"2123\",\"iv\":\"111\"}" )
@PostMapping(value = "/getEncryptedData", produces = MediaTy)
public WxChartStepInfoDTO getEncryptedData(@RequestBody Map<String,String> map) {
String encryptedData = map.get("encryptedData");
String sessionkey = map.get("sessionkey");
String iv = map.get("iv");
// 被加密的数据
byte[] dataByte = Ba(encryptedData);
// 加密秘钥
byte[] keyByte = Ba(sessionkey);
// 偏移量
byte[] ivByte = Ba(iv);
try {
// 如果密钥不足16位，那么就补足
int base = 16;
if % base != 0) {
int groups = keyBy / base + % base != 0 ? 1 : 0);
byte[] temp = new byte[groups * base];
Arrays.fill(temp, (byte) 0);
Sy(keyByte, 0, temp, 0, keyBy);
keyByte = temp;
}
// 初始化
Securi(new BouncyCastleProvider());
Cipher cipher = Ci("AES/CBC/PKCS7Padding", "BC");
SecretKeySpec spec = new SecretKeySpec(keyByte, "AES");
AlgorithmParameters parameters = Algori("AES");
(new IvParameterSpec(ivByte));
ci, spec, parameters);// 初始化
byte[] resultByte = ci(dataByte);
if (null != resultByte && resultBy > 0) {
String result = new String(resultByte, "UTF-8");
Sy("result:" + result);
Gson gson = new Gson();
WxChartStepInfoDTO wxChartStepInfoDTO = g(result,WxC);
return wxChartStepInfoDTO;
}
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
} catch (NoSuchPaddingException e) {
e.printStackTrace();
} catch (InvalidParameterSpecException e) {
e.printStackTrace();
} catch (IllegalBlockSizeException e) {
e.printStackTrace();
} catch (BadPaddingException e) {
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (InvalidKeyException e) {
e.printStackTrace();
} catch (InvalidAlgorithmParameterException e) {
e.printStackTrace();
} catch (NoSuchProviderException e) {
e.printStackTrace();
}
return null;
}
WxC
@NoArgsConstructor
@Data
@ApiModel(value = "微信运动实体")
public class WxChartStepInfoDTO implements Serializable{
private static final long serialVersionUID = -4526066242748484991L;
private List<StepListBean> stepInfoList;
private WatermarkBean watermark;
@NoArgsConstructor
@Data
public static class StepListBean implements Serializable {
Long timestamp; // 运动日期
Integer step; // 运动步数
@JsonFormat(pattern = "MM-dd")
Date stepTime; // 运动日期（格式化为：yyyy-MM-dd HH:mm:ss）
public Date getStepTime() {
return S;yyyy-MM-dd HH:mm:ss");
}
}
@NoArgsConstructor
@Data
public static class WatermarkBean implements Serializable {
@ApiModelProperty(value = "同步微信运动时间")
private Long timestamp;
@ApiModelProperty(value = "appid",required = true)
private String appid;
@ApiModelProperty(value = "格式化运动时间")
@JsonFormat(pattern = "MM-dd")
Date time; // 运动日期（格式化为：yyyy-MM-dd HH:mm:ss）
public Date getTime() {
return S(timestamp,"yyyy-MM-dd HH:mm:ss");
}
}
}
最后
好了，小程序获取微信运动步数并集成ec 可视化实现的具体做法就分享到这里了。如果大家有不明白的可以留言，需要源码的话可以留下邮箱，小编有时间将会把源码发送给大家。
1.《【2123HH】专题小程序获取微信运动步数并可视化显示》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《【2123HH】专题小程序获取微信运动步数并可视化显示》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/guonei/2040672.html
