微信小程序实战之获取用户信息并保存唯一实例

您所在的位置：网站首页 › 微信小程序如何获取用户信息资源数据 › 微信小程序实战之获取用户信息并保存唯一实例

微信小程序实战之获取用户信息并保存唯一实例

2023-09-16 00:31| 来源: 网络整理| 查看: 265

我正在参加「掘金·启航计划」

前言

这是我参加掘金启航计划的第二篇文章，这次总结的是获取用户信息并联合 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 [email protected] [email protected]

待安装完毕后，选择选项栏中的工具，重新构架 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 代码展示用户信息：

当用户信息存在时显示用户信息；未存在时，显示默认信息，并显示登录按钮。

{{userInfo.username ? userInfo.username:'登录'}} 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. 最后

最后希望观众老爷们多多支持，错的地方或好的想法可以写在评论区。

拜谢！🥰

【本文地址】

公司简介

联系我们