暑期实训9- 7.15&16&拦截器

1 触底刷新

实现了滚动到底加载更多的效果，

每一页读三条数据，鼠标向下滚动，将把下一页的三条数据读出来，加在原来的list后面，展示的是list，变成了六条数据。

2 utils

需要将data的时间格式处理成我想要的。参考：小程序页面处理后台返回时间格式
他上面是在utils文件夹下创建.wxs文件，然后引入。我找了一下，这个utils文件夹：

可以将一些公共的代码抽离成为一个单独的 js (utils.js)文件，作为一个模块; 模块只有通过 module.exports 或者 exports 才能对外暴露接口。 所以当你在util.js里封装的方法想要在外部使用的话,必须通过 module.exports 或者exports 对外暴露
在需要使用这些模块的文件中使用:使用 require(path) 将公共代码引入
require 暂时不支持绝对路径

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

参考：https://blog.csdn.net/caohoucheng/article/details/82012489

新建的项目里边生成了一个utils/util.js

3 时间格式处理

重点应该是这个filter.wxs文件，官方文档：WXS，WXS语法参考

//通过substring截取处理时间
function newFormatTime(timestamp) {
  return (timestamp.substring(0, 10))
}

module.exports = {
    newFormatTime:newFormatTime
}

在需要渲染的页面引入filter.wxs文件

<wxs module="filter"  src='../../utils/filter.wxs'></wxs>//引入


//使用
	<view class="two">{{filter.newFormatTime(item.productionCycleStart)}}</view>
	//item.productionCycleStart要渲染的数据
	//newFormatTime方法名

我想，在utils文件夹下，创建一个.wxs文件，里面的函数用来处理获得的时间戳，在wxml文件中使用，在需要渲染的页面引入.wxs文件。

filter.wxs：

 /**
   * 
   * @param {*} times  时间戳
   * 转换为  yyyy-MM-dd HH:MM:SS 格式的日期
   */
function formatDate1(times) {
  var date = getDate(parseInt(times));
  var year = date.getFullYear(); //年份
  var month = date.getMonth() + 1; //月份
  var day = date.getDate(); //日
  var hour = function () { //获取小时
      return date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  }
  var minute = function () { //获取分钟
      return date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
  }

  var second = function () { //获取秒数
      return date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  }

  console.log(year+'.'+month+'.'+day);
  console.log(hour() + ':' + minute() + ':' + second());
  return year + '.' + month + '.' + day + ' ' //+ hour() + ':' + minute() + ':' + second()

}

function formatDate2 (times) {
  var date = getDate(times);
  var year = date.getFullYear(); //年份
  var month = date.getMonth() + 1; //月份
  var day = date.getDate(); //日
  var hour = function () { //获取小时
      return date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  }
  var minute = function () { //获取分钟
      return date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
  }

  var second = function () { //获取秒数
      return date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  }

  console.log(year+'.'+month+'.'+day);
  console.log(hour() + ':' + minute() + ':' + second());
  return  hour() + ':' + minute() ;

}

module.exports={
  formatDate1:formatDate1,
  formatDate2:formatDate2,
};

test1.wxml

<wxs module="formatdate" src="../../utils/filter.wxs"></wxs> <!--引入处理时间的格式-->
...
 <text wx:if="{{list}}" class="time" space="emsp">{{formatdate.formatDate1(item.act_start_timestamp)}} </text>
 <text wx:if="{{list}}" class="time">{{formatdate.formatDate2(item.act_start_timestamp)}}-{{formatdate.formatDate2(item.act_end_timestamp)}}</text>

出错：（参考：微信小程序学习之wxs使用教程）

1. 报错“Unexpected token Date”，原因：WXS 中不能使用 new Date() 应该使用 。 改正：使用var date=getDate(timestamp)
2. 一直没有内容，NAN，[WXS Runtime info]， 原因：我传的参数出错，应该是item.act_start_timestamp，缺少了item. 。改正：添加即可。

拦截器

拦截器，会先对所有向后端的请求拦截。（指定的不会拦截，比如登录）
拦截先检查请求投中有没有token，没有就返回状态403，并发送消息your token is null。
然后解析token,如果解析出来的openid是数据库中存在的，就通过了，没有也是返回状态403，然后发送消息your openid is null
当发起正常请求时，如果token有问题就会返回一个json包，和登录返回的差不多，只是少了date。如果返回这个就得要求用户重新登陆了。

在正常请求中，是将token放在请求头中。后端会先拦截检查token，如果token有问题我就会返回一个json包，里面有code和message。小程序端发现返回的不是预期的json包，就说明token过期或者有错，就需要重新登录获得新的token