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

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

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

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

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

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

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

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

那么,在个人这个需求里,WXS应该有什么样的做用呢?ip

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

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

相关文章
相关标签/搜索