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

最新推荐文章于 2022-12-23 15:45:16 发布

Cascatrix

最新推荐文章于 2022-12-23 15:45:16 发布

阅读量1.1w

点赞数 5

分类专栏： HTML && CSS

本文链接：https://blog.csdn.net/weixin_43361652/article/details/101748726

版权

HTML && CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在微信小程序中实现密码输入的全过程，包括代码实现和样式设计，展示了如何通过wxml、wxss和JS代码控制密码显示与验证，以及如何进行页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最终效果：

在这里插入图片描述

代码实现：

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中实现成功跳转，否则报错 */