文章目录
- 1. 获取openid
- 1.1 效果图
- 1.2 逻辑思路
- 1.2 实现代码
- 1.2.1 App.vue页面
- 2. 获取用户信息（按钮授权）
- 2.1 效果图
- 2.2 逻辑思路
- 2.3 实现代码
- 2.3.1 index.vue页面的template部分
- 2.3.2 index.vue页面的script部分
- 2.3.3 云函数getUser()部分
开发环境：微信开发者、微信云开发、HBuilderX、uniCloud等。
（此文已默认对以上开发环境有基础的使用了解。）
（文中大部分注释是自己的思考和理解，如果阅读时觉得混乱，可选择性忽略，只看代码就好。）
1. 获取openid
1.1 效果图
1.2 逻辑思路
用HBuilderX选择在微信开发者调试时，只要提前填上微信appid、开通了微信云开发，微信的云空间就会提供一个获取openid的云函数。
在App.vue的onLaunch()函数中使用getOpenId()即可获得openid。
不一定是getOpenId()这个函数名，也有可能叫login()，具体名称要自己查看。
1.2 实现代码
1.2.1 App.vue页面
App.vue页面，一进入小程序就开始获取openid：
<script>
export default {
onLaunch: function() {
console.log('App Launch')
// 第一步：初始化微信云函数
wx.cloud.init({
env: '填写微信云开发环境ID', // 打开微信云开发控制平台，右上角点击[设置] - [环境设置]
traceUser: true
}),
// 第二步：获取用户的openid
wx.cloud.callFunction({
name: 'getOpenId', // 打开微信云开发控制平台，左上角点击[云函数]
data: {},
success: res => {
// debugger
// 第三步(可省略)：缓存用户openid，方便后续再次调用
wx.setStorage({
key: "user",
data: res.result.openid
})
console.log('成功获取openid: ', res.result.openid)
},
fail: err => {
console.error('获取失败：', err)
}
})
},
}
</script>
2. 获取用户信息（按钮授权）
2.1 效果图
2.2 逻辑思路
备注1：流程图中的“初始化自定义用户数据变量”，指的是除了用户的头像昵称性别等基本信息外，还因开发需求而增加了一些“自定义”的用户变量。比如一条用户记录的结构是：
图中的第五项score就是我自定义的用户属性，需要自己赋值初始化。
上图的用户数据集合，将存储在uniCloud中。
备注2： 使用openid查询用户数据，意思是，使用此前获得的openid，到uniCloud中自己创建的user集合中查找。如果找得到此用户的openid，表示此用户已存在；找不到此用户的openid，表示此用户为新用户，需要在user集合中插入新数据。
2.3 实现代码
2.3.1 index.vue页面的template部分
template部分：
<template>
<view id="content">
<button v-if="!hasUserInfo" open-type="getUserInfo" @getuserinfo="getuserinfo">授权登录</button>
<view v-else id="user_info">
<ul>
<li><image mode="widthFix" :src="userInfo.avatarUrl"></image></li>
<li>昵称：{{userInfo.nickName}}</li>
<li>性别：{{userInfo.gender}}</li>
</ul>
</view>
</view>
</template>注意：<button>中有一个v-if="!hasUserInfo"，后面的<view>有一个v-else，hasUserInfo变量是用来判断用户是否已经授过权，如果已经授权，那么这个授权按钮会被隐藏，转为显示用户信息。
2.3.2 index.vue页面的script部分
①如果只是想拿到用户数据，而且无需openid、无需存到云上的话：
script部分：
<script>
export default {
data() {
return {
userInfo: [],
hasUserInfo: false
}
},
onShow() {
// 进入index.vue即开始运行获取用户信息的函数：
// 1. 如果用户第一次使用小程序，并且没有授权，函数会直接进入fail回调
// 2. 如果用户不是第一次使用小程序，并且已经授权，
// 函数会直接进入success回调，并将hasUserInfo由false变为true，自动隐藏前端的授权按钮。
this.getuserinfo();
},
methods: {
/*获取用户信息*/
getuserinfo() {
uni.showLoading({
title: '处理中...'
}),
// 获取微信用户信息
uni.getUserInfo({
success: (userRes) => {
// 获取openid（配合上前文获取openid时写的setStorage）
/* uni.getStorage({
key: "user",
success: (storageRes) => {
let openid = storageRes.data */
console.log("getUserInfo接口返回：", userRes.userInfo)
this.userInfo = userRes.userInfo
this.userInfo.score = 0 // 初始化自定义的用户信息
this.hasUserInfo = true // 隐藏授权按钮
uni.hideLoading()
/* },
// fail: () => {}
}) */
},
fail: () => {
uni.hideLoading()
uni.showToast({
title: "为了更好的功能体验，请先登录授权！",
icon: "none"
})
console.log("请点击授权进行登录！")
}
})
},
}
}
</script>
②如果不只是想拿到用户数据，而且需要结合openid存到云上的话： script部分：
<script>
export default {
data() {
return {
userInfo: [],
hasUserInfo: false
}
},
onShow() {
// 进入index.vue即开始运行获取用户信息的函数
// 1. 如果用户第一次使用小程序，并且没有授权，函数会直接进入fail回调
// 2. 如果用户不是第一次使用小程序，并且已经授权，
// 函数会直接进入success回调，并将hasUserInfo由false变为true，自动隐藏前端的授权按钮。
this.getuserinfo();
},
methods: {
/*获取用户信息*/
getuserinfo() {
uni.showLoading({
title: '处理中...'
}),
// 获取微信用户信息
uni.getUserInfo({
success: (userRes) => {
// 第一步：获取openid（配合上前文获取openid时写的setStorage）
uni.getStorage({
key: "user",
success: (storageRes) => {
let openid = storageRes.data
// 第二步：获取/更新/初始化用户数据
console.log("getUserInfo接口返回：", userRes.userInfo)
this.userInfo = userRes.userInfo
this.userInfo.score = 0 // 初始化自定义的用户信息
// 第三步：访问云数据库，查询该openid是否存在
// 不存在，则请求授权并插入数据；存在，则直接返回用户云数据
uniCloud.callFunction({
name: "getUser", // 云函数名
data: { // 给云函数传递变量值（这里我只把我需要写入user集合表的数据传到云函数中处理）
openid: openid,
avatarUrl: this.userInfo.avatarUrl,
nickName: this.userInfo.nickName,
gender: this.userInfo.gender,
score: this.userInfo.score
}
}).then((res) => {
// 第四步：输出用户云数据
let status = res.result.status
if (status == -1) { // 云数据库中不存在openid
console.log("云userInfo(-1)", this.userInfo) // 输出新用户数据（前面初始化的值即是新用户）
} else if (status == 0) { // 云数据库中存在openid
this.userInfo = res.result.data[0] // 获取老用户数据(库值覆盖初始值)
console.log("云userInfo(0)", this.userInfo) // 输出用户数据
}
}).catch((err) => {
uni.hideLoading()
uni.showModal({
content: `获取数据失败，错误信息为：${err.message}`,
showCancel: false
})
console.error(err)
})
this.hasUserInfo = true // 隐藏授权按钮
uni.hideLoading()
},
fail: () => {}
})
},
fail: () => {
uni.hideLoading()
uni.showToast({
title: "为了更好的功能体验，请先登录授权！",
icon: "none"
})
console.log("请点击授权进行登录！")
}
})
},
}
}
</script>2.3.3 云函数getUser()部分
云函数getUser()部分：
（如果开发时不涉及uniCloud云函数和云数据库，此步可忽略。）
注意：开始查询前，需要先初始化user集合（如何初始化请看uni-app官方文档uniCloud部分）：
'use strict';
const db = uniCloud.database();
exports.main = async (event, context) => {
const openid = event.openid;
const collection = db.collection("user")
// 查询数据库中是否存在此openid
const query = await collection.where({ openid: openid }).get()
if (!query.data || query.data.length === 0) {
// 不存在此openid，则插入用户数据（插入的数据就是前文script...data{}部分）
const newData = await collection.add(event)
return {
status: -1,
msg: 'user集合内没有此openid，已插入',
data: newData
}
}
// 存在该openid，则先更新用户基本信息，再返回用户云数据
else {
const res1 = await collection.doc(query.data[0]._id).update({ nickName: event.nickName })
const res2 = await collection.doc(query.data[0]._id).update({ avatarUrl: event.avatarUrl })
const query2 = await collection.where({ openid: openid }).get()
return {
status: 0,
msg: 'user集合内有此openid',
data: query2.data
}
}
}
谢谢阅读。如有错误，请温和地指出错误所在。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
