天天看點

微信小程式使用wxs實作手機号用****代替(超詳細)

很多人不知道怎麼寫,應該放在哪兒

這裡我給大家看看我的結構,僅供參考,具體還看你的想法

微信小程式使用wxs實作手機号用****代替(超詳細)

這裡我建立了一個與pages同級的sub檔案夾,裡面建立了subutil.wxs檔案

subutil.wxs

/**
 * 處理字元串為*格式, 中間顯示自定義*号
 * str 需要處理的字元串
 * startLength 前面顯示的字元串長度
 * endLength後面顯示的字元串長度
 */

var sub = function(str, startLength, endLength) {
  if(str.length == 0 || str == undefined) {
    return "";
  }
  var length = str.length;
  if(length >= startLength + endLength) {
    // 判斷當字元串長度為二時, 隐藏末尾
    if(length === 2) {
      return str.substring(0, 1) + '*';
    }
    else if(3 <= length && length <= 10) {
      return str.substring(0, 1) + '**';
    }
    // 判斷字元串長度大于首尾字元串長度之和時, 隐藏中間部分
    else if(length >= 11) {
      return str.substring(0, startLength) + '****' + str.substring(length - endLength, length);
    } else {
      return str
    }
  }
}

module.exports = {
  sub: sub
}      

wxs完成之後我們就可以在wxml中引用了

微信小程式使用wxs實作手機号用****代替(超詳細)
<wxs module="tools" src="../../../sub/subutil.wxs"></wxs>
<view class="right">{{tools.sub(phone, 3, 4)}}</view>      

用自己的檔案路徑

phone是自己在js中定義的字元串

看看吧

微信小程式使用wxs實作手機号用****代替(超詳細)

最後看一下實作的效果

微信小程式使用wxs實作手機号用****代替(超詳細)