index.wxml
<view class='login-all'>
<view class="form">
<view class='account'>
<view class='title'>账号</view>
<input placeholder='用户名/手机名/邮箱' placeholder-style='color:rgba(0,0,0,0.2);font-size:14px' bindinput='accountInput'/>
</view>
<view class='hr'></view>
<view class='account'>
<view class='title'>密码</view>
<input placeholder='请输入密码' password placeholder-style='color:rgba(0,0,0,0.2);font-size:14px' bindblur='pswBlur'/>
<image src='../../images/see.jpg' class='see'></image>
</view>
<view class='hr'></view>
<button class='btn' disabled='{{disabled}}' type='{{btnstate}}' bindtap='login'>登录</button>
</view>
<view class='fast'>
<view><navigator url='../login/login'>手机快速注册</navigator></view>
<view><navigator url='../manage/manage'>企业用户注册</navigator></view>
<view><navigator>找回密码</navigator></view>
</view>
<view class='login'>
<view><image src='../../images/wxlogin.png' style='width:65px;height:90px'></image></view>
<view><image src='../../images/qqlogin.png' style='width:65px;height:90px'></image></view>
</view>
</view>
index.wxss
.account{
display: flex;
flex-direction: row;
padding-left: 20px;
padding-top: 30px;
padding-bottom: 10px;
}
.title{
margin-right: 45px;
}
.hr{
border-bottom: 0.5px solid #e5e5e5;
width: 90%;
margin: 0 auto;
}
.see{
width: 30px;
height: 20px;
position: absolute;
right: 20px;
}
.btn{
width: 90%;
margin: 0 auto;
margin-top: 50px;
}
.login{
display: flex;
flex-direction: row;
margin-top: 200px;
}
.login view{
margin: 0 auto;
}
.fast{
margin-top: 20px;
font-size: 14px;
color:rgba(0,0,0,0.6);
display: flex;
flex-direction: row;
}
.fast view{
margin: 0 auto;
}
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
disabled:true, //是否禁用按钮
btnstate:"default", //按钮的样式
account:'', //用户名输入的值
password:'' //密码值
},
accountInput(e){
var content = e.detail.value;
if (content != ''){
this.setData({ disabled: false, btnstate: "primary", account: content})
}else{
this.setData({ disabled: true, btnstate: "default"})
}
},
pswBlur(e){
var password = e.detail.value;
if (password != '') {
this.setData({ password: password });
}else{
wx.showToast({ //API
title: '请输入密码',
duration: 1000,
icon: 'info'
})
}
},
login(e){
var account=this.data.account; //取出data中的account值赋给account
var password=this.data.password;
var user=wx.getStorageSync("user"); //获取内存中的user,自定义的缓存数据写在app.js中
if (user.account == account && user.password == password && user.account != '' && user.password != ''){
wx.showToast({
title: '登录成功',
icon:'success',
duration:1000,
success(){
wx.navigateTo({ //执行成功跳转到logs页面
url: '../logs/logs',
})
}
})
}else{
wx.showToast({
title: '输入有误',
duration:1000,
icon:'info'
})
}
}
})
app.js
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
var user=wx.getStorageSync("user");//先获取缓存,如果!user则使用下面if来调用loadConfigs()函数来获取自己定义的缓存数据赋给user。因为如果之前有注册的步骤会向缓存中添加数据,这时候不调用loadConfigs()函数也会有缓存数据,但是如果没有注册的话,就要用自己定义的缓存数据来测试
if(!user){
user = this.loadConfigs();
}
wx.setStorageSync("user", user)//将数据存储在本地缓存中指定的 key 中,也就是user,后续index.js中使用var user=wx.getStorageSync("user")获取到缓存值
},
//先定义了一个函数里面有自己定义的缓存值user,并返回user的值
loadConfigs(){
var user=new Object();
user.account="1555";
user.password="123456";
return user;
},
globalData: {
userInfo: null
}
})
这样一个简单的登录页面就完成啦
注册页面请参看另一篇博文
微信小程序-表单注册实例(自定义缓存数据测试)