微信小程序引用Vant插件获取用户基本信息，用户OpenId，用户手机号，附带C#代码，全栈就是这么牛，不服来战...

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

Vant 插件请参考：https://youzan.github.io/vant-weapp/#/dialog

1、早index.json中引入Vant的dialog组件

{
  "usingComponents": {
    "van-dialog": "@vant/weapp/dialog/index"
  }
}

2、index.wxml 如下

<!--Callbackuserinfo 获取用户信息回调函数  Callbackphonenumber 获取手机号回调函数-->
<van-dialog id="van-dialog" bind:confirm="confirm" bind:getuserinfo="Callbackuserinfo"  bind:getphonenumber="Callbackphonenumber"/>

3、C#代码如下【C#代码有详细备注，无需多说】

using Iot.Common;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Security.Cryptography;
using System.Text;
using System.Web.Http;

namespace Iot.WebSite.Controllers.Apis
{
    public class WeChatController : ApiController
    {
        /// <summary>
        /// 获取用户基本信息
        /// </summary>
        /// <param name="wxUser"></param>
        /// <returns></returns>
        [HttpPost]
        public IHttpActionResult GetUserInfo([FromBody] wxUserInfo wxUser)
        {
            return Ok(CommonBaseResponse.SetResponse<wxUserInfo>(wxUser, true));
        }

        /// <summary>
        /// 获取用户OpenId
        /// </summary>
        /// <param name="code"></param>
        /// <returns></returns>
        [HttpGet]
        public IHttpActionResult GetUserOpenId([FromUri]string code)
        {
            return Ok(CommonBaseResponse.SetResponse<SessionResult>(WechatCommon.GetOpenId(code),true));
        }

        /// <summary>
        /// 获取用户手机号
        /// </summary>
        /// <param name="wxPhoneParm"></param>
        /// <returns></returns>
        [HttpPost]
        public IHttpActionResult GetPhoneNubmber([FromBody]WxPhoneParm wxPhoneParm)
        {
            var result = WechatCommon.GetPhoneNubmber(wxPhoneParm.encryptedData, wxPhoneParm.session_key, wxPhoneParm.iv);
            return Ok(CommonBaseResponse.SetResponse<GetWeChatCustomerPhoneResult>(result, true));
        }
    }

    /// <summary>
    /// 公共类
    /// </summary>
    public class WechatCommon
    {
        /// <summary>
        /// 获取用户OPenId
        /// </summary>
        /// <param name="code"></param>
        /// <returns></returns>
       public static SessionResult GetOpenId(string code)
        {
            string url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + WechatAppInfo.Appid + "&secret=" + WechatAppInfo.AppSerct + "&js_code=" + code + "&grant_type=authorization_code";
            var jspon = RestServiceProxy.GetPage(url, "");
            if (jspon.Contains("errcode"))
            {
                //获取OpenId失败
                return null;
            }
            //获取OpenID
            var Result = JsonConvert.DeserializeObject<SessionResult>(jspon);
            return Result;
        }

        /// <summary>
        /// 获取用户手机号
        /// </summary>
        /// <param name="encryptedData"></param>
        /// <param name="session_key">获取用户OpenId方法的返回对象session_key属性</param>
        /// <param name="iv"></param>
        /// <returns></returns>
        public static GetWeChatCustomerPhoneResult GetPhoneNubmber(string encryptedData, string session_key, string iv)
        {
            try
            {
                byte[] encryptedDataBys = Convert.FromBase64String(encryptedData);
                RijndaelManaged rijndaelCipher = new RijndaelManaged();
                rijndaelCipher.Key = Convert.FromBase64String(session_key);
                rijndaelCipher.IV = Convert.FromBase64String(iv);
                rijndaelCipher.Mode = CipherMode.CBC;
                rijndaelCipher.Padding = PaddingMode.PKCS7;
                ICryptoTransform transform = rijndaelCipher.CreateDecryptor();
                byte[] plainText = transform.TransformFinalBlock(encryptedDataBys, 0, encryptedDataBys.Length);
                string result = Encoding.Default.GetString(plainText);
                GetWeChatCustomerPhoneResult userInfo = JsonConvert.DeserializeObject<GetWeChatCustomerPhoneResult>(result);
                return userInfo;
            }
            catch(Exception ex)
            {
                return null;
            }
            
        }
    }
    public class GetWeChatCustomerPhoneResult
    {
        public string phoneNumber { get; set; }
    }
    /// <summary>
    /// 获取OpenId 的返回值 session_key 可用于获取用户手机号
    /// </summary>
    public class SessionResult
    {
        public string openid { get; set; }
        public string session_key { get; set; }
        public string unionid { get; set; }
    }

    /// <summary>
    /// 微信小程序基本信息
    /// </summary>
    public class WechatAppInfo
    {
        public static string Appid = "AppID";
        public static string AppSerct = "AppSerct";
    }

    /// <summary>
    /// 获取用户手机号参数
    /// </summary>
    public class WxPhoneParm
    {
        /// <summary>
        /// 小程序获取手机号api返回
        /// </summary>
        public string encryptedData { get; set; }
        /// <summary>
        /// 小程序获取手机号api返回
        /// </summary>
        public string iv { get; set; }
        /// <summary>
        ///  wx.login 获取
        /// </summary>
        public string session_key { get; set; }
    }

    /// <summary>
    /// 用户基本信息
    /// </summary>
    public class wxUserInfo
    {
        /// <summary>
        /// 用户昵称
        /// </summary>
        public string nickName { get; set; }
        /// <summary>
        /// 头像
        /// </summary>
        public string avatarUrl { get; set; }
        /// <summary>
        /// 语言
        /// </summary>
        public string language { get; set; }
        /// <summary>
        /// 国家 微信API更新后，不再返回，统一返回空字符串  微信牛逼，Api想怎么改就怎么改 奶奶个腿
        /// </summary>
        public string country { get; set; }
        /// <summary>
        /// 省  微信API更新后，不再返回，统一返回空字符串  微信牛逼，Api想怎么改就怎么改 奶奶个腿
        /// </summary>
        public string province { get; set; }
        /// <summary>
        /// 市  微信API更新后，不再返回，统一返回空字符串  微信牛逼，Api想怎么改就怎么改 奶奶个腿
        /// </summary>
        public string city { get; set; }
        /// <summary>
        /// 性别 微信API更新后，不再返回，统一返回空字符串  微信牛逼，Api想怎么改就怎么改 奶奶个腿
        /// </summary>
        public int gender { get; set; }
    }
}

4、index.js如下

4.1、微信获取用户基本信息

 GetUserInfo() {
    let that = this;
    Dialog.alert({
      title: '登录',
      message: '是否公开您的信息',
      confirmButtonOpenType: "getUserInfo", // 按钮的微信开放能力
      showCancelButton: true,
      confirmButtonText: "授权登录"
    }).then((e) => {
      // on close
      console.log("GetUser has Closed")
    }).catch(() => {

    });
  },

  confirm(e) {
    console.log(e)
  },

  /**授权-新接口 用户点击允许，回调函数 */
  Callbackuserinfo(e) {
    //用户点击允许，回调函数
    console.log(e)
  },

只需要OnLoad中调用上述方法即可即可

  onLoad() {
    this.GetUserInfo();
    //this.GetOpenId();
    
   // this.GetUserPhone();
  },

效果图如下：

 

 代码输出顺序如下：

 执行顺序：用户点击授权登录，执行 confirm(e) 方法，点击授权登录后，弹出框关闭，执行 then 方法，打印： console.log("GetUser has Closed") ，然后弹出获取您的昵称头像，用户点击【允许】，执行回调函数：Callbackuserinfo(e)

下面，我们看看 Callbackuserinfo(e) 回调函数的参数 e 的输出，是否能得到用户信息呢？

 以上便是获取用户基本信息的代码。

4.2、获取用户OpenID  

  GetOpenId() {
    wx.login({
      success(res) {
        request.request({
          url: "/api/WeChat/GetUserOpenId?code=" + res.code,
          method: "GET"
        }).then(result => {
          console.log(result.Data);
          wx.setStorageSync('session_key', result.Data.session_key)
        });
      }
    })
  },

只需在OnLoad中调用上述方法即可

  onLoad() {
    //this.GetUserInfo();
    this.GetOpenId();
    
   // this.GetUserPhone();
  },

执行结果：

 返回结果有三个值，分别为openid seesion_key untionId，其中openId 是我们想要的结果，session_key 可用于获取用户手机号，untionId 的作用，我记不起来了。

4.3、获取用户手机号

  GetUserPhone() {
    let that = this;
    Dialog.alert({
      title: '登录',
      message: '是否允许获取您的手机号',
      confirmButtonOpenType: "getPhoneNumber", // 按钮的微信开放能力
      showCancelButton: true,
      confirmButtonText: "授权"
    }).then(() => {
      // on close
      console.log("GetUserPhone has Closed")
    }).catch(() => {

    });
  },

  confirm(e) {
    console.log(e)
  },


  Callbackphonenumber(e) {
    wx.login({
      success(res) {
        request.request({
          url: "/api/WeChat/GetUserOpenId?code=" + res.code,
          method: "GET"
        }).then(result => {
          //console.log(result.Data.session_key);
          let session_key = result.Data.session_key;
          let encryptedData = e.detail.encryptedData;
          let iv = e.detail.iv;
          request.request({
            url: "/api/WeChat/GetPhoneNubmber",
            data: {
              encryptedData: encryptedData,
              session_key: session_key,
              iv: iv
            },
            method: "POST"
          }).then(result => {
            console.log(result);
          });
        });
      }
    })
  }

只需在OnLoad 中调用以上代码即可

效果如下：

 

 结果如下：

 执行顺序和获取用户基本信息一致，不再累述。

需要注意的是，获取用户OpenId 中会使用到code，而这个code的有效期为五分钟，因此，我们使用code 获取到的session_key的有效期可能也是五分钟，这里我没有详细去查。

一次性获取所有的信息，如下：

 获取到用户基本信息后，立马弹出获取手机号的授权框，并获取手机号，获取手机号的方法，写在了用户信息回调方法内

index.js 代码如下：

// index.js
var dayjs = require('dayjs')
const app = getApp()
import * as request from "../../utils/request/request.js"
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
Page({
  data: {

  },
  onLoad() {
    this.GetUserInfo();
     this.GetOpenId();
  
  },

  GetOpenId() {
    wx.login({
      success(res) {
        request.request({
          url: "/api/WeChat/GetUserOpenId?code=" + res.code,
          method: "GET"
        }).then(result => {
          console.log(result.Data);
          wx.setStorageSync('session_key', result.Data.session_key)
        });
      }
    })
  },

  GetUserInfo() {
    let that = this;
    Dialog.alert({
      title: '登录',
      message: '是否公开您的信息',
      confirmButtonOpenType: "getUserInfo", // 按钮的微信开放能力
      showCancelButton: true,
      confirmButtonText: "授权登录"
    }).then((e) => {
      // on close
      console.log("GetUser has Closed")
    }).catch(() => {

    });
  },

  
  /**授权-新接口 用户点击允许，回调函数 */
  Callbackuserinfo(e) {
    //用户点击允许，回调函数
    console.log(e);
    this.GetUserPhone();
  },

  GetUserPhone() {
    let that = this;
    Dialog.alert({
      title: '登录',
      message: '是否允许获取您的手机号',
      confirmButtonOpenType: "getPhoneNumber", // 按钮的微信开放能力
      showCancelButton: true,
      confirmButtonText: "授权"
    }).then(() => {
      // on close
      console.log("GetUserPhone has Closed")
    }).catch(() => {

    });
  },

  confirm(e) {
    console.log(e)
  },


  Callbackphonenumber(e) {
    wx.login({
      success(res) {
        request.request({
          url: "/api/WeChat/GetUserOpenId?code=" + res.code,
          method: "GET"
        }).then(result => {
          //console.log(result.Data.session_key);
          let session_key = result.Data.session_key;
          let encryptedData = e.detail.encryptedData;
          let iv = e.detail.iv;
          request.request({
            url: "/api/WeChat/GetPhoneNubmber",
            data: {
              encryptedData: encryptedData,
              session_key: session_key,
              iv: iv
            },
            method: "POST"
          }).then(result => {
            console.log(result);
          });
        });
      }
    })
  }
})

执行结果：

 以上便是Vant 结合 C# 结合 微信小程序 获取用户信息的全部。

@天才大六的博客