CruxF / StudyWXsmallProgram

微信小程序学习站点

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

8.在微信小程序中使用wxs

CruxF opened this issue · comments

前言

wxs文件的概念请移步到官网进行查看,下面我们在谈谈如何运用。

过滤时间

比如在调后台接口的时候,返回一个时间参数,格式为“2019-03-30 18:55:26”。而前端页面只需要取的月日和星期即可,那么该如何实现呢

步骤一:在同目录下创建一个wxs外部文件

var monthDay = function (value) {
  var date = getDate(value);
  var Month = date.getMonth() + 1;
  var Day = date.getDate();
  var M = Month < 10 ? '0' + Month: Month;
  var D = Day + 1 < 10 ? '0' + Day: Day;
  return M +'-'+D;
}
var week = function (value) {
  var weekArr = ['周一','周二','周三','周四','周五','周六','周日'];
  var date = getDate(value);
  var week = date.getDay();
  return weekArr[week];
}
module.exports = {
  monthDay: monthDay,
  week: week
}

步骤二:在wxml文件中进行引用

<wxs module='filter' src='filter.wxs' />
<view>
{{filter.monthDay(item.start_time)}} {{filter.week(item.start_time)}}
</view>

错误排查

在编写wxs最让人奔溃的一件事情就是代码由于马虎写错了一些却没有任何的报错信息,目前我的解决办法是通过console.log()进行排查,以下代码第四行出现拼写错误,那么‘243’则不会被打印到控制台。

var dateObj = function (value) {
  console.log(22)
  var date = getDate(value);
  var Year = data.getFullYear();
  var Month = date.getMonth() + 1;
  var Day = date.getDate();
  var Hour = date.getHours();
  var Minu = date.getMinutes();
  var M = Month < 10 ? '0' + Month : Month;
  var D = Day + 1 < 10 ? '0' + Day : Day;
  var H = Hour < 10 ? '' + Hour: Hour;
  var Mi = Minu < 10 ? '' + Minu: Minu;
  console.log(243)
  return Year+'/'+M+'/'+D+' '+H+':'+Mi;
}