微信小程序-（js和wxml中）utils公共方法使用

通过开发者工具快速创建了一个 QuickStart 项目时，会生成一个utils/util.js文件。

util.js

const formatTime = date => {
  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
}


const formatDate = (time)=>{ // 每日5:30更新日期查询
	let now = new Date()
	let year = now.getFullYear(); //得到年份
	let month = now.getMonth();//得到月份
	let date = now.getDate();//得到日期
	month = month + 1
	if (month < 10) month = "0" + month
	if (date < 10) date = "0" + date
	
	searchDate = year + '-'+ month + '-'+ date
	return searchDate
}

const formatEnMonth = (month) => {
	month = month.toString()
	let en_month="Jan"
	let month_arr = ['01','02','03','04','05','06','07','08','09','10','11','12']  
	let en_mon_arr = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec"];  //英文月份
	for(var i = 0;i < month_arr.length;i ++){      //循环匹配
	  if(month == month_arr[i]){
	      en_month= en_mon_arr[i]
	  }
	}
	return en_month
}
module.exports = {
	formatTime: formatTime,
	formatEnMonth: formatEnMonth,
	formatDate: formatDate,
}

我们可以将一些公共的代码抽离成为一个单独的 js (util.js)文件，作为一个模块，通过 module.exports 或者 exports 对外暴露。
在使用过程中，会发现它里面的方法只能在js里调用，没法直接在wxml中使用，这时候可以用 WXS来模拟过滤器。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面结构。

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

wxs的使用方法：

1.在utils文件夹中新建一个文件，比如：utils.wxs。

// 作用于wxml中的函数，不支持ES6的语法
var formatAir = function(data){
  switch (data) {
    case '优':
      return 'level1'
    case '良':
      return 'level2'
    case '轻度污染':
      return 'level3'
    case '中度污染':
      return 'level4'
    case '重度污染':
      return 'level5'
    case '严重污染':
      return 'level6'
    default:
      return '-'
  }
}

module.exports = {
  formatAir: formatAir,
}

2. wxml页面中：

<wxs src="../../utils/utils.wxs" module ="utils"/>
<view class="aqiDetails">
	<view class="aqiText">空气质量指数</view>
	<view class="aqi">{{nowAir.aqi}}</view>
	<view class="category">
		<!-- 根据空气质量指数类型添加样式 -->
		<text class="nowAirTxt {{utils.formatAir(nowAir.category)}}">{{nowAir.category}}</text>
	</view>
</view>

.wxss

/* 工具类 */
.level1{
  background-color: #309434;
}
.level2{
  background-color: #fbc011;
}
.level3{
  background-color: #ff9800;
}
.level4{
  background-color: #ff4032d1;
}
.level5{
  background-color: #9c27b0;
}
.level6{
  background-color: #a73208;
}