微信小程序過濾器 filter的使用（過濾器 filter）

我們在實際的項目開發中避免不了傳輸數據與展示數據不同，直接修改原數據顯然是不合適。這個時候如果有過濾器的話，可以很方便的解決我們的問題，但是遺憾的是小程序目前沒有過濾器，只能通過自己來模擬。下面就提供兩種在小程序中使用過濾器的方法：

方法1  通過在js中自定義函數來實現過濾功能

data : {
  originTime : 1811748300578
}


 getTime (){    
  return FormatUtil.getDate(this.data.originTime );
}

方法2 使用wxs，wxs 目前主要是增強 wxml 標簽的表達能力；方式如下

a) 在項目的目錄中新建一個filte的文件夾（文件夾的名字可以隨便起，不過一般使用filter）

b) 在該文件夾下新建一個后綴為.wxs的文件（該文件主要是用來實現相關功能）

c) 在該文件中，編寫我們要實現的功能代碼即可（本例中實現的是商品的價格顯示保留兩位小數）

var unit = {
  reduceSecond: function(text) {
    var cates = text;
    if(cates.indexOf("|")!=-1){
      var catesArr = cates.split("|");
      var pinStr = "";
      catesArr.forEach(function(objs){
        pinStr = pinStr+' '+ objs.substring(objs.indexOf(":")+1);
      })
      console.log(pinStr);
    }else{
      var pinStr = "";
      var catesArr = cates.split(":");
      catesArr.forEach(function(objs){
        pinStr+=catesArr[1];
      })
    }
    return pinStr;
  },
  saveSecond:function(text){
    var getNum = text*1;
    var postNum = getNum.toFixed(2);
    return postNum;
  }
}
module.exports = {
  reduceSecond: unit.reduceSecond,
  saveSecond:unit.saveSecond
}

d) 在我們要用到的wxml頁面中，引入該文件，引入方式如下：

需要注意的是要在引入文件的同時 給wxs標簽添加module屬性，方便我們在下面使用

e) 在需要過濾的地方使用即可實現

效果：

 

  <view>         
    <text class="cate-price">￥{{unit.saveSecond(salePrice/100)}}</text>
    <text class="diaPrice">￥{{unit.saveSecond(productInfo.marketPrice/100)}}</text>
 </view>

案例（1，自己）

處理電話號碼（第一步）

第二步

function splitPhone(str){
  console.log(str.length);
  if(str.length != 11)return str
  var arr = str.split('')
  arr.splice(3,0,'-')
  arr.splice(8,0,'-')
  arr.join('')
  // console.log(arr);
  return arr.join('')
}

module.exports = {
  splitPhone:splitPhone // 不能使用 es6語法
}



    <view class="shopItemRight">
      <view class="title">{{item.name}}</view>
      <view class="phone">電話：{{toals.splitPhone(item.phone)}}</view>
      <view class="site">地址：{{item.address}}</view>
      <view class="doTime">營業時間: {{item.businessHours}}</view>
    </view>


<wxs src='../../utlis/toals.wxs' module="toals"></wxs>

以上就是微信小程序中實現過濾器的兩種方法，對你有幫助的話，給個贊吧 歡迎交流！
————————————————
版權聲明：本文為CSDN博主「weixin_往事隨風」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_40967353/article/details/107682345