微信小程序:wxml中增加wxs脚本实现手机号/身份证等隐私信息显示

itlao6 开发&源码 微信小程序 原创1 1,009字数 946阅读3分9秒阅读模式

在js中,我们需要将手机号带星号显示是很容易的事情,只需要调用字符串截断与拼接就可以了;但是,在wxml中,我们如何处理呢?

微信小程序开发框架中有一个wxs,就是为了解决类似问题的,只需要在wmxl中引入wxs,就可以调用该类的方法,这一点和网页开发html中通过script引入js类似。文章源自IT老刘-https://itlao6.com/897.html
微信小程序:wxml中增加wxs脚本实现手机号/身份证等隐私信息显示
wxs.jpg

首先,在pages同一级有个wxs目录(没有的可以自己创建),所有的wxs都可以放在这里。文章源自IT老刘-https://itlao6.com/897.html

subutil.wxs

在subutil.wxs中新建一个sub方法,用于根据特定需求截取字符串,并显示为带 * 号的字符串(前startLength + 四个 * 号 + 后endLength位),如果字符串长度小于startLength + endLength,则返回原始字符串:文章源自IT老刘-https://itlao6.com/897.html

/**
 * 处理字符串为****格式,中间显示四个*号
 * 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脚本:文章源自IT老刘-https://itlao6.com/897.html

<!-- 引入wxs脚本 -->
<wxs src="../../wxs/subutil.wxs" module="tools" />

在需要的地方通过以下方式调用即可:文章源自IT老刘-https://itlao6.com/897.html

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

一个简单的手机号/身份证等隐私信息显示方法实现了,通过wxs,还可以在wxml中实现更多的内容;当然,建议尽量在js中把数据处理好,少在wxml中处理逻辑,wxs中也只定义少量工具方法...文章源自IT老刘-https://itlao6.com/897.html

简书:ThinkinLiu 博客: IT老五文章源自IT老刘-https://itlao6.com/897.html


微信小程序:wxml中增加wxs脚本实现手机号/身份证等隐私信息显示
IT老五(it-lao5):关注公众号,一起源创,一起学习!
文章源自IT老刘-https://itlao6.com/897.html文章源自IT老刘-https://itlao6.com/897.html
继续阅读
weinxin
我的微信公众号
微信扫一扫关注公众号,不定时更新
itlao6
  • 本文由 发表于 2019年 4月 18日 15:23:23
  • 转载请务必保留本文链接:https://itlao6.com/897.html
评论  1  访客  0
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定