时间戳转换成日期时间

当我们的接口提供时间戳时:

在小程序前端需要将时间戳转换成日期时间。
js:

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送网络请求，获取真实动态列表
    wx.request({
      url: 'http://127.0.0.1:8000/app/dynamics/',
      //success是数据请求成功之后的回调函数
      success:res=>{
        res.data.forEach(item => {  //item是数组里的每一个对象，通过修改item，将时间戳转换为日期时间
          var time = item.d_posttime*1000
          var d = new Date(time);  //获取英文的日期
          var year = d.getFullYear();  //获取四位数年份
          var month = (d.getMonth()+1)<10 ? "0"+(d.getMonth()+1): (d.getMonth()+1) ; //获取月份时，需要加1，因为获取到的月份为0~11
          var day = d.getDate()<10 ? "0"+(d.getDate()) :(d.getDate()) ;
          var posttime = `${year}-${month}-${day}`
          item.d_posttime=posttime
        });
        console.log(res.data)
        this.setData({
          dataList:res.data
        })
      }
    })
  },

这样就能显示转换后的时间了。

携带参数访问接口

现在限制每次请求返回的数量为5条，所以需要携带page参数给后端，这样才能调整数据分片:

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送网络请求，获取真实动态列表
    wx.request({
      url: 'http://127.0.0.1:8000/app/dynamics/',
      data:{page:2},
      //success是数据请求成功之后的回调函数
      success:res=>{
        res.data.results.forEach(item => {  //item是数组里的每一个对象，通过修改item，将时间戳转换为日期时间
          var time = item.d_posttime*1000
          var d = new Date(time);  //获取英文的日期
          var year = d.getFullYear();  //获取四位数年份
          var month = (d.getMonth()+1)<10 ? "0"+(d.getMonth()+1): (d.getMonth()+1) ; //获取月份时，需要加1，因为获取到的月份为0~11
          var day = d.getDate()<10 ? "0"+(d.getDate()) :d.getDate() ;
          var posttime = `${year}-${month}-${day}`
          item.d_posttime=posttime
          console.log(item)
        });

        this.setData({ //使用setData将真实数据放入data数组，以便于让
          dataList:res.data.results
        })
      }
    })
  },

在wx.request中添加data字典，字典内为携带的参数，例如第8行。
10-20行的回调函数作用为将传输过来的接口数组中的时间戳转换成时间日期，
22-23行在转换完成之后替换字符串部分，这样渲染的页面就呈现普通的日期函数。

ES6封装公共函数使其模块化

时间戳转换的相关代码直接写在页面的js中会造成管理起来很麻烦，所以需要将这些公共函数封装起来方便管理和调用。

文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/require.html

utils介绍

项目中的utils文件夹的作用是公用文件夹，用来存放公共的js函数。
默认的utils文件夹中有默认的utils.js:

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  formatTime
}

这个代码的作用是用来提供给logs页面的时间转化时使用的。

现在有一个功能函数，想要时间标题超过十个字符，多余字符省略以省略号代替。
js:

        res.data.results.forEach(item=>{
          var title=item.d_title
          if(title.length>10){// 判断title的长度
            item.d_title = title.substr(0,10)+"..."// 只截取前十个字符串，后面加省略号
          }
        })

现在将函数模块化。

新建公共js文件

在utils文件夹中新建public.js文件，用来封装公共函数

module方法封装

https://developers.weixin.qq.com/miniprogram/dev/reference/api/module.html
public.js:

首先声明一个对象，内部用来填写方法名。

之后使用module.exports=common 来返回对象

var common={
//getStrLen用来判定字符是否超过一定长度
getStrLen:function(str,len){ //str接收字符串，len接收规定不能超过的长度
  if(str.length>len){
    return str.subtr(0,len)+"..."  //如果超过一定长度，就将超过的部分用省略号代替
  }else{
    return str //如果长度在范围之内，就返回自己
  }
  
}, // 用逗号来区分方法名
fetMyData:function (timestamp, formats) {
  // formats格式包括
  // 1. Y-m-d
  // 2. Y-m-d H:i:s
  // 3. Y年m月d日
  // 4. Y年m月d日 H时i分
  formats = formats || 'Y-m-d';

  var zero = function (value) {
      if (value < 10) {
          return '0' + value;
      }
      return value;
  };
  var timestamp = timestamp*1000;
  var myDate = timestamp? new Date(timestamp): new Date();

  var year = myDate.getFullYear();
  var month = zero(myDate.getMonth() + 1);
  var day = zero(myDate.getDate());

  var hour = zero(myDate.getHours());
  var minite = zero(myDate.getMinutes());
  var second = zero(myDate.getSeconds());

  return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
      return ({
          Y: year,
          m: month,
          d: day,
          H: hour,
          i: minite,
          s: second
      })[matches];
  });
}
}

module.exports=common

也就是将公共函数整合进一个对象之中，之后在其他页面只需要调用对象中的方法即可。

调用封装的方法

index.js:
第一步在开头导入模块

import common from "../../utils/public.js";

第二步替换之前的函数:

wx.request({
      url: 'http://127.0.0.1:8000/app/dynamics/',
      data:{page:2},
      //success是数据请求成功之后的回调函数
      success:res=>{
        res.data.results.forEach(item => {  //item是数组里的每一个对象，通过修改item，将时间戳转换为日期时间
          item.d_posttime = common.fetMyData(item.d_posttime,"Y-m-d")
          item.d_title = common.getStrLen(item.d_title,24)
        });

        this.setData({ //使用setData将真实数据放入data数组，以便于让
          dataList:res.data.results
        })

这里只是演示公共方法的调用，css实现可参考text-overflow:wllipsis。

[微信小程序]二十七、时间戳的转换/ES6模块化封装公共函数