微信小程序截取变换后端请求过来的值,时间戳转时间

本文介绍如何在微信小程序中处理后端接口返回的复杂数据,通过wx:for循环实现字符串截取和时间戳转换,以正确渲染群组列表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

各位猿猿们有木有遇到这样的情况:在做前端的时候当请求到后端接口传过来的值,跟我们需要的不完全相同,我们不能直接渲染而要经过转换比如字符串截取啊,时间戳转时间啊等等。那我现在就以微信小程序为例,是一个wx:for循环然后请求过来的数据需要转换后渲染的例子。

效果图是这样的:

接口返回的数据是这样的:

这个就需要字符串截取,时间戳的转换。而这个是在循环中的,wxml里写了wx:for  先贴一下wxml代码:

<view class="qun" bindtap="jrql" wx:for="{{qunList}}" wx:if="{{item.is_audit==0}}" wx:key="index" bindtap="jrql" data-id="{{item.id}}">
		<view class="qun_ys1">
			<image class="qun_tx" src="{{item.group_img + '?imageView2/1/w/200/h/200|imageslim'}}" mode="widthFix"></image>
			<view class="qun_ys2">
				<view class="qun_ys3">
					<view class="qun_mc">{{item.group_name}}</view>
					<view class="qun_sj">{{item.creatTime}} </view>
				</view>
				<view class="qun_hh">{{item.tongzhi}} </view>
			</view>
		</view>
		<view class="qun_hd" wx:if="{{item.activity_name!=null}}">
			<view class="hd_ys">
				<image class="hd" src="../../images/hd.png"></image>
				<view class="hd_mc">{{item.activity_name}} </view>
			</view>
			<image class="jr" src="../../images/jr.png"></image>
		</view>
	</view>

然后js我是这样写的:

//首页群List(已登录状态)
  getLoginList() {
    let that = this; //避免this生命周期短,到下面访问不到
    request({  //这种请求方式是在工具 utils中封装了的
      url: "?s=App.User.UserGroup", //请求接口
      method: "post"
    }).then(res => {
      console.log(res); //这里打印出请求结果,在控制台可以看到
      let qunList = res.data.data.data;
      let creatTime = ''; //这个为了下面转换格式先声明 时间
      let tongzhi = ''; // 声明 通知
      qunList.forEach((element, index) => { //通过foreach循环 给它传上 element index 两个值
        tongzhi = element.group_log.split(",")[1]; //字符串截取用 split ("") 第一个为通知
        creatTime = element.group_log.split(",")[0]; //第0个为时间戳
        creatTime = util.formatTimeTwo(creatTime, "Y-M-D h:m"); //时间戳转时间 这里之前导入了utils里面的 formatTimeTwo方法
        qunList[index].tongzhi = tongzhi; //将变换之后的tongzhi 赋给数组中的每一个tongzhi
        qunList[index].creatTime = creatTime; //将变换之后的creatTime赋给数组中的每一个creatTime
        return element.tongzhi, element.creatTime //最后用return 返回
      });
      that.setData({
        qunList: qunList //用setData 把数组赋给data里面
      })
    })
  },

再来贴一下util里面的时间戳转时间的方法

function formatTimeTwo(number, format) {

  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];

  var date = new Date(number * 1000);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));

  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));

  for (var i in returnArr) {
    format = format.replace(formateArr[i], returnArr[i]);
  }
  return format;
}

module.exports = {
  formatTimeTwo: formatTimeTwo // 时间戳转日期
}

然后使用页面的头部要导入

var util = require("../../utils/util.js");

好啦,就这么多,如有不足,望指教!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值