1.登录获取用户昵称，头像
<view class="userinfo">
<image src="{{userInfo.avatarUrl}}"></image>
<view>{{userInfo.nickName}}</view>
</view>
<button plain bindtap="getUser">授权登陆</button>
<button plain bindtap="exitUser">退出</button> // 获取用户信息
getUser(){
//获得用户的头像和昵称
wx.getUserProfile({
desc: '获得用户信息'
}).then((res) => {
console.log(res.userInfo.avatarUrl,res.userInfo.nickName)
this.setData({
userInfo:res.userInfo
})
// 添加到数据库用户列表中 yuyue-user
wx.cloud.database().collection('yuyue-user').add({
data:{
// 添加一个号码，由于id和openid太长，此号码可作为唯一标识
num: Date.now(),
// 添加用户昵称和头像
nickName:res.userInfo.nickName,
avatarUrl:res.userInfo.avatarUrl
}
}).then(res=>{
console.log(res)
// 添加成功提示
wx.showToast({
title: '登录成功！'
})
}).catch(err=>{
console.log(err)
})
})
})
}2.创建云函数
右击新建文件夹cloud
在根目录project.config.json中添加：
"cloudfunctionRoot": "cloud/"右击文件夹cloud选择当前环境
右击文件夹cloud新建Node.js云函数，命名login
在新建文件夹login的index.js文件中：
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID
}
}右击login文件夹选择上传并部署：云端安装依赖（不上传node_modules），显示上传成功提示。
3.使用云函数获取openid
根目录app.js中获取openid：
// app.js
App({
onLaunch() {
wx.cloud.init({
env: 'manmanmanman123-2gld2mewb02c0fcb' //云开发环境id
})
// 获取用户的openid
wx.cloud.callFunction({
name:'login'
}).then(res=>{
console.log(res)
console.log(res.result.openid)
//给全局openid赋值
this.globalData.openid = res.result.openid
})
},
globalData: {
userInfo: null,
openid:''
}
})
4.为防止一个用户在数据库中出现多条登录记录，需要将openid作为查询条件
// 获取用户信息
getUser(){
//获得用户的头像和昵称
wx.getUserProfile({
desc: '获得用户信息'
}).then((res) => {
console.log(res.userInfo.avatarUrl,res.userInfo.nickName)
// 将内容赋值给全局的userInfo，这样可以在别的页面中使用
app.globalData.userInfo = res.userInfo
this.setData({
userInfo:res.userInfo
})
// 判断yuyue-user数据库中是否存在原用户，不存在则添加到数据库中，存在则替换
wx.cloud.database().collection('yuyue-user').where({
_openid:app.globalData.openid
}).get().then(result=>{
console.log(result)
if(result.data.length === 0){
// 添加到数据库用户列表中 yuyue-user
wx.cloud.database().collection('yuyue-user').add({
data:{
// 添加一个号码，由于id和openid太长，此号码可作为唯一标识
num: Date.now(),
// 添加用户昵称和头像
nickName:res.userInfo.nickName,
avatarUrl:res.userInfo.avatarUrl
}
}).then(res=>{
console.log(res)
// 添加成功提示
wx.showToast({
title: '登录成功！'
})
}).catch(err=>{
console.log(err)
})
}else{
this.setData({
userInfo:result.data[0]
})
}
})
} )
}5.退出登录
// 退出登录
exitUser(){
// 全局和页面上的用户信息为空
app.globalData.userInfo = null
this.setData({
userInfo: null
})
}6.实现自动登陆，用户不用退出小程序后再次登录
根目录app.js中：文章来源：https://www.toymoban.com/news/detail-482859.html
// app.js
App({
onLaunch() {
wx.cloud.init({
env: 'manmanmanman123-2gld2mewb02c0fcb' //云开发环境id
})
// 获取用户的openid
wx.cloud.callFunction({
name:'login'
}).then(res=>{
console.log(res)
console.log(res.result.openid)
this.globalData.openid = res.result.openid
// 刚开始启动小程序时，通过openid来查找yuyue-user用户数据库中是否存在用户
//有的话就不用再登陆
wx.cloud.database().collection('yuyue-user').where({
_openid : res.result.openid
}).get().then(result=>{
console.log(result)
this.globalData.userInfo = result.data[0]
})
})
},
globalData: {
userInfo: null,
openid:''
}
})
在登录界面：文章来源地址https://www.toymoban.com/news/detail-482859.html
onShow() {
// 获取到全局的userInfo
this.setData({
userInfo:app.globalData.userInfo
})
}到了这里，关于微信小程序实现授权登录及退出的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
