微信小程序初始界面设置密码

浏览量：7342 时间：2019-12-23 来源：c851038595

 如何在微信小程序初始界面输入密码，看到网上给出了很多方法，较为常见的是如何输入一个六位密码。这里介绍一种觉得比较可行的方法，具体实现如下：

最终效果：

小程序

代码实现：

wxml：

input class="inputBox" bindinput="saveInputValue" password='{{ispassword}}' placeholder="请输入密码" focus="{{focus}}" /    !--设置输入框，password即密码形式--view class="toggle-tip" bindtap="toggleValue"      !--绑定判断输入密码是否正确--text class="tip {{valueIsShow?'active':''}}"    {{valueIsShow?'隐藏密码':'显示密码'}}    /text/view    !--设置条件判断，控制是否显示输入内容--button class="buttoncolor" bindtap="onEnter"进入平台/button   !--跳转至首页--

wxss：

.inputBox{   color:  #ffffff; } .tip {  text-align: center;  font-size: 30rpx;  color: #666; }.toggle-tip {     margin-top: 10rpx;           text-align: center; }.toggle-tip .tip {          font-size: 22rpx;         line-height: 22rpx;    color: #666; }.toggle-tip .active {     color: #087b46; }.buttoncolor {  font-size: 40rpx;   color: #ffffff;   background-image: linear-gradient(-45deg, #fbc2eb 0%, #a6c1ee 100%);   background-size: cover;   margin: 100rpx;   bottom: 50rpx; }

JS：

//index.jsconst app = getApp()Page({  data: {      avatarUrl: './user-unlogin.png',      userInfo: {},      logged: false,      takeSession: false,      requestResult: '',      valueIsShow: false,      value:'',      valueTest:'',      ispassword: true/* 设置密码和判断密码是否正确的值 */    },  onLoad: function() {   if (!wx.cloud) {         wx.redirectTo({              url: '../chooseLib/chooseLib',            })          return        }    // 获取用户信息        wx.getSetting({          success: res = {             if (res.authSetting['scope.userInfo']) {          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框                wx.getUserInfo({                    success: res = {                      this.setData({                         avatarUrl: res.userInfo.avatarUrl,                          userInfo: res.userInfo                        })                     }                  })              }            }         })      },  onGetUserInfo: function(e) {      if (!this.logged && e.detail.userInfo) {         this.setData({            logged: true,             avatarUrl: e.detail.userInfo.avatarUrl,             userInfo: e.detail.userInfo          })        }     },  onEnter: function (e) {      let valueTest = this.data.valueTest       console.log(valueTest)       if(valueTest == '0'){         wx.switchTab({            url: '../home/home',           })          wx.showToast({            title: 'success',            icon: 'success',             duration: 2000           })        }        else{          wx.showToast({              title: 'wrong',              icon: 'none',              duration: 2000            })         }             },/* 设置if进行条件判断，用valueTest的值对密码是否正确进行判定，此处valueTest值为‘0’时实现跳转，否则提示输入失败，重新输入 */     toggleValue() {      this.setData({         valueIsShow: !this.data.valueIsShow,          ispassword: !this.data.ispassword        })     },    /* 此处设置是否显示密码，返回wxml，返回值false和true */ saveInputValue:function(e) {       let value = e.detail.value        console.log(value)        if (value == 'c851038595') {/* 等号后面即为设定的密码，此处密码为c851038595 */            this.data.valueTest = '0'         }        else{          this.data.valueTest = ''         }    },})/* 此处设置密码值value并进行判断，若密码值正确，则判定值为‘0’，并在onEnter中实现成功跳转，否则报错 */