十年河東，十年河西，莫欺少年窮
學無止境，精益求精
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# 結合 微信小程序 獲取用戶信息的全部。
@天才大六的博客