微信小程序目前最新的授權登錄接口-2021年10月份
授權登錄效果圖：
直接上代碼！
mypage.wxml代碼：
<!--pages/mypage/mypage.wxml-->
<!-- 背景圖 -->
<view class="bg-box">
<image src="../image/mypagebg.png"></image>
</view>
<!-- 未登錄 -->
<view wx:if="{{!UserLogin}}" class="login_box" bindtap="getUserProfile">
<view class="userlogin">
<view>點擊登錄</view>
<view style="font-size: 12px; color:grey;margin-top: 5px;">需要先完成授權登錄才能使用服務喲(*v*)</view>
</view>
</view>
<!-- 已登錄 -->
<view wx:else class="login_box">
<view class="userAvatar_box" bindtap="secretEntrance">
<image src="{{userInfo.avatarUrl}}"></image>
</view>
<view class="userlogin">
<view style="font-weight:bold;">歡迎：{{userInfo.nickName}}</view>
<view><text style="font-size: 10px; color: gray;">微信用戶</text></view>
<view><text style="font-size: 10px; color: red;">Lv：</text><text style="font-size: 10px; color: orange;">{{Lv}}</text></view>
</view>
</view>
<!-- 服務 -->
<view class="service_box">
<view class="service_title">服務</view>
<view class="service_row" bindtap="goMycollection">
<view class="service_icon">
<image src="../image/mycollection.png"></image>
</view>
<view class="service_text">我的收藏</view>
</view>
<view class="service_row">
<view class="service_icon ">
<image src="../image/kefu.png"></image>
</view>
<view class="service_text">
<button open-type='contact' style="color:black;height:35px;line-height:35px;font-weight: lighter;padding:0;width:100%;border:none;background:#fff;font-size:14px;text-align:left;">在線客服</button>
</view>
</view>
<view class="service_row" bindtap="exit">
<view class="service_icon">
<image src="../image/exit.png"></image>
</view>
<view class="service_text">退出登錄</view>
</view>
</view>
mypage.js代碼：
// pages/mypage/mypage.js
var app = getApp();
const db = wx.cloud.database()
const {
formatTime
} = require("../../utils/util.js")
Page({
/**
* 頁面的初始數據
*/
data: {
UserLogin: false,
userInfo: null,
ClickAccount: 0, // 點擊次數記錄
Lv: '1'
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
//console.log('執行了onLoad')
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
//console.log('執行了onReady')
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
//console.log('執行了onShow')
app.isLogin() // 全局變量
this.setData({
UserLogin: app.globalData.UserLogin,
userInfo: app.globalData.userInfo
})
},
// 秘密入口
secretEntrance() {
let ClickAccount = this.data.ClickAccount
ClickAccount = ClickAccount + 1
if (ClickAccount < 5) {
console.log('走點擊的if', ClickAccount)
this.setData({
ClickAccount: ClickAccount
})
} else {
console.log('走點擊的else', ClickAccount)
// 恢復點擊次數記錄
this.setData({
ClickAccount: 0
})
// 檢查訪問者身份
this.IsAdminstator()
}
},
// 檢查是否為管理員
IsAdminstator() {
let openId = app.globalData.openid
//console.log('全局的openid', openId)
wx.showLoading({
title: '正在檢驗...',
mask: true
})
db.collection('AdminStator').where({
'_openid': openId,//根據全局的openid去檢查該用戶是否未管理員
}).count()
.then(res => {
wx.hideLoading()
if (res.total > 0) {
// 管理員跳轉到管理員頁面
wx.navigateTo({
url: '../../Adminpackage/managerHome/managerHome'
})
} else {
console.log('走else去掃碼', )
// 不是管理員，跳轉到掃碼頁面
wx.navigateTo({
url: '../../Adminpackage/scanPage/scanPage',
})
}
})
.catch(err => {
wx.hideLoading()
wx.showToast({
title: '網絡錯誤！請稍后重試',
icon: 'none',
duration: 1000,
})
})
},
//獲取用戶信息
getUserProfile() {
let openId = app.globalData.openid
//console.log('全局的openid', openId)
wx.getUserProfile({
desc: '用於完善會員資料', //聲明獲取用戶信息的用途
success: (res) => {
//console.log('點擊獲取用戶信息成功', res.userInfo)
let userInfo = res.userInfo
db.collection('UserList').where({
'_openid': openId
}).get({
success: res => {
console.log('根據全局openid查詢用戶表成功', res.data)
if (res.errMsg == "collection.get:ok" && res.data.length == 0) { //length等於0，證明沒有該用戶，走寫入數據庫
//console.log('走if-1，開始寫入數據庫')
db.collection('UserList') // 把用戶信息寫入數據庫的用戶表
.add({
data: {
avatarUrl: userInfo.avatarUrl,
nickName: userInfo.nickName,
mamager: false,
vip: false,
Lv: 1,
registerTime: formatTime(new Date())
},
success: res => {
//console.log('寫入成功', res.errMsg)
if (res.errMsg == "collection.add:ok") {
wx.setStorageSync('UserInfo', userInfo) //保存用戶信息保存到本地緩存
this.setData({
userInfo: userInfo,
UserLogin: true,
Lv: "1"
})
wx.showToast({
title: '恭喜,登錄成功',
icon: "success",
duration: 1000,
})
} else {
// 提示網絡錯誤
wx.showToast({
title: '登錄失敗，請檢查網絡后重試！',
icon: 'none',
duration: 1000,
})
}
},
fail: err => {
console.log('用戶信息寫入失敗', err)
// 提示網絡錯誤
wx.showToast({
title: '登錄失敗，請檢查網絡后重試！',
icon: 'none',
duration: 1000,
})
}
})
} else {
//console.log('走else-1,數據庫里已存有用戶信息,直接登錄，不用寫入數據庫')
wx.setStorageSync('UserInfo', userInfo) //保存用戶信息保存到本地緩存
this.setData({
userInfo: userInfo,
UserLogin: true,
Lv: res.data[0].Lv
})
//更新全局狀態
app.globalData({
userInfo: userInfo,
UserLogin: true,
})
}
},
fail: err => {
console.log('根據全局openid查詢用戶表失敗', err)
// 提示網絡錯誤
wx.showToast({
title: '網絡錯誤！獲取授權信息失敗',
icon: 'none',
duration: 1000,
})
}
})
},
fail: err => {
console.log('用戶信息獲取失敗', err)
// 提示網絡錯誤
wx.showToast({
title: '網絡錯誤！獲取授權信息失敗',
icon: 'none',
duration: 1000,
})
}
})
},
// 跳轉到我的收藏
goMycollection() {
let UserLogin = this.data.UserLogin
if (UserLogin) {
wx.navigateTo({
url: '../collection/collection',
})
} else {
// 提示登錄
wx.showToast({
title: '你還未登錄，請先登錄！',
icon: 'none',
duration: 1000,
})
}
},
// 清除數據退出
exit() {
let UserLogin = this.data.UserLogin
if (UserLogin) {
wx.showToast({
title: '退出成功',
icon:'success',
duration: 1000,
})
this.setData({
UserLogin: false,
})
wx.removeStorageSync('UserInfo')
} else {
// 提示登錄
wx.showToast({
title: '你還未登錄，請先登錄！',
icon: 'none',
duration: 1000,
})
}
},
})
app.js代碼：
//app.js
App({
onLaunch: function () {
// 初始化雲開發環境
if (!wx.cloud) {
//console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
} else {
wx.cloud.init({
env: 'cloud1-3gklfre2aef67472',//雲環境ID
traceUser: true,
})
}
this.getOpenid();
},
globalData: {
userInfo: null,
UserLogin: false,
openid:null,
},
// 獲取用戶openid
getOpenid: function () {
var app = this;
var openId = wx.getStorageSync('openId');
if (openId) {
//console.log('本地獲取openid:', openId);
app.globalData.openid = openId;
app.isLogin();
} else {
wx.cloud.callFunction({
name: 'getOpenid',
success(res) {
//console.log('雲函數獲取openid成功', res.result.openid)
var openId = res.result.openid;
wx.setStorageSync('openId', openId)
app.globalData.openid = openId;
app.isLogin();
},
fail(res) {
console.log('雲函數獲取openid失敗', res)
}
})
}
},
//檢測是否登錄函數，未登錄則提示登錄
isLogin() {
//console.log('app.isLogin方法被執行了')
var userInfo = wx.getStorageSync('UserInfo') // 獲取緩存的用戶信息
if (userInfo.nickName && userInfo.avatarUrl) {
// console.log('走isLogin的if')
// console.log('緩存里的用戶信息', userInfo)
this.globalData.UserLogin = true
this.globalData.userInfo = userInfo
} else {
// console.log('走IsLogin的else')
this.globalData.UserLogin = false
}
},
})
mypage.wxss代碼：
/* pages/mypage/mypage.wxss */
/* 背景圖 */
.bg-box {
width: 100%;
height: 300rpx;
z-index: 1;
}
.bg-box image {
z-index: 1;
width: 100%;
height: 100%;
}
/* 登錄 */
.login_box {
height: 200rpx;
margin: 10rpx 18rpx;
border-radius: 16rpx;
background-color: #fff;
box-shadow: 20rpx 20rpx 10rpx rgba(39, 48, 57, 0.05);
}
.userlogin {
height: 100%;
margin-left: 40rpx;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.userAvatar_box {
width: 150rpx;
height: 150rpx;
margin-top: 40rpx;
margin-left: 20rpx;
border-radius: 10rpx;
overflow: hidden;
float: left;
}
.userAvatar_box image {
width: 100%;
height: 100%;
}
/* 服務 */
.service_box {
position: relative;
margin: 10rpx 18rpx;
border-radius: 16rpx;
background-color: #fff;
box-shadow: 20rpx 20rpx 10rpx rgba(39, 48, 57, 0.05);
}
.service_title {
height: 60rpx;
line-height: 60rpx;
padding-left: 10rpx;
font-size: 16px;
font-weight: bold;
}
.service_row {
height: 70rpx;
margin-top: 16rpx;
border-bottom: 2rpx #f0f0f0 solid;
}
.service_icon {
width: 50rpx;
height: 50rpx;
margin-left: 20rpx;
margin-top: 10rpx;
float: left;
}
.service_icon image {
width: 50rpx;
height: 50rpx;
}
.service_text {
font-size: 14px;
height: 70rpx;
line-height: 70rpx;
margin-left: 100rpx;
}
視頻教程：https://www.bilibili.com/video/BV1nQ4y1X7ve?p=7&share_source=copy_web