微信小程序开发笔记（1）实现登陆界面
login.wxml
login.wxss
/**login.wxss**/
.wxUserInfo {
display: flex;
flex-direction: column;
align-items: center;
}
.input{
padding-left: 10rpx;
height: 80rpx;
}
.inputView{
border: 1rpx solid #66c5ab; /*边界：大小1rpx, 为固体，为绿色*/
border-radius: 30rpx; /*边界角的弧度*/
margin-left: 5%;
margin-right: 5%;
margin-top: 15rpx;
}
.buttonForgetPassword{
color: #66c5ab;
width:30%;
margin-right: 5%;
margin-left: 65%;
margin-top: 5rpx;
background: none;
}
.buttonForgetPassword::after{
border: none; /*button去边框*/
}
.buttonLoginView{
border-radius: 30px;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 10rpx;
}
.buttonLogin{
background: #66c5ab;
color: white;
}
.buttonLogin::after{
border: none;
}
.buttonRegisterView{
border-radius: 30rpx;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 5rpx;
}
.buttonRegister{
background: none;
color: #66c5ab;
}
.buttonRegister::after{
border: none;
}login.js
var
app = getApp()
Page({
//页面的初始数据
data: {
response:
""
,
},
//获取用户名和用户密码
inputUserName:
function
(e)
{
getApp().globalData.userName = e.detail.value.replace(/\s+/g,
''
);
//获取用户名并去空格
console.log(getApp().globalData.userName);
//控制台输出 用于调试
},
inputUserPwd:
function
(e)
{
getApp().globalData.userPassword = e.detail.value.replace(/\s+/g,
''
);
//获取用户密码并去空格
console.log(getApp().globalData.userPassword);
//控制台输出 用于调试
},
//忘记密码
forgetPassword:
function
(){
wx.navigateTo({
url:
'../recoverPassword/recoverPassword'
,
success:
function
(res) {
// success
console.log(
"跳转成功"
);
},
fail:
function
(res) {
// fail
console.log(
"跳转失败"
);
},
complete:
function
(res) {
// complete
}
})
},
//登录
Login:
function
()
{
if
(getApp().globalData.userName ==
""
|| getApp().globalData.userPassword ==
""
)
{
wx.showModal({
title:
'提示'
,
content:
'用户名或密码不能为空'
,
})
}
/* else if (getApp().globalData.userName == "test" && getApp().globalData.userPassword==123)
{ //test 和 123仅用于测试
wx.showLoading({
title: '正在登陆',
})
wx.switchTab({
url: '../main/main' , //登陆成功 跳转至主页面 注意往回两个目录 所以是两个.
success: function (res) {
// success
console.log("跳转成功");
},
fail: function (res) {
// fail
console.log("跳转失败");
},
complete: function (res) {
// complete
}
})
}*/
else
{
var
that =
this
;
wx.request({
url:
'https://www.863870.xyz:8443/smart_chapter/login'
,
data: {
user_name: getApp().globalData.userName,
user_password: getApp().globalData.userPassword
},
method:
'POST'
,
header: {
'content-type'
:
'application/x-www-form-urlencoded'
},
success:
function
(res) {
if
(res.data.substring(
0
,
4
) ==
"user"
)
//目前仅校验普通用户模式
{
//注意网络请求的返回值末尾会被额外添加制表符 因此进行字符串截取
getApp().globalData.userType = res.data.substring(
0
,
4
);
wx.switchTab({
url:
'../main/main'
,
//登陆成功 跳转至主页面 注意往回两个目录 所以是两个.
success:
function
(res) {
// success
console.log(
"跳转成功"
);
},
fail:
function
(res) {
// fail
console.log(
"跳转失败"
);
},
complete:
function
(res) {
// complete
}
})
}
else
{
wx.showModal({
title:
'提示'
,
content:
'用户名或密码错误'
,
})
}
},
fail:
function
(res) {
console.log(
'submit fail'
);
wx.showModal({
title:
'提示'
,
content:
'网络未连接 请检查网络设置'
,
})
},
complete:
function
(res) {
console.log(
'submit complete'
);
}
})
}
},
//注册
Register:
function
(){
wx.navigateTo({
url:
'../register/register'
,
//跳转至注册页面 注意往回两个目录 所以是两个.
success:
function
(res) {
// success
console.log(
"跳转成功"
);
},
fail:
function
(res) {
// fail
console.log(
"跳转失败"
);
},
complete:
function
(res) {
// complete
}
})
},
/**
*生命周期函数--监听页面加载
*/
onLoad:
function
() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:
function
() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow:
function
() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:
function
() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:
function
() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:
function
() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom:
function
() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage:
function
() {
}
})
效果图：
