微信小程序登录页实现验证登录和页面跳转

利用js实现验证登录和页面跳转，开发工具是微信开发者工具。

wxml部分

登录页面的代码，需要再创建一个主页。

<view class="welcome"><p>欢迎使用智能门禁系统</p></view><view class='login_block' ><view><span class="iconfont icon-geren"></span><input type='text' placeholder="请输入宿舍号" bindinput='inputUsr' class='input'></input></view><view><span class="iconfont icon-mima1"></span><input password='true' placeholder="请输入通行密码" bindinput='inputPwd'class='input'></input></view><button type='primary' bindtap='confirmPwd' class="confirm">确定</button></view>

wxss部分

页面的修饰部分，相当于css.

/* pages/login/index.wxss */page{background-color: rgb(97, 145, 248);}.login_block{position: absolute;left: 0;right: 0;top: 0;bottom: 0;display:flex;justify-content: center;flex-direction: column;width: 86vw;height: 50vh;background-color: white;margin: auto;padding: 3vh 3vh;border: 1px solid rgb(202, 201, 201);border-radius: 20px;}.login_block .input{border:none;border-bottom: 1px solid #000000;margin: 2vh 2vh;}.login_block .confirm{height: 8vh;width:40vw;line-height: 8vh;margin-top: 4vh;background-color: rgb(123, 177, 177);}.welcome{display: flex;color: azure;justify-content: center;margin-top: 5vh;}

js部分

先设定账号为admin,密码为passsword,再利用if条件判断。

页面跳转的实现部分：

wx.navigateTo({//url部分是页面的地址url: '../index/index',})

// pages/login/index.jsPage({/*** 页面的初始数据*/data: {password_input:"",usr:"admin",key:"password",},inputUsr:function(e){this.setData({user_input: e.detail.value})},inputPwd:function(e){this.setData({password_input: e.detail.value})},confirmPwd:function(){var usr = this.data.user_input;var pwd = this.data.password_input;var that = thisif(pwd==""||usr==""){wx.showToast({title: '请输入账号和密码',icon: 'none',duration: 2000})}else if(pwd != this.data.key||usr != this.data.usr){wx.showToast({title: '账号或密码错误',icon: 'none',duration: 2000})}else{wx.showToast({title: '验证通过',icon: 'success',duration: 2000})wx.setStorage({key: "password",data: pwd,})wx.navigateTo({url: '../index/index',})}}})

新人上路，各位老铁觉有用给个赞。