前幾天有個(gè)同學(xué)問我 微信小程序支持管道過濾器 嗎？
用過 angular 或者 vue 的同學(xué)都應(yīng)該會(huì)在項(xiàng)目里用到 filter，然而在小程序中是不支持的。但是也有一些解決辦法
但我只是關(guān)心 WXS 能不能實(shí)現(xiàn) filter 以及還能做什么？帶著這樣的疑問，我重新看了一遍微信小程序官方的 WXS。

下面舉個(gè)簡單的例子：

<wxs module="m1">var msg = "hello world"; module.exports.message = msg;</wxs><view>{{m1.message}}</view>

上面的例子可以輸出 hello world 頁面，當(dāng)你閱讀完 官方文檔，會(huì)發(fā)現(xiàn)小程序的腳本語言的功能很捉鱉，比如只支持 es5 語法，不支持外部引入 js 等等。但是我仍然期待它未來支持更多的能力。

下面接入正題，探索文章題目的疑問

一、用 WXS 實(shí)現(xiàn) filter

前端通常有一個(gè)需求，那就是把后臺(tái)傳過來的時(shí)間戳轉(zhuǎn)為不同規(guī)格的日期后顯示出來。以往的做法一般是用一個(gè)函數(shù)對(duì)數(shù)據(jù)進(jìn)行包裝，然后輸出到頁面。就像前面提到的那篇文章里面所說的第一種方法一樣，但是有人考慮到性能問題，認(rèn)為在js里面循環(huán)處理比較耗性能（這點(diǎn)我不做評(píng)價(jià)，畢竟自己沒有真正測試過）
關(guān)于日期格式化的例子在前面提到的文章已經(jīng)有了，在這里我再舉一個(gè)比較簡單的例子。在我開發(fā)過的項(xiàng)目里面，后臺(tái)返回的網(wǎng)路圖片地址通常是相對(duì)地址，也就是說要把圖片顯示出來，還得加上配置好的域名前綴。而我通常是拿到數(shù)據(jù)后進(jìn)行遍歷操作，把需要前端展示的圖片加上前綴。但是有了 WXS，我們可以這樣做：

<wxs module="filter">    function getFullPath(url) {        return "https://shiyuanjieyi.cn" + url    }    module.exports.getFullPath = getFullPath</wxs><image src="{{filter.getFullPath(url)}}"></image>

在上面這個(gè)例子中，可以看到整個(gè)過程基本類似于 vue 等框架自定義 filter 的做法。

二、 WXS 還能做什么

其實(shí)很多時(shí)候，我們并不了解 WXS 還能做更多條件渲染的一些東西。請(qǐng)看下面一個(gè)例子：

<wxs module="filter">  function getData(entry, type) {    var imgUrl = '';    var content = '';    switch (entry) {      case 'needs':        imgUrl = '/images/goods_empty.png';        content = '暫時(shí)沒有需求';        break;      case 'goods':        imgUrl = '/images/goods_em制作軟件
pty.png';        content = '暫時(shí)沒有商品';        break;      case 'activity':        imgUrl = '/images/activity_empty.png';        content = '該專欄暫時(shí)沒有活動(dòng)';        break;      case 'channel':        imgUrl = '/images/article_empty.png';        content = '該專欄暫時(shí)沒有資訊';        break;      case 'micro-circle':        imgUrl = '/images/article_empty.png';        content = '沒有相關(guān)的話題哦';        break;      case 'needs-release':        imgUrl = '/images/goods_release_empty.png';        content = '你還沒有發(fā)布任何需求哦';        break;      case 'goods-release':        imgUrl = '/images/goods_release_empty.png';        content = '你還沒有發(fā)布任何商品哦';        break;      case 'goods-collection':        imgUrl = '/images/goods_collect_empty.png';        content = '你還沒有收藏任何商品哦';        break;      case 'apply':        imgUrl = '/images/activity_apply_empty.png';        content = '你還沒有報(bào)名任何活動(dòng)哦';        break;      case 'activity-collection':        imgUrl = '/images/activity_collect_empty.png';        content = '你還沒有收藏任何活動(dòng)哦';        break;      default:        break;    }    if (type === 'image') {      return imgUrl;    } else {      return content;    }  }  module.exports.getData = getData;</wxs><template name="nodata">  <view class="no-data">    <image src="{{filter.getData(entry, 'image')}}" class="no-data-icon"></image>    <view class="no-data-text">{{filter.getData(entry, 'content')}}</view>  </view></template>              
              

            
微信小程序