微信小程序-利用wxs脚本实现姓名、手机号、身份证号中间带星显示
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。详情可见.
首先,我们可以和pages同级之下创建一个wxs文件夹,所有的wxs文件都可以存放在该目录下。
1.创建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) {//判断当字符串长度为二时,隐藏末尾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
}
2.wxml引用
根据wxs文件所在的目录层级编写合理的路径,使用如下代码在wxml中引入wxs。
<!-- 引入wxs脚本 -->
<wxs src="../../wxs/subutil.wxs" module="tools" />
3.使用
在需要使用的地方使用如下代码即可:
{{tools.sub(string, x, y)}}
以上就是利用wxs实现*号隐藏数据信息的全部内容啦!
微信小程序-利用wxs脚本实现姓名、手机号、身份证号中间带星显示相关推荐
- 【微信小程序】WXS 脚本
概述 1.1.什么是WXS WXS(WeiXin Script)是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构. 1.2.WXS的应用场景 WXML中无法调用在页面的.js中定义的函数 ...
- 微信小程序语言c#,微信小程序推出最新脚本语言WXS,你需要知道的全在这里了...
原标题:微信小程序推出最新脚本语言WXS,你需要知道的全在这里了 感谢"造程序"(微信ID:zaochengxucom)的授权发布. 责编:陈秋歌,关注微信开发等领域,寻求报道或者 ...
- html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
- 微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片 能做到这里 说明你已经可以发送普通文本了 如果没有的话可以看一下我的上一篇文章 有完整的讲解 效果图 语音聊天 发送图片 传送 → 发送图片 发送语音 ** ...
- 微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图 前言 实现 克隆代码 集成 点击事件 点击跳转 代码改造 尾巴 前言 最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
- 微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换 先放一张效果图 需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
- 微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图 发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
- 微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能 如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论, <!-- 商品详情 --> <vie ...
- 微信小程序利用scroll-view和swiper实现图片滚动切换
微信小程序利用scroll-view和swiper实现图片滚动切换 <view class="starbox"><view class="starare ...
最新文章
- delegate,event, lambda,Func,Action以及Predicate
- 《代码整洁之道:程序员的职业素养》一一1.5 参考文献
- 【纯技术贴】.NETStandard FreeSql v0.0.9 功能预览
- svn 添加目录 linux,linux-现有目录的SVN设置
- LeetCode 2115. 从给定原材料中找到所有可以做出的菜(拓扑排序)
- python爬虫代码-23个Python爬虫开源项目代码
- Python调用Cplex:安装,测试,实例
- 网络安全攻防实验室通关教程-注入关
- 电子词典系统vc++_《VC++ 编程词典(珍藏版)》
- VMware Workstation虚拟机环境下Xubuntu系统如何设置中文
- linux segmentation fault 信号,linux中 Segmentation fault问题
- 我只是还迷惘,我们只是不言伤的孩纸:伤感QQ空间日志
- golang 使用map处理多级json后输出map中的数组
- 微信小程序设置缓存过期时间
- android epub 开源,EPUB SDK
- html个人中心布局,html5前端开发笔记-个人中心
- css 笔记——设置禁用中文输入法
- 货运从业资格证考试技巧
- 机械与计算机大一学的一样吗,机械设计制造及其自动化专业各校大一新生学的课程一样吗...
- 简述计算机辅助质量管理系统的作用,2018年7月电大本科《机械CADCAM》期末考试试题及答案...