微信小程序登录页面代码

微信小程序登录页面代码

微信小程序实现登录页面的方法：1.创建微信小程序项目；2.在index.wxml文件中添加页面设计代码；3.在index.wxss文件中添加页面样式代码；4.在index.js文件中添加用户交互代码；5.保存编辑的代码并进行调试便可。

具体实现内容：

1、首先在创建一个微信小程序项目。

2、在pages包下的index文件中的index.wxml文件里添加页面设计代码。

<viewclass="container">
<viewclass="login-icon">
<!--登录页面-->
<imageclass="login-img"src="../img/login.jpg"></image>
</view>
<viewclass="login-from">
<!--账号-->
<viewclass="inputView">
<labelclass="loginLab">账号</label>
<inputclass="inputText"placeholder="请输入账号"bindinput="usernameInput"/>
</view>
<viewclass="line"></view>
<!--密码-->
<viewclass="inputView">
<labelclass="loginLab">密码</label>
<inputclass="inputText"password="true"placeholder="请输入密码"bindinput="passwordInput"/>
</view>
<!--按钮-->
<viewclass="loginBtnView">
<buttonclass="loginBtn"type="primary"size="{{primarySize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="login">登录</button>
</view>
</view>
</view>

3、在pages包下的index文件中的index.wxss文件里添加页面样式代码。

page{
height:100%;
}
.container{
height:100%;
display:flex;
flex-direction:column;
padding:0;
box-sizing:border-box;
/*background-color:rgb(156,23,78)*/
}
/*登录图片*/
.login-icon{
flex:none;
}
.login-img{
width:750rpx;
}
/*表单内容*/
.login-from{
margin-top:20px;
flex:auto;
height:100%;
}
.inputView{
/*background-color:#fff;*/
line-height:45px;
border-radius:20px;
border:1pxsolid#999999;
}
/*输入框*/
.nameImage,.keyImage{
margin-left:22px;
width:18px;
height:16px
}
.loginLab{
margin:15px15px15px10px;
color:#545454;
font-size:14px
}
.inputText{
flex:block;
float:right;
text-align:right;
margin-right:22px;
margin-top:11px;
color:#cccccc;
font-size:14px
}
.line{
margin-top:8px;
}
/*.line{
width:100%;
height:1px;
background-color:#cccccc;
margin-top:1px;
}*/
/*按钮*/
.loginBtnView{
width:100%;
height:auto;
/*background-color:#DCDCDC;*/
margin-top:0px;
margin-bottom:0px;
padding-bottom:0px;
}
.loginBtn{
width:90%;
margin-top:40px;
border-radius:10px;
}

4、在pages包下的index文件中的index.js文件里添加用户交互代码。

//index.js
//获得利用实例
constapp=getApp()
Page({
data:{
username:'',
password:''
},
//事件处理函数
bindViewTap:function(){
wx.navigateTo({
url:'../logs/logs'
})
},
onShow:function(){
//生命周期函数--监听页面显示
wx.hideTabBar({})
},
onLoad:function(){
},
//获得输入账号
usernameInput:function(e){
this.setData({
username:e.detail.value
})
},
//获得输入密码
passwordInput:function(e){
this.setData({
password:e.detail.value
})
},
//登录处理
login:function(){
varthat=this;
if(this.data.username.length==0||this.data.password.length==0){
wx.showToast({
title:'账号或密码不能为空',
icon:'none',
duration:2000
})
}else{
wx.request({
url:app.globalData.globalReqUrl+'/login/login',//仅为示例，并不是真实的接口地址
method:'post',
data:{
username:that.data.username,
password:that.data.password
},
header:{
'content-type':'application/x-www-form-urlencoded'//默许值
},
success(res){
if(res.data.code=="OK"){
varunitName=res.data.data.User.unitName;
varunitId=res.data.data.User.unitId;
wx.setStorageSync('unitId',unitId);
wx.setStorageSync('unitName',unitName);
wx.switchTab({
url:'../overviewData/realTimeData'
})
}else{
wx.showToast({
title:res.data.message,
icon:'none',
duration:2000
})
}
}
})
}
}
})

5.最后保存编辑的代码进行调试，保存快捷键【Ctrl+S】。

在开发工具左边便可看到设计效果。

本文来源：https://www.yuntue.com/post/70791.html | 云服务器网，转载请注明出处！