我正在参加「掘金·启航计划」
前言
这是我参加掘金启航计划的第二篇文章，这次总结的是获取用户信息并联合 mobx 状态管理库，保存全局唯一的用户对象。
本篇文章基于 微信云开发 ，数据从云数据库中取出，使用微信云数据库API进行获取数据，希望观众老爷们多多支持！
1. 获取用户的openid
我们需要获取微信用户的 openid ，通过 openid 获取用户的登录信息。
首先我们需要创建云函数，选中 cloudfunctions 文件夹，右键选择新建 Node.js 云函数，命名为 gitOpenId
然后在该文件夹下的 index.js 中填写以下内容：
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
然后进行选中 gitOpenId 文件夹，右键选择上传并部署即可：
然后打开 app.js，在 globalData 中，添加 openid：
globalData: {
openid: ""
}
然后在 onLaunch 函数中，使用 gitOpenId 云函数，在小程序打开时，获取用户 openid，并保存到 globalData.openid 中。
onLaunch: function () {
wx.cloud.callFunction({
name: 'gitOpenId',
complete: res => {
this.globalData.openid = res.result.openid;
}
});
}
2. 创建用户接口
创建用户接口，操作云数据库中的用户集合，包括创建用户和获取用户信息两个接口。
首先我们需要在云数据库中创建用户集合 users
然后在 utils/database/ 文件夹下，创建 user.js，并书写以下内容：
import dayjs from "dayjs";
function table(name) {
return wx.cloud.database().collection(name);
}
//通过openid获取用户信息
async function getUserByOpenid(id) {
const {
data
} = await table("users").where({
_openid: id
}).get();
return data;
}
//创建用户
async function createUser(username, pic) {
let time = dayjs().format("YYYY-MM-DD HH:mm:ss");
const {
_id
} = await table("users").add({
data: {
'username': username,
"pic": pic,
"isAuth": false,
"createTime": time
}
});
return {
_id: _id,
'username': username,
"pic": pic,
"isAuth": false,
"createTime": time
};
}
export {
getUserByOpenid,
createUser
}
创建用户中的 data，是向用户表中添加的数据记录：
data: {
'username': username, //用户昵称
"pic": pic, //用户头像
"isAuth": false, // 是否具有权限
"createTime": time // 创建时间
}
3. 创建mobx状态管理相关文件
首先我们先通过 npm 安装 mobx 相关库：右键选择 miniprogram 在内建终端打开，输入以下指令。
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
待安装完毕后，选择选项栏中的工具，重新构架 npm。
然后再 miniprogram 项目根目录下，创建 store/index.js 文件，书写以下内容，书写一系列针对 user 的操作：
//导入mobx-miniprogram
import {
action,
observable
} from 'mobx-miniprogram'
export const store = observable({
//存储的user信息
user: JSON.parse(wx.getStorageSync('user') || '{}'),
//计算属性获取存储的用户ID
get userId() {
return this.user._id;
},
//方法设置用户信息
setUser: action(function(obj){
this.user = obj;
this.saveUser();
}),
//方法返回用户信息
returnUser: action(function (obj) {
return this.user;
}),
//方法清楚用户信息
removeUser: action(function (obj) {
this.user = {};
this.saveUser();
}),
//普通方法，将用户信息通过stroage保存在本地
saveUser(){
wx.setStorageSync("user",JSON.stringify(this.user));
},
});
4. 获取用户信息
在我们首次使用小程序时，通过 openid 获取用户昵称和头像，提交至数据库，今后就通过数据库获取用户信息。
首先导入以下文件：
//用户接口
import {
getUserByOpenid,
createUser
} from './utils/database/users.js';
//mobx
import {
createStoreBindings
} from "mobx-miniprogram-bindings"
//store
import {
store
} from "./store/index"
然后在 onLaunch 函数最后，使用 mobx API，导入 store 中操作 user 的方法。
this.storeBindings = createStoreBindings(this, {
store,
actions: ['setUser','returnUser']
});
然后在 App 函数中，创建 getUserInfo 获取用户信息：
这段代码的解释：首先在我们打开小程序时，不是通过 openid 使用 wx.getUserProfile 来获取信息的；而是通过 getUserByOpenid 接口，通过 openid，查询数据库中是否有用户信息；如果没有的话，请求用户是否授予用户信息，授予后进行，通过 createUser 保存至数据库后在保存到临时变量 user 中；如果有的话，则会返回用户信息，保存至临时变量 user 中，最后统一通过 this.setUser(user) 保存至 store 中，进行全局的共享。
async getUserInfo() {
const users = await getUserByOpenid(this.globalData.openid);
let user = {};
if (users.length == 0) {
wx.showModal({
title: '温馨提示',
content: '您第一次登录是否授权用户信息 ',
success: (res) => {
if (res.confirm) {
wx.getUserProfile({
desc: '展示用户信息',
withCredentials: true,
success: (res) => {
createUser(res.userInfo.nickName, res.userInfo.avatarUrl).then(res => {
user = res;
});
},
fail: (err) => {
console.log(err);
}
});
}
}
});
} else {
user = users[0];
}
this.setUser(user);
}
最后就需要在 onLaunch 末尾，执行这个函数就行了。
5. 测试
首先清空缓存，删除云数据库集合 user 中自己用户信息的记录：
然后重新编译小程序：
显示第一次登录是否授权用户信息，点击确定即可。
然后允许即可
云数据库中就新增个人信息记录了，然后我们再重新进入小程序就从数据库获取信息了
问题：既然本地 mobx 中有用户信息，为什么要从云数据库中获取？ 因为本地 mobx 中的用户信息，有可能不是最新信息，用户记录中有其他字段，如 isAuth，用户的权限需要在后台设置，所以需要获取最新数据。
问题：既然可以从数据库中获取用户信息，为什么要使用 mobx 管理用户信息？ 为了全局有一个状态，来判定用户是否登录，便于以后的操作。
6. 在个人页展示用户信息
6.1. 打开个人页时自动获取用户信息并展示
首先在 my.js 中导入以下代码：
// pages/my/my.js
import {
getUserByOpenid
} from "../../utils/database/users";
import {
createStoreBindings
} from "mobx-miniprogram-bindings"
import {
store
} from "../../store/index"
const app = getApp();
然后在 data 中，填写 userInfo 在个人页中保存用户信息：
data: {
userInfo:{}
}
然后在 onLoad 函数中，导入 store 中 user 的相关操作：
this.storeBindings = createStoreBindings(this, {
store,
actions: ['returnUser','removeUser','setUser']
});
在 Page 函数中编写 getUserInfo、login、singout 函数
//通过returnUser()方法获取store中的用户信息
getUserInfo(){
this.setData({
'userInfo':this.returnUser()
})
},
//退出登录函数
singout(){
this.removeUser();
this.setData({
'userInfo':{}
})
},
//通过app.globalData.openid获取云数据库中的用户信息进行登录
async login(){
const users = await getUserByOpenid(app.globalData.openid);
let user = {};
user = users[0];
this.setUser(user);
this.setData({
'userInfo':user
})
},
在 onLoad 函数末尾，执行 getUserInfo 函数，获取用户信息，进行展示。
为什么要这样做呢？
- 因为当你打开小程序时，会自动将用户信息保存在 store，当你打开个人页时，通过 getUserInfo 函数获取用户信息进行展示即可。
最后书写wxml 代码展示用户信息：
当用户信息存在时显示用户信息；未存在时，显示默认信息，并显示登录按钮。
<view class="pic">
<image src="{{userInfo.pic ? userInfo.pic:'../../images/pic.png'}}"></image>
<text bindtap="login">{{userInfo.username ? userInfo.username:'登录'}}</text>
</view>
6.2. 退出登录
首先在 Page 函数中书写 singout 退出登录函数：这个函数要做的事情是删除 store 中的用户信息，并删除保存在个人页 data 中的 userInfo 信息。
singout(){
this.removeUser();
this.setData({
'userInfo':{}
})
}
然后在 my.wxml 中绑定事件：
最后点击设置中的退出登录，即可退出登录。
6.3. 点击登录按钮进行登录
首先在 Page 函数中书写 login 登录函数：
async login(){
//防止登录后重复点击
if(this.data.userInfo === {}) return
const users = await getUserByOpenid(app.globalData.openid);
let user = {};
user = users[0];
this.setUser(user);
this.setData({
'userInfo':user
})
},
为什么要从云数据库中获取用户信息？
- 因为退出登录后，store 中不存在用户信息。
最后在 my.wxml 的登录按钮上，绑定事件：
7. 最后
最后希望观众老爷们多多支持，错的地方或好的想法可以写在评论区。
拜谢！🥰
