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

本文详细介绍了在微信小程序中实现密码输入的全过程,包括代码实现和样式设计,展示了如何通过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中实现成功跳转,否则报错 */

由此,我们可直接通过更改js内的saveInputValue的value值,便可对程序密码进行调整。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cascatrix

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值