微信小程序授权获取用户详细信息openid的实例详解

背景介绍

微信小程序在实际应用中，常常需要获取用户的信息。用户信息包括基本的个人信息以及用户在小程序中的开放数据。微信提供了一套与微信公众平台对接的接口，可以方便地获取用户的基本信息，其中就包括openid。

授权流程

小程序获取用户信息的流程如下：

1. 用户打开小程序，小程序提示需要授权获取用户基本信息，包括头像、昵称等。
2. 用户同意授权，小程序获得授权后，可以获取用户在微信公众平台的openid。
3. 小程序在后台调用微信公众平台的接口，获取用户基本信息（包括昵称、头像、性别、城市、省份、国家等）和开放数据。

授权 API

以下是微信小程序中获取用户授权信息的API：

wx.getUserProfile({
  desc:"用于完善会员资料",
  success: function(res) {
    console.log(res.userInfo)
  }
})

在上述API中，wx.getUserProfile用于获取用户基本信息和头像，需要用户确认授权。desc参数是授权页面的提示文本描述。授权成功后，函数的success回调返回的是授权信息对象，其中包含userInfo属性，是用户的基本信息，包括昵称、头像、性别等等。

实例演示

以下是获取用户openid和基本信息的实例演示，包括两种方法：使用getUserProfile和getUserInfo。

方法一：使用getUserProfile

// 在页面中监听按钮的点击事件
onBtnClick: function() {
  wx.getUserProfile({
    desc:"用于完善会员资料",
    success: (res) => {
      const userInfo = res.userInfo;
      const openid = wx.getStorageSync("openid");
      console.log(openid); // 打印openid
      console.log(userInfo); // 打印用户基本信息
    },
  });
},

在上述代码中，事件处理函数onBtnClick用于处理按钮的点击事件，当用户点击按钮时，调用wx.getUserProfile函数获取用户信息。函数的success回调中，我们可以通过wx.getStorageSync方法获取用户的openid。

方法二：使用getUserInfo

// 在页面中监听按钮的点击事件
onBtnClick: function() {
  wx.login({
    success: (res) => {
      if (res.code) {
        // 发起网络请求，获取openid
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session',
          data: {
            appid: 'your_appid',
            secret: 'your_secret',
            js_code: res.code,
            grant_type: 'authorization_code'
          },
          success: (res) => {
            const openid = res.data.openid;
            wx.setStorageSync("openid", openid); // 保存openid到缓存中
            console.log(openid); // 打印openid
            // 获取用户信息
            wx.getUserInfo({
              success: (res) => {
                const userInfo = res.userInfo;
                console.log(userInfo); // 打印用户基本信息
              },
            });
          },
        });
      } else {
        console.log('登录失败！' + res.errMsg);
      }
    },
  });
},

在上述代码中，我们通过wx.login函数获取用户登录凭证（code），并将其发送至服务器获取用户openid。在成功获取openid之后，我们将其保存至缓存中，以便后续使用。同时，我们调用wx.getUserInfo函数获取用户基本信息。