小程序中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的语法。

转载于:https://juejin.im/post/5ca88685f265da309b781391