微信小程序6位支付密码输入框

微信小程序6位支付密码输入框

产品需求

微信小程序支付密码6位输入框

实现效果

非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置

实现原理

1.放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式

2.当点击启洞输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式

3.限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示悄冲枯的渲判兄染条件

4.当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等...）

其他说明

6位支付密码是一个很常见的需求。

在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。

Github地址： https://github.com/evan2020/six-Input-box

随着互联网的燃袜发展，越来越多的敏感数据需要在网络上开放传输。为了满足用户隐私需求，微信近日上线了一款名为“腾讯密信”小程序，用户可以使用密信传输隐私信息（如私密文件/密码等）。

使用密信小程序加密信息时，用户需要对主密钥的完整性和正确性负责。此外，当用户对加密数据进行复制或者迁移时也需要对枯段手加密元信息的完整性和正确性负责。

腾讯密信使用方法

腾讯密信使用比较简单，在微信搜索找到该小程序，之后创建密信，并输入需要加密的内容。用户可将密信内容以及备注进行加密，然后指定某些联系人进行接收，只有指定接收方才能查看。

此外，密信还可以设置失效日期（类似于网盘有效期），失效后密信将不能被查看。密信成功创建后，会生成密信二维码，创建人可以下载二维码发送或通过分享到微信发送给收件人，如图所示。

之没嫌后收件人可在微信聊天框中直接打开并解密，也可以使用微信扫描相应的二维码查看密信。

不过，目前腾讯密信小程序处于系统更新维护状态，微信搜索结果中，暂不显示结果，尚不清楚什么时候会再次上线，感兴趣的小伙伴，不妨再等等。

阅读原文

打开微信公众平台，然后扫码进入小程序后台管理

2

/5

在小程序主页中点击头像下的“小程序名称”

3

/5

然后选择“基本设置”下的“账号信息”，再点击“修改密码”

4

/5

扫码验证身份（必须是管理员御模厅才有权限修改）

5

/5

将原密码和新码好密码填写完成后镇隐，提交等待审核完成就可以了

---