如何在微信小程序初始界面输入密码,看到网上给出了很多方法,较为常见的是如何输入一个六位密码。这里介绍一种觉得比较可行的方法,具体实现如下:
最终效果:
代码实现:
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值,便可对程序密码进行调整。