在商城中,访问个人中心或者购物车前先判断是否登录,从缓存中读取用户名,密码等,若无登录,或者清楚缓存,则需登录。
下面以本人做的登录为例,login.js页面
// pages/login/login.js
Page({
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var token = wx.getStorageSync('token')
var name = wx.getStorageSync('name')
var pwd = wx.getStorageSync('pwd')
if(token ==''){
wx.navigateTo({
url: '/pages/index/index'
})
}
if(name!=''){
if(pwd!=''){
wx.redirectTo({
url: '../my/my?name='+name+'&pwd='+pwd+''
})
}
}
},
//用户名和密码输入框事件
usernameInput:function(e){
// console.log(e)
this.setData({
userN:e.detail.value
})
},
passwordInput:function(e){
this.setData({
passW:e.detail.value
})
},
//登录按钮点击事件,调用参数要用:this.data.参数;
//设置参数值,要使用this.setData({})方法
loginBtnClick:function(a){
// console.log(a)
var that=this
if(this.data.userN.length == 0 || this.data.passW.length == 0){
this.setData({
infoMess:'温馨提示:用户名或密码不能为空!',
})
}else{
wx.request({
url: 'http://www.tpshop.com/index.php?m=Api&c=User&a=login',
data: {
username: this.data.userN,
password: this.data.passW,
unique_id:'123456'
},
header: {
'content-type': 'application/json'
},
success: function(res) {
// console.log(res.data.result)
if(res.data.status == -1){
userName:'缺少参数'
}else{
//存用户session
// wx.setStorageSync('token', res.data.result.token)
// wx.setStorageSync('user_id', res.data.result.user_id)
// wx.setStorageSync('name', that.data.userN)
// wx.setStorageSync('pwd', that.data.passW)
wx.setStorage({
key:'name',
data:res.data.result.mobile,
})
wx.setStorage({
key:'token',
data:res.data.result.token,
})
wx.setStorage({
key:'pwd',
data:that.data.passW,
})
// wx.switchTab({
wx.redirectTo({
url: '../my/my?name='+res.data.result.mobile+'&pwd='+that.data.passW+''
})
}
}
})
}
}
})
login.wxml页面
<view class="login">
<view class="section">
<view class="section__title">用户名:</view>
<input name="username" placeholder="请输入邮箱/手机号" bindinput="usernameInput" />
</view>
<view class="section">
<view class="section__title">密码:</view>
<input password type="text" name="password" placeholder="密码" bindinput="passwordInput" />
</view>
<view id='button'>
<button formType="submit" bindtap="loginBtnClick">登录</button>
</view>
<view id="tishi">
{{infoMess}}
</view>
<view id="xia">
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1" checked="checked"/>自动登录</label>
</checkbox-group>
<view style="float:left;">
<navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">免费注册</navigator>
<navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">忘记密码?</navigator>
</view>
</view>
<view id='di'>第三方登录</view>
<view id='san'>
<image src="../../utils/images/QQ.png" />
<image src="../../utils/images/zhifubao.png" />
</view>
</view>
以及手机版样式,login.wxss页面
/* pages/login/login.wxss */
.Login{ width:90%; margin:auto; overflow:hidden; padding-top:20px;}
#my input{
border: 1px solid black;
float: left;
margin-left: 5px;
}
/*page{
margin-top: 20px;
}*/
.section{
margin-top: 20px;
margin-left:5px;
display: flex;
flex-direction: row;
width:95%; overflow:hidden; overflow:hidden;
}
.section__title{
width:25%; float:left; font-size:16px; line-height:40px; color:#666;
}
.section input{
border: 1px solid #DFDFDF; height:30px; line-height:30px; width:95%; padding-left: 5px; -webkit-appearance: none; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border-radius: 0; -webkit-rtl-ordering: logical; -webkit-user-select: text; cursor: auto; background-color: white; font-size:14px; line-height:30px;
}
#button button{
display:block; margin:auto; background:#FF2233; font-size:16px; line-height:40px;
border:0px; color:#FFF; width:97%; margin:auto;margin-top:20px; margin-bottom:10px;border-radius:5px;
}
#xia{
margin-top: 30px;
margin-left:5px;
}
#xia checkbox-group{
float: left;color:#737373;font-size:15px;
}
#xia view{
float: left;
margin-left: 72px;
}
#xia navigator{
float: left;
margin: 0 3px;
color:dodgerblue;font-size:15px;
}
#di{
text-align:center;font-size:12px; padding-top:50px;
color:#737373;
}
#san{
margin-left: 23%;
}
#san image{
width: 40px;
height: 40px;
margin: 8% 10%;
}
#tishi{
color:red;
text-align:center;font-size:12px; padding-top:8px;
}
完成简单的登录页面