E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序初始界面设置密码
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏