xwml转成html,【微信小程序】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 模块均有一个内置的module 对象，通过exports属性，可以对外共享本模块的私有变量与函数。

属性名

类型

默认值

说明

module

String

当前  标签的模块名。必填字段。

src

String

引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

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

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

module.exports = function (a, b) {

return a + b;

};

{{add(1, 2)}}

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

var filter = {

add: function (a, b) {

return a + b;

},

subtract: function (a, b) {

return a - b;

},

};

module.exports = filter;

{{func.add(1, 2)}}

{{func.subtract(1, 2)}}

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文件中

Step 3：调用函数

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

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,

}