小程序微信运动时间戳格式转换+列表渲染微信运动数据

首先来看一下项目中的微信运动页面。

通过官方开发文档我们能够获取到微信运动步数，但是发现里边的时间戳并不是想要去在开发项目时使用的，需要将时间戳转换为年月日，然后再显示在前端页面，先来理清一下思路。

用户授权获取微信运动数据
将获取到的微信运动数据数组中的时间戳转换格式
重新绑定数据渲染

接下来我们正式进入开发过程。

用户授权获取微信运动数据

//定义函数，用于读取用户的微信运动数据getUserRun() {var that = thiswx.getSetting({success(res) {if (!res.authSetting['scope.address.werun']) {//申请用户授权wx.authorize({scope: 'scope.werun',success(res) {console.log('允许', res)//读取用户的微信运动数据that.getWeRunData()},fail(err) {console.log('不允许', err)//如果用户禁止授权,应该提示用户必须授权才能获取受信任的运动数据，并提示如何开启授权wx.showModal({title: '读取微信运动数据失败',content: '请在小程序右上角[设置]中开启授权'})}})} else {//读取用户的微信运动记录that.getWeRunData()}}})},

然后我们来定义一个时间戳转换函数

//时间戳转换-函数封装formatDate: function (inputTime){var date = new Date(inputTime);var y = date.getFullYear();var m = date.getMonth() + 1;m = m < 10 ? ('0' + m) : m;var d = date.getDate();d = d < 10 ? ('0' + d) : d;return y + "年" + m + '月' + d + '号';},

最后我们定义函数读取用户微信运动数据，并将时间戳转换格式（此处我使用云函数进行数据解密）。

//定义函数读取用户微信运动数据getWeRunData() {var that = thiswx.getWeRunData({success(res) {//由于数据是进行加密的所以我们通过云函数的方式进行解密wx.cloud.callFunction({name: 'deswerundata',data: {weRunData: wx.cloud.CloudID(res.cloudID)//这个cloudID值到云函数端会被替换}}).then(res => {console.log('微信运动数据请求成功', res.result.weRunData.data.stepInfoList)//将返回的数据赋值给data中的数组var timestamps = []//定义存储时间戳数组var steps= []//定义步数数组let stepInfoList = res.result.weRunData.data.stepInfoList//将请求回来的数组数据赋值stepInfoList.forEach(function(item,index){//forEach循环遍历二维数组timestamps.push(item.timestamp)//将遍历的每个数组中的时间戳追加到timestamps数组中steps.push(item.step)//将遍历的每个数组中的步数追加到steps数组中})that.setData({//将遍历数组赋值给data中的timestamp数组timestamp:timestamps})var time1 = []//再次定义一个空数组用来存放转换时间格式后的时间数组for(var i=0;i<that.data.timestamp.length;i++){//循环遍历var time = that.formatDate((that.data.timestamp[i])*1000)//传参给时间戳转换函数time1.push(time)//将遍历的每个时间戳转换格式后追加到time1数组中}console.log(time1)//打印转换后时间var wx_stepinfo = []//定义一个空的二维数组for(let i=0,len=time1.length;i<len;i++){//循环遍历let data1 ={//将遍历的数组中的每个数据赋值给data1step:steps[i],timestamp:time1[i]}wx_stepinfo.push(data1)//将data1中的数据追加到wx_stepinfo二维数组中}console.log(wx_stepinfo)//打印二维数组that.setData({//将转换格式后的二维数组重新赋值给data中的stepInfoListstepInfoList:wx_stepinfo})}).catch(res => {console.log('微信运动数据请求失败', res)})},})},

这时基本上我们就完成了微信运动时间戳格式的转换。下边是完整代码。

wxml

<view class="content"><image class="background" src="https://6368-chengquanyou-8gafoweg6b0bba01-1305079593.tcb.qcloud.la/background/QQ%E5%9B%BE%E7%89%8720210429222435.jpg"></image><scroll-view class="wxrun" scroll-y="true"><view class="wxrun_list" wx:for="{{stepInfoList}}"><view class="wxrun_list1">步数  <text>{{item.step}}</text>  步</view><view class="wxrun_list2">{{item.timestamp}}</view></view></scroll-view>
</view>

wxss

Page{height: 100%;
}
.content{width: 100%;height: 100%;
}
.background{width: 100%;height: 478rpx; /* z-index: -1;background-size:100% 100%; */
}
.wxrun{width: 100%;background-color: #ffffff;
}
.wxrun_list{width: 100%;height: 118rpx;border-bottom: 1rpx solid #DCDCDC;display: flex;flex-direction: row;align-items: center;
}
.wxrun_list1{font-size: 24rpx;margin-left: 80rpx;
}
.wxrun_list1 text{font-size: 36rpx;font-weight: 400;color: #FF8C00;
}
.wxrun_list2{font-size: 24rpx;flex: 1;text-align: right;margin-right: 50rpx;color: #B5B5B5;
}

Page({/*** 页面的初始数据*/data: {stepInfoList: [],//定义请求微信运动数据列表数组(带时间戳)timestamp:[],//定义转换时间格式空数组step:[],//定义步数数组},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getUserRun()},//定义函数，用于读取用户的微信运动数据getUserRun() {var that = thiswx.getSetting({success(res) {if (!res.authSetting['scope.address.werun']) {//申请用户授权wx.authorize({scope: 'scope.werun',success(res) {console.log('允许', res)//读取用户的微信运动数据that.getWeRunData()},fail(err) {console.log('不允许', err)//如果用户禁止授权,应该提示用户必须授权才能获取受信任的运动数据，并提示如何开启授权wx.showModal({title: '读取微信运动数据失败',content: '请在小程序右上角[设置]中开启授权'})}})} else {//读取用户的微信运动记录that.getWeRunData()}}})},//定义函数读取用户微信运动数据getWeRunData() {var that = thiswx.getWeRunData({success(res) {//由于数据是进行加密的所以我们通过云函数的方式进行解密wx.cloud.callFunction({name: 'deswerundata',data: {weRunData: wx.cloud.CloudID(res.cloudID)//这个cloudID值到云函数端会被替换}}).then(res => {console.log('微信运动数据请求成功', res.result.weRunData.data.stepInfoList)//将返回的数据赋值给data中的数组var timestamps = []//定义存储时间戳数组var steps= []//定义步数数组let stepInfoList = res.result.weRunData.data.stepInfoList//将请求回来的数组数据赋值stepInfoList.forEach(function(item,index){//forEach循环遍历二维数组timestamps.push(item.timestamp)//将遍历的每个数组中的时间戳追加到timestamps数组中steps.push(item.step)//将遍历的每个数组中的步数追加到steps数组中})that.setData({//将遍历数组赋值给data中的timestamp数组timestamp:timestamps})var time1 = []//再次定义一个空数组用来存放转换时间格式后的时间数组for(var i=0;i<that.data.timestamp.length;i++){//循环遍历var time = that.formatDate((that.data.timestamp[i])*1000)//传参给时间戳转换函数time1.push(time)//将遍历的每个时间戳转换格式后追加到time1数组中}console.log(time1)//打印转换后时间var wx_stepinfo = []//定义一个空的二维数组for(let i=0,len=time1.length;i<len;i++){//循环遍历let data1 ={//将遍历的数组中的每个数据赋值给data1step:steps[i],timestamp:time1[i]}wx_stepinfo.push(data1)//将data1中的数据追加到wx_stepinfo二维数组中}console.log(wx_stepinfo)//打印二维数组that.setData({//将转换格式后的二维数组重新赋值给data中的stepInfoListstepInfoList:wx_stepinfo})}).catch(res => {console.log('微信运动数据请求失败', res)})},})},//时间戳转换-函数封装formatDate: function (inputTime){var date = new Date(inputTime);var y = date.getFullYear();var m = date.getMonth() + 1;m = m < 10 ? ('0' + m) : m;var d = date.getDate();d = d < 10 ? ('0' + d) : d;return y + "年" + m + '月' + d + '号';},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

小程序微信运动时间戳格式转换+列表渲染微信运动数据相关推荐

微信小程序之 js 时间戳/1000 转换秒，六个小时后，一天后，本周五选项计算时间
1.js取当前时间的秒级时间戳 parseInt(new Date().getTime()/1000);, //或 Date.parse(new Date())/1000; 2.将当前日期转换为时间戳 ...
微信小程序详解(4.运算符和列表渲染)
运算符介绍运算符的意义就不必我多讲了把,主要就是为了简便计算,优化代码,给代码增强了逻辑性,让我们的运算都方便. 通常来说,我们运算的方式都是依赖于这些运算符的作用,它们就像一个链接,把数据链接起 ...
视频教程-微信小程序商城15天从零实战课程-微信开发
微信小程序商城15天从零实战课程 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥499.00 立即订阅 ...
关于微信小程序iOS端时间格式兼容问题
关于微信小程序iOS端时间格式兼容问题在自己开发中,当时间格式为 2020-06-29 08:00 ,需要将时间转为其他格式时,Android端转换成功,iOS端报错或是转为NaN. 解决方法: 1 ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
AI微信小程序源码下载照片AI转换动漫照片源码安装简单无需服务器域名
这是一款转动漫脸的一款微信小程序源码该款小程序源码无需服务器和域名搭建安装简单有多种风格转换模式可自选安装教程: 首先解压源码然后把源码上传到微信开发者工具打开另外设置一个合法域名合法域名 ...
借助云开发，利用订阅消息，云函数路由实现小程序好友一对一聊天，添加好友等仿微信功能
微信小程序借助云开发,利用订阅消息,云函数路由实现小程序好友一对一聊天,添加好友等仿微信功能这篇文章已经进行了更新,请点此进行查看仿微信好友聊天主要功能有后续可能补充功能详细介绍注意保存 ...
微信小程序是什么？如何快速搭建一个微信小程序？
目录一.微信小程序是什么二.安全管理三.微信小程序的功能四.快速开发一个微信小程序APP 1.集成即构实时音视频SDK 2.初始化SDK引擎 3.创建房间与登录房间 4.房主创建房间 5.推流 ...
《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...

小程序微信运动时间戳格式转换+列表渲染微信运动数据

小程序微信运动时间戳格式转换+列表渲染微信运动数据相关推荐

最新文章

热门文章