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