微信小程序:wxml中增加wxs脚本实现手机号/身份证等隐私信息显示
在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老五
IT老五(it-lao5):关注公众号,一起源创,一起学习!
微信小程序:wxml中增加wxs脚本实现手机号/身份证等隐私信息显示相关推荐
- 微信小程序-wxml中切割字符串
问题 需要将item.letter_date("2020-10-02 09:02:01")切割成"2020-10" <view class="l ...
- 微信小程序 wxml 中使用 js函数
原文链接 1.在 utils 目录下 新建`filter.wxs` var filters = { toFix: function (value) { return value.toFixed(2) ...
- 微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
- 微信小程序-WXML转换类型
微信小程序-WXML转换类型 情景:需要在WXML中把字符串转化成数字类型 解决:引入WXS wxs是小程序的一套脚本语言,结合wxml,可以构建出页面的结构. wxs不依赖于运行时的基础库版本,可以 ...
- 全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 复制代码 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位 ...
- java写微信小程序答辩问题_微信小程序 开发中遇到问题总结
微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ...
- 关于微信小程序textarea中的maxlength属性失效问题
关于微信小程序textarea中的maxlength属性失效问题 代码菜鸡今天在编写小程序前端代码时,遇到了一个问题:textarea输入140个字以后,就再也输不进去了,想着设置一下maxlengt ...
- 微信小程序 wxml组件开发(五) 电话号码和地图地址
在微信小程序开发中,有时候会遇到电话号码和地图信息需要展示的时候,接下来简单介绍电话号码和地图地址展示功能 wxml页面 <text bindtap="goMap">地 ...
- 关于微信小程序开发中遇到的缺少game.json问题的解决
关于微信小程序开发中遇到的缺少game.json问题的解决 参考文章: (1)关于微信小程序开发中遇到的缺少game.json问题的解决 (2)https://www.cnblogs.com/ygxd ...
最新文章
- 十个 Linux 新手管理员易犯错误
- ansys怎么合并体_亚马逊合并拆分变体实操(干货)-合并
- extjs window显示在顶层
- 用图表说话 麦肯锡 pdf下载_揭秘麦肯锡顾问百万年薪背后的逻辑,麦肯锡「方法论」系列大合集...
- 参数变化_PDP驱动波形参数分析
- ORA-06502:PL/SQL :numberic or value error: character string buffer too small
- dp括号匹配 网易面试题_面试题:大括号验证
- 管理任务执行-如何排任务优先级
- kafka 常用命令汇总
- 进程和线程的本质和区别
- delphi if多个条件_判断(if)语句
- 现浇板用弹性计算方法_现浇板裂缝处理办法全总结!
- idea 设置类的注释模板
- python 图片文字转换成word_如何基于python把文字图片写入word文档
- 视频文件服务器加速,百度云加速视频加速缓存设置教学
- 虚拟服务器 被劫持,服务器DNS被劫持,服务器dns被劫持怎么解决?
- 计算机网络实践网线制作,一种用于计算机网络对接网线接头的制作方法
- echarts 3D圆柱形图 实现简单 带图例完美显示隐藏
- #R语言# 生成随机数
- 网上找到了一个电机正反转驱动电路,保留