投稿
  1. 极客之音首页
  2. 技术漫谈

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

小半 • • 技术漫谈 • 阅读 809

前言

这次总结的是获取用户信息并联合 「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. 最后

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

拜谢！🥰

原文始发于微信公众号（yanghi）：微信小程序实战之获取用户信息并保存唯一实例

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/226829.html

赞 (0)
小半的头像小半
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！