前言

这是我参加掘金启航计划的第二篇文章，这次总结的是获取用户信息并联合 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') || '{}'),//计算属性获取存储的用户IDget 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 === {}) returnconst users = await getUserByOpenid(app.globalData.openid);let user = {};user = users[0];this.setUser(user);this.setData({'userInfo':user})},

为什么要从云数据库中获取用户信息？