用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序6位密码框/验证码实现 基于微信7.0.9

Rolan 2020-5-14 00:31

需求实现一个能够输入6位密码框组件(如微信支付密码框类似)思路一(不可行方案)使用一个Input 配合 letter-spacing 属性使用。后实验下来,input 并不使用css中的 letter-spacing 属性。思路二 (可行方案)在页 ...

需求

实现一个能够输入6位密码框组件(如微信支付密码框类似)

思路一(不可行方案)

使用一个Input 配合 letter-spacing 属性使用。后实验下来,input 并不使用css中的 letter-spacing 属性。

思路二 (可行方案)

在页面中,隐藏一个input,然后控制 input 组件的 focus 属性从而实现6位密码框输入。
需要注意的是,在我写这个组件并验证时,(iphone xs max ios13.3) 微信版本为7.0.8,实测组件可以正常工作。当我微信升级为7.0.9时,input 手动设置 focus 并没有生效,同时,该 input 没有办法再次聚焦并弹出输入法。(很奇怪的是,我同事的手机也是iphone xs max ios13.3 微信 7.0.9 没有这个问题

组件布局拆分

组件wxml

  1. <view class="pay-password-container">
  2. <text class="pay-password-title">安全验证</text>
  3. <text class="pay-password-tips">您使用了虚拟资产,为保障安全,请输入支付密码!</text>
  4. <view style="position:relative">
  5. <view class="pay-password-layout">
  6. <view wx:for="{{passwordlayout}}" class="pay-password-item">
  7. <view wx:if="{{index < passwordCode.length}}" class="dot" />
  8. </view>
  9. </view>
  10. <!-- 这里采用了一个投机取巧的办法,使用两个Input 防止在某些机型上,input设置focus会导致input整个失效-->
  11. <input value="{{passwordCode}}" password maxlength="6" type="number" class='input-container-2' bindinput="passwordInput" />
  12. </view>
  13. <input value="{{passwordCode}}" focus="{{focus}}" maxlength="6" type="number" class='input-container-2' bindinput="passwordInput" bindfocus="getFocus" bindblur="blur" />
  14. <view class='forget-password' catchtap="clickForgetPassword">忘记密码?</view>
  15. <view class="empty-layout" />
  16. <view class="controll-layout">
  17. <view class="cancel-button" catchtap="dismiss">
  18. <text>取消</text>
  19. </view>
  20. <view class="divider" />
  21. <view class="sure-button" catchtap="sure">
  22. <text>确定</text>
  23. </view>
  24. </view>
  25. </view>

组件wxss

  1. .pay-password-container {
  2. width: 650rpx;
  3. height: 525rpx;
  4. border-radius: 16rpx;
  5. background: #fff;
  6. display: flex;
  7. display: -webkit-flex;
  8. flex-direction: column;
  9. align-items: center;
  10. }
  11. .pay-password-title {
  12. font-size: 40rpx;
  13. font-weight: bold;
  14. color: #030303;
  15. margin-top: 59rpx;
  16. flex-shrink: 0;
  17. }
  18. .pay-password-tips {
  19. font-size: 24rpx;
  20. color: #333;
  21. opacity: 0.5;
  22. margin-top: 31rpx;
  23. flex-shrink: 0;
  24. }
  25. .pay-password-layout {
  26. display: flex;
  27. display: -webkit-flex;
  28. flex-direction: row;
  29. margin-top: 40rpx;
  30. flex-shrink: 0;
  31. z-index: 105rpx;
  32. }
  33. .pay-password-item:first-child {
  34. height: 90rpx;
  35. width: 90rpx;
  36. border-radius: 8rpx 0rpx 0rpx 8rpx;
  37. border-top: 1px solid #bbb;
  38. border-left: 1px solid #bbb;
  39. border-bottom: 1px solid #bbb;
  40. box-sizing: border-box;
  41. -moz-box-sizing: border-box;
  42. -webkit-box-sizing: border-box;
  43. display: flex;
  44. display: -webkit-flex;
  45. justify-content: center;
  46. align-items: center;
  47. }
  48. .pay-password-item {
  49. height: 90rpx;
  50. width: 90rpx;
  51. border-top: 1px solid #bbb;
  52. border-left: 1px solid #bbb;
  53. border-bottom: 1px solid #bbb;
  54. box-sizing: border-box;
  55. -moz-box-sizing: border-box;
  56. -webkit-box-sizing: border-box;
  57. display: flex;
  58. display: -webkit-flex;
  59. justify-content: center;
  60. align-items: center;
  61. }
  62. .pay-password-item:last-child {
  63. height: 90rpx;
  64. width: 90rpx;
  65. border-radius: 0rpx 8rpx 8rpx 0rpx;
  66. border-top: 1px solid #bbb;
  67. border-left: 1px solid #bbb;
  68. border-bottom: 1px solid #bbb;
  69. border-right: 1px solid #bbb;
  70. box-sizing: border-box;
  71. -moz-box-sizing: border-box;
  72. -webkit-box-sizing: border-box;
  73. display: flex;
  74. display: -webkit-flex;
  75. justify-content: center;
  76. align-items: center;
  77. }
  78. .pay-password-item .dot {
  79. height: 20rpx;
  80. width: 20rpx;
  81. background: #030303;
  82. border-radius: 50%;
  83. }
  84. .input-container-2 {
  85. position: absolute;
  86. top: 40rpx;
  87. height: 100rpx;
  88. width: 1500rpx;
  89. left: -500rpx;
  90. }
  91. .empty-layout {
  92. flex-grow: 1;
  93. }
  94. .controll-layout {
  95. flex-shrink: 0;
  96. border-top: 1px solid #e9e9e9;
  97. width: 100%;
  98. height: 100rpx;
  99. box-sizing: border-box;
  100. -moz-box-sizing: border-box;
  101. -webkit-box-sizing: border-box;
  102. display: flex;
  103. display: -webkit-flex;
  104. }
  105. .controll-layout .cancel-button {
  106. flex-grow: 1;
  107. display: flex;
  108. display: -webkit-flex;
  109. justify-content: center;
  110. align-items: center;
  111. }
  112. .cancel-button text {
  113. color: #333;
  114. opacity: 0.5;
  115. font-size: 34rpx;
  116. }
  117. .controll-layout .divider {
  118. background: #e9e9e9;
  119. height: 100%;
  120. width: 1px;
  121. flex-shrink: 0;
  122. }
  123. .controll-layout .sure-button {
  124. flex-grow: 1;
  125. display: flex;
  126. display: -webkit-flex;
  127. justify-content: center;
  128. align-items: center;
  129. }
  130. .sure-button text {
  131. font-size: 34rpx;
  132. color: #f8aa00;
  133. font-weight: bold;
  134. }
  135. .forget-password {
  136. font-size: 24rpx;
  137. color: #333;
  138. opacity: 0.5;
  139. margin-top: 30rpx;
  140. align-self: flex-end;
  141. margin-right: 55rpx;
  142. }

组件js

input1 带 focus 属性,手动设置 focus 让其弹出。
input2 不带 focus 属性,需要用户手动点击输入框(6格)后,输入。
这样就避免了对 输入框(6格)监听tap事件,并设置focus 来让 input 聚焦,让输入法弹起。就解决了部分手机上手动设置 focus 会导致 input 组件没有响应的问题。

  1. Component({
  2. data: {
  3. passwordlayout: [1, 1, 1, 1, 1, 1],
  4. passwordCode: "",
  5. focus: false
  6. },
  7. methods: {
  8. showModal: function () {
  9. this.setData({
  10. focus: true
  11. })
  12. },
  13. closeModal: function () {
  14. this._clearData();
  15. },
  16. passwordInput: function (e) {
  17. this.setData({
  18. passwordCode: e.detail.value
  19. })
  20. },
  21. focusInput: function () {
  22. this.setData({
  23. focus: true
  24. })
  25. },
  26. getFocus: function () {
  27. this.setData({
  28. focus: true
  29. })
  30. },
  31. blur: function () {
  32. this.setData({
  33. focus: false
  34. })
  35. },
  36. dismiss: function (e) {
  37. this.closeModal();
  38. },
  39. sure: function (e) {
  40. if (this.data.passwordCode.length < 6) {
  41. UIManager.showToast('请输入支付密码');
  42. return;
  43. }
  44. //todo 支付密码验证
  45. },
  46. clickForgetPassword: function (e) {
  47. //todo 忘记密码
  48. },
  49. }
  50. })
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 钱小俊24岁了呢 来自: 简书