微信小程式 WXS 不瞭解一下？騷騷的實現各大前端框架中的 filter

褲襠三重奏發表於2018-05-28
微信小程式前端框架Filter

wechat

前言

最近有在做小程式開發，在開發的過程中碰到一點小問題，描述一下先。

本人在職的公司對於後臺獲取的 json 資料需要做過濾轉義的很多，不同的狀態碼會對應不同的文字，但是在微信小程式中又沒有類似 vue 中的 | 方法進行快速的過濾，看了前人的程式碼大都是用資料遍歷洗資料來實現的，說實話，很麻煩，即使提取了公共方法那也麻煩，總之要洗資料就麻煩（對，我就是這麼懶，懶人推動世界發展 =3=）

在翻看小程式的文件的時候，正好看到了 WXS 的介紹 官方文件[點我檢視] 一拍腦門，這不就成了麼？

正文

WXS 為何物

在上程式碼之前先簡單的介紹一下 WXS 是什麼，以及和 javascript 有什麼區別，雖然官方文件中都有，但我認為部落格的存在意義就是儘量減少看官們的頁面跳轉，能夠在一個頁面說明的問題就不要再跳轉，外鏈應該作為課後擴充的手段。

  • WXS 介紹
    • 是小程式出的一套指令碼語言，用於 wxml 模板檔案中，在模板檔案中可以完成頁面的結構。
    • 不依賴於執行時的基礎庫指令碼，可以在所有版本的小程式中執行。
    • WXS 中不能呼叫 javascript 中定義的函式或者變數，也不能呼叫小程式提供的 API，他的執行環境和 javascript 是隔離的。
    • 小程式的條件渲染和迴圈渲染對 WXS 是無效的，就是說如果 WXS 程式碼包裹在未渲染的程式碼中，只要渲染的 wxml 部分呼叫了此模組，此段 WXS 程式碼依然會被載入。
    • 由於執行環境的差異，在 ios 裝置上小程式的 WXS 會比 javascript 快 2~20 倍，在 android 裝置上執行效率無異。
    • 模組想要暴露自己的私有變數和方法，只能通過 module.exports 實現。
    • 若在模組中想要引用其他模組，只能通過 require 實現。
    • 只能使用 var 來定義變數，表現形式和 javascript 一樣，會有變數提升。
    • WXS 模組只能在定義模組的 wxml 檔案中被訪問到，使用 <include> 或 <import> 時，WXS 模組不會被引入到對應的 wxml 檔案中。
    • 不能使用 new Date() 應該使用 getDate()。

正確的使用 WXS

上程式碼

首先，新建一個 config.wxs 檔案，用於儲存狀態碼對應轉義後的文字。

var orderType = {
  "-1": "type one",
  "0": "type two",
  "1": "type three"
};
module.exports.orderType = orderType;
複製程式碼

可以看到我們對外暴露變數的時候用的是 module.exports，在 wxs 檔案中只能使用該方法 官方文件[點我檢視] 同樣，在引入其他模組的時候，只能使用 require。

接著，建立一個 index.wxs 檔案，用於對外暴露一些過濾的方法。

var config = require("./config.wxs");

function _filterOrderType(value) {
  return config.orderType[value.toString()] || "order type undefined"
}
// 時間戳轉換成 yyyy-MM-dd HH:mm:ss
function _filterTimestamp(value) {
  // 有些特殊 不能使用 new Date()
  var time = getDate(value);
  var year = time.getFullYear();
  var month = time.getMonth() + 1;
  var date = time.getDate() < 10;
  var hour = time.getHours() < 10;
  var minute = time.getMinutes() < 10;
  var second = time.getSeconds() < 10;
  month = month < 10 ? "0" + month : month;
  date = date < 10 ? "0" + date : date;
  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;
  return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

module.exports._filterOrderType = _filterOrderType;
module.exports._filterTimestamp = _filterTimestamp;
複製程式碼

最後在我們需要進行過濾處理的 wxml 頁面上引入這個模組，使用即可。

<wxs src="../filter/index.wxs" module="filter" />
<view>{{filter._filterOrderType(item.type)}}</view>
<view>{{filter._filterTimestamp(item.time)}}</view>
複製程式碼

這裡需要注意一下，在 wxml 頁面上使用模組的時候，需要用一個 module="filter" 或者其他的命名來包裹。

結語

WXS 和 javascript 雖然類似，但是還是有一些不同的地方，如果在 debug 的時候發現報錯了，可以在底下回復或者直接私信我，雖然不能秒回，但是多一個人多一條思路，也許我能給您提供一些別的思路，或者您的問題會給我帶來一些新的思考，我正是這麼期待著。

本文可以隨意轉載，只要附上原文地址即可。

如果您認為我的博文對您有所幫助，請不吝讚賞，點贊也是讓我動力滿滿的手段 =3=。

相關文章