uniapp小程式擷取時間戳轉換時間例子

日常開發中經常會遇到時間相關的問題，服務端傳回的資料都是以時間戳的方式，那麼需要将其處理轉化為對應的時間格式，具體方式如下：

HTML:

<view class="today-focus">
      <view class="content-view">
            <view class="article-item" v-for="item in itemFocus">
                  <view class="article-img"><image :src="item.thumb"></image></view>
                  <view class="article-con">
                        <view class="article-title">{{item.title}}</view>
                        <view class="article-description">
                            <view class="time">{{item.inputtime}}</view>
                            <view class="source">{{item.catname}}</view>
                            <view class="read-num"><image src="../../static/images/read-icon.png"></image>{{item.listorder}}</view>
                        </view>
                  </view>
            </view>    
     </view>    
</view>
      

  css:

.today-focus{
    background-color: #f4f3f3;
    margin-top:20rpx;
    width: 750rpx;
}
.today-tit{
    color: #e70c0c;
    font-size: 38rpx;
    border-bottom:1rpx #cccccc solid;
    height: 60rpx;
    line-height: 60rpx;
    font-weight: 550;
}
.article-item{
    height: 187rpx;
    border-bottom: 1rpx #cccccc solid;
    margin-top:30rpx;
}
.article-img image{
    width: 230rpx;
    height: 156rpx;
    float: left;
}
.article-con{
    float: left;
    width: 460rpx;
    height: 156rpx;
    margin-left:20rpx;
}
.article-title{
    font-size: 30rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article-description{
    font-size: 24rpx;
    margin-top:38rpx;
    color: #b0b0b0;
}
.time{
    float: left;
    }
.source{
    float: left;
    border-radius: 5rpx;
    border:1rpx #ed6c00 solid;
    color: #ed6c00;
    width: 100rpx;
    text-align: center;
    height:38rpx;
    line-height: 38rpx;
    margin-left:20rpx;
}
.read-num{
    float: right;
}
.read-num image{
    width: 22rpx;
    height: 15rpx;
    margin-right:10rpx;
}      

script:     happenTimeFun（）方法實作

1 <script>
 3     export default {
 4         data() {
 5             return {  
                  itemFocus:[],
13             }
14         },
15         onLoad() {
this.getFocus();       
           },
21         methods: {    
             happenTimeFun(num){//時間戳資料處理
36                  let date = new Date(num * 1000);
37                 //時間戳為10位需*1000，時間戳為13位的話不需乘1000
38                 let y = date.getFullYear();
39                 let MM = date.getMonth() + 1;
40                 MM = MM < 10 ? (\'0\' + MM) : MM;//月補0
41                 let d = date.getDate();
42                 d = d < 10 ? (\'0\' + d) : d;//天補0
43                 let h = date.getHours();
44                 h = h < 10 ? (\'0\' + h) : h;//小時補0
45                 let m = date.getMinutes();
46                 m = m < 10 ? (\'0\' + m) : m;//分鐘補0
47                 let s = date.getSeconds();
48                 s = s < 10 ? (\'0\' + s) : s;//秒補0
49                 return y + \'-\' + MM + \'-\' + d; //年月日
50                 //return y + \'-\' + MM + \'-\' + d + \' \' + h + \':\' + m+ \':\' + s; //年月日時分秒
51             },            
               getFocus(){
63                 uni.request({
64                     url:getApp().globalData.url + \'/news/focus\',
65                     method:\'get\',
66                     data:{},
67                     success: (res) => {    
68                         this.itemFocus = res.data.data.data;
69                         this.itemFocus.forEach(item=>{
70                             item.inputtime = this.happenTimeFun(item.inputtime)
71                         })
72                     }
73                 })  
74              },
              change(e) {
94                 this.btnnum = e
95             }
96         }
97     }
98 </script>