今天完成的事情：

重构了微信前端页面
明天计划的事情：

检查BUG 做后台页面 

明天了解下JS基础域
遇到的问题：

JS基础域的问题

问题：

我这里赋值的时候出现情况因为我是通过别的变量赋值如

var a =  this.data.listNeed[i].update_at = dataTime

然后：

this.setData({                 listNeed: a               })

这种赋值相当于重新给listNeed里面添加一个对象而不是改变原来的数据。

问题解决：

现在才知道通过

var  dataTime变量然后把要改变的值赋给它，然后在通过this.data.listNeed[i].update_at = dataTime来进行改变一定要这样赋值改变原理的数据值。

这种改变知识还JS里面的数据改变了但你不能渲染到页面上，因为微信视图层的联系需要setData来练习不像angular双向绑定就OK了.

this.setData({                 listNeed: this.data.listNeed               })

这里的原理应该是listNeed是一个空间 而this.data.listNeed可能有是个空间 而listNeed空间和视图层练习而后面的 this.data.listNeed覆盖前面的listNeed这样可能就把视图层的原先代码覆盖然后在渲染出来给我们看.

收获：

时间戳

微信时间戳是由自带 但是需要你自己更改基本用法

第一步找到utils文件下面util.js

更改代码

const formatTime = dd => {
     var date =  new Date(dd)
  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: formatTime
}

这是基本代码赋值过来。（后续补上它的运行原理）

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

 在你所在的文件夹里调用utils文件里面的JS 这里看你自己的路径.

原理比较简单

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()

分别是年 月 日 小时 分钟 秒

这里一定要var date =  new Date(这里面是传值)通过

time.formatTime(this.data.listNeed[i].update_at, 'Y-M-D h:m:s')

通过formatTime()传值到这个文件里面的函数来执行这个方法.

注意：

time这里一定要跟你声明上面调用的一样否则会报错.

里面代码就是通过你后台获取的数据来进行转换调用然后在渲染出页面上.

而且formatTime一定是跟utils/util.js文件里面的函数名称是一样的.

功能

1.24小时内只显示几小时前

2.超过24小时现实年月日（也可现实时间）

 //时间戳转换
          var a = new Date();
          var currentTime = a.getTime();

          for (let i = 0; i < this.data.listNeed.length; i++) {
            var dataTime = currentTime - this.data.listNeed[i].update_at
            if (dataTime <= 86400000) {
              dataTime = Math.floor(dataTime / 1000 / 60 / 60) + '小时前'
              console.log(dataTime)
              this.data.listNeed[i].update_at = dataTime
            } else {
              this.data.listNeed[i].update_at = time.formatTime(this.data.listNeed[i].update_at, 'Y-M-D')
         
            }
               this.setData({
                 listNeed: this.data.listNeed
               })

          }

1.首先先获取系统当前时间 变量为a

2.把a转换成时间戳赋值给currentTime

3.通过循环循环出后台数组里面的所有时间戳，用当前时间减去以前的时间赋值变量dataTime

4.通过 dataTime来判断是否小于等于24小时。（8640000毫秒）

5.向下取整，因为会出现小数让不满整数1的先前进一位，然后在赋值给原来的数据进行改变。

6.通过setData赋值覆盖原先的数据渲染来

微信轮播图

<swiper autoplay interval="3000" circular indicator-dots >
  <swiper-item wx:for="{{rotationImg}}" wx:key="k"  data-index="{{index}}" wx:if="{{index < 7}}">
    <navigator  url="./articleData/articleData?id={{item.id}}" open-type="reLaunch">
      <image  class="swiper_img" src='{{item.image}}' mode="aspectFill"></image>
    </navigator>
  </swiper-item>
  
</swiper>

微信轮播图是由自带的组件可以直接应用

如图上面的代码

<swiper></swiper>

这个标签是滑块容器微信是这么叫，你就当它是装备放图片的容器

<swiper-item>

我这里用了3个基本值

这个组件就是你专门放置图片的位置。

circular ：是否采用衔接滑动

interval：自动播放单位为毫秒

indicator-dots：在图片最下面显示原点来判读你图片的位置

功能：

首先先说下这个轮播图的实现功能逻辑

1.文章图片分为2类card 与 banner，轮播上面只能播放banner类型的

2.轮播图只能播放8张，是按照后台数据顺序排列的

imgData() {
    console.log("轮播图")
    wx.request({
      url: this.api + '/article/all',
      data: {
        type: 1,
      },
      success: (res) => {
        console.log(res);
        if (res.statusCode == 200) {
          this.setData({
            rotationImg: res.data.data.list
          });
          console.log(this.data.rotationImg)
        }
      }
    });
  },

1.通过接口查询传值为1，因为文档约定 后台数据的1是 banner，提取所以分类为1的数值赋值到 rotationImg的变量

2.HTML页面通过for循环 循环出来，循环出下标data-index="{{index}}" ，通过if来进行判断 值循环出7张图片就OK了.