小程序中WXS(Lab小技巧-003)

小程序出现也有一段时日了，随着生态的日益健壮，小程序也慢慢成为相对成熟的平台。今天想和你们分享一下小程序中相对冷门但有用的东西--WXS

最近都在写小程序，遇到这样一个tab组件的需求，大概意向以下图

背景介绍，该tab组件将会由两个现成的组件拼凑而成，分别是tab-head与tab-body，而且tab-haed组件只接受字符串组成的数组。废话少说，先上代码↓↓

如图所示，咱们将会获得一个list数组用于描述整个tab组件，按照咱们一向的处理方式，大概会在获取到list数据以后进行title的分离(分离的缘由请参考背景介绍)，以供视图层的tab-head使用。可是，不知道你们有没想过，js里面其实应该是处理数据逻辑的，这种有关视图层面的处理在可行的状况下应该交由视图层自行处理。

这里所说的“可行方案”就是咱们小程序中的WXS了，既然主角出场了，咱们就顺便介绍一下~

引用微信小程序官方文档的介绍--

简单理解一下，这是一个相似JavaScript但又不是JavaScript的语言，它的运行速度将会比JavaScript更快，他能够与WXML配合使用。

那么，在个人这个需求里，WXS应该有什么样的做用呢？

正如前面分析list结构的时候所说，WXS能够在视图层提供一些数据的处理能力，如上图，在WXS中构造了一个循环获取列表中每项标题的方法，并将这些标题放入数组而后return出来供视图使用。这样咱们就能够不用再在js中额外处理关于标题这一块的数据整合。关于WXS具体使用方式，能够参照微信小程序官方文档中关于WXS的文档。

注意：在使用WXS的时候踩过一个坑，固然这也怪本身，WXS中只能支持到ES5的写法，ES6的写法在模拟器以及一些较新的手机上均可正常运行，可是到了低版本的旧手机就会让整个小程序直接崩掉。因此你们在用WXS的时候要谨记，必定不能贪图方便使用ES6的语法。