微信小順序 WXS 不相識一下？騷騷的完成各大前端框架中的 filter

2024年1月29日 150次阅读 来源: 褲襠三重奏

媒介

近來有在做小順序開闢，在開闢的過程當中遇到一點小題目，形貌一下先。

本人在職的公司關於背景獵取的 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=。

    原文作者：褲襠三重奏
    原文地址: https://segmentfault.com/a/1190000015067395
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞