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

前言

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

本人在職的公司對於後臺獲取的 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=。