【微信小程序】wxs的应用，在xwml中实现类似于web在html中使用JavaScript代码

1、简介

 WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

2、应用

 WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块（模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见）。

每个 wxs 模块均有一个内置的module 对象，通过exports属性，可以对外共享本模块的私有变量与函数。

属性名	类型	默认值	说明
module	String		当前 <wxs> 标签的模块名。必填字段。
src	String		引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

2.1 在wxml文件中直接编写wxs代码

① 以最精简的两数相加函数为例，通过 module.exports 实现wxs模块内的函数对外暴露。

<wxs module="add">
  module.exports = function (a, b) {
    return a + b;
  };
</wxs>
<view>{{add(1, 2)}}</view>

② 多个函数或变量可以用对象，以两数相加和两数相减函数为例。 

<wxs module="func">
  var filter = {
    
    add: function (a, b) {
      return a + b;
    },

    subtract: function (a, b) {
      return a - b;
    },

  };
  module.exports = filter;
</wxs>
<view>{{func.add(1, 2)}}</view>
<view>{{func.subtract(1, 2)}}</view>

2.2 在wxml文件中引用外部wxs文件

Step 1：新建wxs文件

date.wxs：处理信息时间的函数，将Date格式的日期转化为如“刚刚”、“？分钟前”、“？天前“等时间文本。

var filter = {
  formatMsgTime: function (dateStr) {
    var targetDate = getDate(dateStr);
    var year = targetDate.getFullYear();
    var month = targetDate.getMonth() + 1;
    var day = targetDate.getDate();
    var hour = targetDate.getHours();
    var minute = targetDate.getMinutes();
    var second = targetDate.getSeconds();
    var nowDate = getDate();
    var now_new = Date.parse(nowDate.toDateString());
    var milliseconds = 0;
    var timeSpanStr;

    milliseconds = now_new - targetDate;

    if (milliseconds <= 1000 * 60 * 1) {
      timeSpanStr = '刚刚';
    }
    else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
      timeSpanStr = Math.round((milliseconds / (1000 * 60))) + '分钟前';
    }
    else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
      timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前';
    }
    else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 15) {
      timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前';
    }
    else if (milliseconds > 1000 * 60 * 60 * 24 * 15 && year == now.getFullYear()) {
      timeSpanStr = month + '-' + day;
    } else {
      timeSpanStr = year + '-' + month + '-' + day;
    }
    return timeSpanStr;
  }
}

module.exports = {
  formatMsgTime: filter.formatMsgTime
}

注：在wxs中无法new对象，这里要达到new Date()的效果可采用全局函数getDate()。

Step 2：引入wxml文件中

<wxs module="filter" src="../../utils/date.wxs"></wxs>

Step 3：调用函数

    <view>{{filter.formatMsgTime('2018/07/18 17:07:05')}}</view>

3、示例：

var filter = {
  // float类型的value只保留两位小数
  numberToFix: function (value) {
    return value.toFixed(2);
  },
  // 判断数组array中是否存在值value
  valueInArray: function (array, value) {
    return array.indexOf(value);
  }
}
module.exports = {
  numberToFix: filter.numberToFix,
  valueInArray: filter.valueInArray,
}