小程序入坑（一）list列表以及item详情页，json传送时间戳转换成年月日

小程序和html、css、js大同小异，但是有些地方还是有差别的，比如js。。

从后台接收到一串json数据，利用block滚动，形成list列表页，之后点击列表中的某一项，进入详情页。然后从后台接收到数据后有点懵了，时间date变成了一大串数字（其实是json自动给转换成时间戳了）是什么鬼啊。。然后随便翻了翻uitl.js，发现小程序官方demo中自带转换（还是很暖心的，虽然保存登录态那一块挺坑的）

效果：

代码：

list.wxml:其中。

<navigator url='../list/item?id={{item.consumption_id}}'>

相当重要，这个就涉及到小程序页面跳转传值的问题，通过这个传值，我们可以在另一个页面的onload方法中得到这个id

<view class='container'>
  <loading hidden="{{!loading}}">加载中</loading>

  <block class="" wx:for="{{list}}" wx:key="id">
    <navigator url='../list/item?id={{item.consumption_id}}'>
      <view hover-class='hover-class' id="{{item.consumption_id}}" style='display:flex; height:120px;border-bottom: 1px solid #DBDBDB'>
        <!--左边图片-->
        <view style='width:128rpx; height:128rpx; margin:20rpx;'>
          <image class='index-logo' style='width:128rpx; height:128rpx' src="{{item.merchant_photo}}"></image>
        </view>
        <!-- 右边内容 上下结构 -->
        <view style='display:flex; flex-direction:column; margin:20rpx;'>
          <label class='item_title'>{{item.consumption_money}}</label>
          <label class='item_content'>{{item.consumption_project}}</label>
          <!-- 右边底部内容 左右结构 -->
          <view style='display:flex; flex-direction:row; height:40rpx;'>
            <label class='item_from'>{{item.merchant_name}}</label>
            <label class='item_time'>{{item.consumption_date}}</label>
          </view>
        </view>
      </view>
    </navigator>
  </block>
</view>

list.wxss:

.item_content{
  width: 90%;
  height: 100rpx;
  font-size: 11pt;
  color: #888;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
}
.item_from{
  width: 550rpx;
  font-size: 10pt;
  color: #999;
}
.item_time{
  width: 100%;
  font-size: 10pt;
  color: #999;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 40rpx;
}
.hover-class{
  background-color: #A4D3EE;
}

list.js：

//声明js
var time=require('../../utils/util.js')
var app = getApp();
Page({
  data: {
//全局变量
     list: [],
//加载样式是否显示
         loading: true
  },
  
  onLoad: function (options) {
    var that = this       //很重要，一定要写
    wx.request({
      url: '',//和后台交互的地址，默认是json数据交互，由于我的就是json，这里就没有对header进行编写
      data: {},
      method: 'POST',
      success: function (res) {
        var datas=res.data;//res.data就是从后台接收到的值
        for(var i=0;i<datas.length;i++){//用for循环把所有的时间戳都转换程时间格式，这里调用的是小程序官方demo中带的方法，
          datas[i]["consumption_date"] = time.formatTime(new Date(datas[i]["consumption_date"]))
        }
        that.setData({//循环完后，再对list进行赋值
          list: datas,
          loading: false
        })
      },
      fail: function (res) {
        console.log('submit fail');
      },
      complete: function (res) {
        console.log('submit complete');
      }
    })
  }
})

这里着重讲一下js文件。

var time=require('../../utils/util.js')

是调用一下这个js，这个js文件里有一个小程序原生的时间戳转换格式。util.js里的

module .exports = {

formatTime: formatTime,

}

也很重要。

官方程序中的时间戳转换方法就是，

time.formatTime(new Date(你的时间参数))

下面是官方demo中的util.js方法，我也把代码贴出来吧

util.js：

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, ].map(formatNumber).join(':')
}
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
module.exports = {
  formatTime: formatTime,
}

相比较之下，item里的日期转换就要简单一点

item.wxml:

<view class='container' style='display:block;'>
  <view class='item'>
    <view class='left'>时间</view>
    <view class='right'>{{list.consumption_date}}</view>
  </view>
  <view class='item'>
    <view class='left'>项目</view>
    <view class='right'>{{list.consumption_project}}</view>
  </view>
  <view class='item'>
    <view class='left'>技师</view>
    <view class='right'>{{list.consumption_technician}}\t号技师</view>
  </view>
  <view class='item'>
    <view class='left'>店铺</view>
    <view class='right'>{{list.merchant_name}}</view>
  </view>
  <view class='item'>
    <view class='left'>订单号</view>
    <view class='right'>0012003400560078</view>
  </view>
  <view class='item'>
    <view class='left'>总金额</view>
    <view class='right'>{{list.consumption_money}}\t元</view>
  </view>
  <view class='item'>
    <view class='left'>优惠金额</view>
    <view class='right'>0\t元</view>
  </view>
  <view class='item'>
    <view class='left'>实付金额</view>
    <view class='right'>{{list.consumption_money}}\t元</view>
  </view>
</view>

item.wxss:

.item{
  width: 100%;
  margin-top: 10rpx; 
  font-size: 30rpx;
  display: flex;
  height: 80rpx;
  border-bottom: 1px solid #DBDBDB;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.left{
  padding-left: 30rpx;
  color: #A9A9A9;
}
.right{
  padding-right: 30rpx;
}

item.js:

var time = require('../../utils/util.js')
var app = getApp();
Page({
  data: {
    list: {},
    loading: true
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
      url: ''+options.id,//options.id是从list页面跳转过来带的参数，可以用来url拼接。比如根据id查询啊什么的
     data: {},
      method: 'POST',
      success: function (res) {
        console.log(res.data);
var datas = res.data;        
datas["consumption_date"] = time.formatTime(new Date(datas["consumption_date"]))        
that.setData({          
list: datas,          
loading: false       
 })      
},      
fail: function (res) {        
console.log('submit fail');      
},      
complete: function (res) {        
console.log('submit complete');      
}    
})  
}
}
)