普通登錄注冊以及用戶授權登陸
普通登陸注冊
概述
此功能的實現簡單的借助了微信小程序的雲開發，具體在哪里使用，我會標出來。對於用戶名、賬號、密碼都做了簡單的校驗。主要練手功能的實現，樣式只做了簡單的編寫。
用戶頁面展示登陸注冊兩個按鈕，沒有賬戶可以選擇注冊，注冊成功后跳轉到展示登陸注冊的用戶頁面。登陸成功后，用戶界面展示用戶名。
實現注冊功能
效果展示
用戶名長度至少兩位且小於十位，用戶賬號至少四位，用戶密碼至少四位。成功注冊后，跳轉回用戶登陸注冊頁面。
代碼與注釋
輸入用戶名
<input class="input" bindinput="getName"></input>
輸入用戶賬號
<input class="input" bindinput="getZhangHao"></input>
輸入用戶密碼
<input class="input" bindinput="getMiMa"></input>
<button bindtap="zhuce" type="primary">注冊</button>
.input{
border: 1px solid gainsboro;
margin: 15rpx;
}
Page({
/**
* 頁面的初始數據
*/
data: {
name:'',
zhanghao:'',
mima:''
},
//獲取用戶名
getName(e){
this.setData({
name:e.detail.value
})
},
//獲取用戶賬號
getZhangHao(e){
this.setData({
zhanghao:e.detail.value
})
},
//獲取用戶密碼
getMiMa(e){
this.setData({
mima:e.detail.value
})
},
//注冊
zhuce(){
let name=this.data.name
let zhanghao=this.data.zhanghao
let mima=this.data.mima
console.log('name',name)
console.log('zhanghao',zhanghao)
console.log('mima',mima)
/* 校驗用戶名 */
if(name.length<2){
wx.showToast({
icon:'none',
title: '用戶名至少2位',
})
return
}
if(name.length>10){
wx.showToast({
icon:'none',
title: '用戶名最多10位',
})
return
}
// 校驗賬號
if(zhanghao.length<4){
wx.showToast({
icon:'none',
title: '用戶賬號至少4位',
})
return
}
//校驗密碼
if(mima.length<4){
wx.showToast({
icon:'none',
title: '用戶密碼至少4位',
})
return
}
//注冊功能實現
//使用微信官方雲開發提供的 wx.cloud.database().collection('user').add({})，在數據庫中的user表中添加新的用戶名、賬號、密碼。
wx.cloud.database().collection('user').add({
data:{
name:name,
zhanghao:zhanghao,
mima:mima
},
success(res){
wx.showToast({
title: '注冊成功',
})
wx.navigateTo({
url: '../user/user',//跳轉到用戶登陸注冊界面
})
},
fail(res){
console.log('fail',res)
}
})
}
})
雲開發 數據庫中添加新的表
實現登錄功能
效果展示
代碼
<!--pages/login/login.wxml-->
輸入賬號
<input class="input" bindinput="getZhangHao"></input>
輸入密碼
<input class="input" bindinput="getMiMa"></input>
<button type="primary" bindtap="login">登陸</button>
.input{
border: 1px solid gainsboro;
margin: 15rpx;
}
// pages/login/login.js
Page({
/**
* 頁面的初始數據
*/
data: {
zhanghao:'',
mima:''
},
// 獲取賬號
getZhangHao(e){
this.setData({
zhanghao:e.detail.value
})
},
// 獲取密碼
getMiMa(e){
this.setData({
mima:e.detail.value
})
},
// 登陸功能
login(){
let zhanghao=this.data.zhanghao
let mima=this.data.mima
// console.log('賬號',zhanghao,'密碼',mima)
//賬號校驗
if(zhanghao.length<4){
wx.showToast({
icon:'none',
title: '賬號至少4位',
})
return
}
//密碼校驗
if(mima.length<4){
wx.showToast({
icon:'none',
title: '密碼至少4位',
})
return
}
//借助小程序雲開發提供的 wx.cloud.database().collection('user').where({})
//指定查詢與輸入賬號相等賬號，返回帶新查詢賬號的新的集合引用
//.get({})獲取根據查詢條件篩選后的集合數據。
//如果輸入密碼與集合密碼相同則登陸成功，則傳用戶名參數並跳轉到用戶界面，用戶界面顯示用戶名
wx.cloud.database().collection('user').where({
zhanghao:zhanghao
}).get({
success(res){
let user=res.data[0]
console.log(user.name)
if(mima==user.mima){
wx.showToast({
title: '登陸成功',
})
wx.navigateTo({
url: '../user/user?name=' + user.name,
})
//保護用戶登陸狀態，將用戶信息存儲到Storage
wx.setStorageSync('user', user)
}else{
wx.showToast({
icon:'none',
title: '賬號或密碼不正確',
})
}
},
fail(res){
console.log("fail",res)
}
})
}
})
可在
中看到。
實現退出功能以及用戶界面
效果展示
未登錄
已登錄
退出登錄返回到未登錄界面
代碼
<!--pages/user/user.wxml-->
<!-- 未登錄 -->
<view wx:if="{{!loginOK}}">
<button type="primary" class="zhuce" bindtap="denglu">登陸</button>
<button class="zhuce" bindtap="zhuce">注冊</button>
</view>
<!-- 已登陸 -->
<view wx:else class="login-ok">
<text>{{name}}</text>
<button bindtap="tuichu">退出登錄</button>
</view>
/* pages/user/user.wxss */
.zhuce{
margin-top: 50rpx;
}
.login-ok{
text-align: center;
}
// pages/user/user.js
Page({
/**
* 頁面的初始數據
*/
data: {
loginOK:false,
name:''
},
// 去登陸頁
denglu(){
wx.navigateTo({
url: '../login/login',
})
},
// 去注冊頁
zhuce(){
wx.navigateTo({
url: '../index/index',
})
},
//展示獲取到的用戶名
onShow(){
let user=wx.getStorageSync('user')
//storage中存在user且用戶名存在則更改展示用戶名的條件為true
if(user&&user.name){
this.setData({
loginOK:true,
name:user.name
})
}else{
this.setData({
loginOK:false
})
}
},
// 退出登錄
//退出登陸后將storage中的user清空
tuichu(){
wx.setStorageSync('user', null)
//校驗
let user=wx.getStorageSync('user')
if(user&&user.name){
this.setData({
loginOK:true,
name:user.name
})
}else{
this.setData({
loginOK:false
})
}
}
})
用戶授權登陸
概述
替換 wx.getUserInfo用wx.getUserProfile獲取用戶信息。頁面產生點擊事件（例如 button 上 bindtap 的回調中）后才可調用，每次請求都會彈出授權窗口，用戶同意后返回 userInfo。
使用了微信官方提供button按鈕的屬性 open-type，contact提供在線客服，feedback提供反饋意見。
效果展示
未登錄
登錄
已登錄
代碼及注釋
<!-- 用戶登陸 -->
<view class="header">
<view class="root" wx:if="{{!userInfo}}">
<image src="/images/girl-5.png" class="touxiang"></image>
<button class="login_btn" size="mini" bindtap="getUserProfile" > 獲取頭像昵稱 </button>
</view>
<view wx:else class="root">
<image bindtap="bindViewTap" class="touxiang" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="nicheng">{{userInfo.nickName}}</text>
<button size="mini" bindtap="outLogin">退出登錄</button>
</view>
</view>
<!-- 登陸后顯示 -->
<view wx:if="{{userInfo}}">
<view class="item">
<text>我的訂單</text>
<view class="right_arrow"></view>
</view>
<view class="item">
<text>歷史發票</text>
<view class="right_arrow"></view>
</view>
<view class="item">
<text>我的評價</text>
<view class="right_arrow"></view>
</view>
<view class="item">
<text>建議咨詢</text>
<view class="right_arrow"></view>
</view>
<view class="item">
<text>設置</text>
<view class="right_arrow"></view>
</view>
</view>
<view class="item">
<button class="button" open-type="feedback">反饋意見</button>
<view class="right_arrow"></view>
</view>
<view class="item">
<button class="button" open-type="contact">在線客服</button>
<view class="right_arrow"></view>
</view>
<!-- 登陸前顯示 -->
<view wx:if="{{!userInfo}}">
<view class="item">
<text>管理員登陸</text>
<view class="right_arrow"></view>
</view>
</view>
.root{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.touxiang{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin-top: 30rpx;
margin-bottom: 10rpx;
}
.header{
height:380rpx;
background: aliceblue;
}
.login_btn{
top: 20rpx;
}
.item{
display: flex;
align-items: center;
padding: 25rpx;
background: white;
border-bottom: 1px solid gray;
}
/* 右箭頭 */
.right_arrow{
border:solid black;
border-width: 0 3px 3px 0;
padding:3px;
position: absolute;
right: 15px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* 去除button默認樣式並設置 */
.button{
width: 100%;
border: none;
text-align: left;
margin: 0;
padding: 0;
background-color: inherit;
line-height: 1.3;
font-size: 16px;
}
.button::after{
border:none;
border-radius: 0;
}
用wx.getUserProfile獲取用戶信息。頁面產生點擊事件（例如 button 上 bindtap 的回調中）后才可調用，每次請求都會彈出授權窗口，用戶同意后返回 userInfo。該接口用於替換 wx.getUserInfo
Page({
data:{
userInfo:'',
},
onLoad(){
if (wx.getUserProfile) {
this.setData({
isLogin:true
})
}
},
//授權登錄
getUserProfile(e){
wx.getUserProfile({
desc: '完善用戶信息',
success:res=>{
console.log('ok',res.userInfo);
let user =res.userInfo
//緩存用戶信息到本地
wx.setStorageSync('user', user)
this.setData({
userInfo:user,
})
},
fail:res=>{
console.log('fail',res)
}
})
},
//退出登錄
outLogin(){
this.setData({
userInfo:'',
})
wx.setStorageSync('user', null)
},
onLoad(){
let user=wx.getStorageSync('user')
this.setData({
userInfo:user,
})
}
})