微信小程式：wxml中增加wxs指令碼實現手機號/身份證等隱私資訊顯示

摘要： 在js中，我們需要將手機號帶星號顯示是很容易的事情，只需要呼叫字串截斷與拼接就可以了；但是，在wxml中，我們如何處理呢？ 微信小程式開發框架中有一個wxs，就是為了解決類似問題的，只需要在wmxl中引入wxs，就可以呼叫該類的方法，這一點和網頁開發html中通過script引入js類似。...

在js中，我們需要將手機號帶星號顯示是很容易的事情，只需要呼叫字串截斷與拼接就可以了；但是，在wxml中，我們如何處理呢？

微信小程式開發框架中有一個wxs，就是為了解決類似問題的，只需要在wmxl中引入wxs，就可以呼叫該類的方法，這一點和網頁開發html中通過script引入js類似。

首先，在pages同一級有個wxs目錄（沒有的可以自己建立），所有的wxs都可以放在這裡。

subutil.wxs

在subutil.wxs中新建一個sub方法，用於根據特定需求擷取字串，並顯示為帶 * 號的字串（前startLength + 四個 * 號 + 後endLength位），如果字串長度小於startLength + endLength，則返回原始字串：

/**
 * 處理字串為****格式，中間顯示四個*號
 * str 需要處理的字串
 * startLength 前面顯示的字串長度
 * endLength 後面顯示的字串長度
 */
var sub = function (str, startLength, endLength) {
if (str.length == 0 || str == undefined) {
return "";
}
var length = str.length;
if (length >= startLength + endLength) {
return str.substring(0, startLength) + "****" + str.substring(length - endLength, length);
} else {
return str;
}
}
module.exports = {
sub: sub
}

wxml引用

使用以下程式碼引入wxs指令碼：

<!-- 引入wxs指令碼 -->
<wxs src="../../wxs/subutil.wxs" module="tools" />

在需要的地方通過以下方式呼叫即可：

{{tools.sub(phoneNum, 3, 4)}}

一個簡單的手機號/身份證等隱私資訊顯示方法實現了，通過wxs，還可以在wxml中實現更多的內容；當然，建議儘量在js中把資料處理好，少在wxml中處理邏輯，wxs中也只定義少量工具方法...

簡書：ThinkinLiu 部落格:IT老五