小程序学习：WXS

官方文档 WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 即WXS可以实现在WXML里写js代码或调用js代码。

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。 WXS里各种数据类型的方法的使用参照ES5标准。

类比JS，既可以把JS代码写在HTML里，也可以写在单独的JS文件里。 WXS也是既可以把代码写在WXML里，也可以写在单独的WXS文件里。

1、定义WXS

比如定义一个filter.wxs，用来把一段文本的"//n"替换成"/n"： filter.wxs：

var format = function(text){ if(!text){ return } var reg = getRegExp('\\\\n','g') return text.replace(reg, '\n     ') } var limit = function(array, length){ return array.slice(0, length) } module.exports = { format:format, limit:limit }

注意：WSS与JS不是一回事，因此也不能用ES6里的const，只能用var；这里的模块也与ES6中的模块不同。

2、使用WXS

页面的WXML中导入并使用WXS：

<wxs src="../../util/filter.wxs" module="util" /> <text class="content" decode="{{true}}">{{util.format(book.summary)}}</text>

注意：src只能写相对路径 **decode="{{true}}"**是为了能解析空格  

3、WXS里的正则表达式

上述例子中实现了一个正则表达式的应用。在WXS里有专门关于正则表达式的说明： regexp是WXS的一个数据类型。生成 regexp 对象需要使用 getRegExp函数。

getRegExp(pattern[, flags]) 参数：

pattern: 正则表达式的内容。flags：修饰符。该字段只能包含以下字符: g: global（全体字符） i: ignoreCase m: multiline。

4、在WXML文件中写WXS代码

在页面WXML中：

<!-- 使用WXS --> <v-tag bind:tapping="onPost" tag-class="{{tool.highlight(index)}}" text="{{item.content}}"> <!-- 定义WXS --> <wxs module="tool"> var highlight = function(index){ if(index==0){ return 'ex-tag1' } if(index==1){ return 'ex-tag2' } return '' } module.exports = { highlight:highlight } </wxs>