微信小程序----边走边记，数据请求和时间格式转换

最新推荐文章于 2025-07-17 14:50:29 发布

原创最新推荐文章于 2025-07-17 14:50:29 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #数据请求 #时间转化

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了微信小程序中实现数据请求的方法，并展示了如何将获取的数据转换格式并展示在页面上，包括时间戳转换等关键步骤。

最近，我们开始在做一个微信小程序的项目，那天，我们是突然收到的页面，就是图片，他们告诉我们样式是这样的，布局要这么做，不知道他们（我团队的）怎么想，说到样式，我是一点不会，css我是真的不知道要怎么才能把他做出他图片给的样子的，我对css是一点基础都没有的，最早还是做android的时候一点布局的经验，那都是2年前的事了，还好，前一段时间用id选择器，试着画过一下，不然还真是没办法的事。

好了，简单的抱怨一下，我们开始今天要做的

1 微信小程序的数据请求

这个官方是有文档的，就是比较简单，扩展的话还是要自己写，现在，我就把我自己的请求贴出来

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    app.editTabBar();
    //请求数据
    var that = this
    wx.request({
      url: url + "manager/getMangsgerList",
      header: { 'content-type': 'application/x-www-form-urlencoded' },  
      // url: url + "10003/list",
      success: function (res) {
        if (res.data.code = '101') {//接口请求成功
          var MansegrList = res.data.MansegrList;
          for (var i = 0; i < res.data.MansegrList.length; i++) {
            MansegrList[i]["addTime"] =
              toDate((MansegrList[i]["addTime"]) / 1000);
          }
          that.setData({
            array: MansegrList,
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '数据请求失败，请稍后再试!',
          })
        }
      },
      complete: function () {
        setTimeout(function () {
        }, 1000)
      }
    })

  },

注意：

1，写在onload方法里的，和ajax有点像，但是比那个简单 url就是请求的url

2，直接用res.data.*就可以拿到相关的数据了，拿到数据很简单的就可以拿到了

3，通过 that.setData({array: MansegrList,}) 我们就可以把拿到的数据{obj，obj}格式的，通过数组显示到页面上了

页面：

 <view wx:for="{{array}}"wx:key="arrayList">
    <view class='activity_son_s'>
      <view class='tit' style='margin-bottom:-30rpx'></view>
      <view class='title'>
        {{item.manName}}
      </view>
      <view class='content'>
        {{item.remark}}
      </view>
    </view>
    <view class='activity_son_x'>
      <view class='count'>
        <image class='seeImg' src="../../images/see.png"></image>
        {{item.id}}
      </view>
      <view class='time'>
       发布时间 : {{item.addTime}}
      </view>
    </view>
  </view>

仔细看：

1，setData里的数组 {array：MansegrList} array就是页面for循环上要写的数组，MansegrList就是我们拿到的数据对象。

2，数组里的字段就是页面的别的元素，我们通过item.字段名获取。

3，时间字段需要注意的是时间格式要转换，这次。我就遇到这个问题，现在我也说明一下

原来我接收的时间是long，就是形如：1526434415000，这里有个问题是，我的这个参数后边多了000，直接转会出现不符合逻辑的数据，因此，我在转换的时候

MansegrList[i]["addTime"] = toDate((MansegrList[i]["addTime"]) / 1000);

做了除法。

toData：

//时间戳转换时间  
function toDate(number) {
  var n = number * 1000;
  var date = new Date(n);
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  return (Y + M + D)
}