在 JS 中, 我们需要将手机号带星号显示是很容易的事情, 只需要调用字符串截断与拼接就可以了; 但是, 在 wxml 中, 我们如何处理呢?
微信小程序开发框架中有一个 wxs, 就是为了解决类似问题的, 只需要在 wmxl 中引入 wxs, 就可以调用该类的方法, 这一点和网页开发 html 中通过 script 引入 JS 类似.
wxs.jpg
首先, 在 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 老五
IT 老五 (it-lao5): 关注公众号, 一起源创, 一起学习!
来源: http://www.jianshu.com/p/359dafd244fb