微信小程序如何獲取用戶信息
最近在研究微信小程序怎么玩的。接觸后發(fā)現(xiàn)好多的坑。
比如在瀏覽器中我們可以通過document.getElementById 獲取到頁面的DOM對(duì)象。而在微信小程序中是獲取不到DOM對(duì)象的。document.getElementById() 直接報(bào)錯(cuò) getElementById not function 我也是醉了。不支持這個(gè)好多有趣的功能不能實(shí)現(xiàn)了。
言歸正傳,我談下獲取用戶信息的感想。
有兩種獲取用戶信息的方案。
1、不包含敏感信息openId 的json對(duì)象(包含:nickname、avatarUrl等基本信息)
2、包含敏感信息openId的基本信息。
第一種獲取方案
1、首先調(diào)用wx.login()接口 讓用戶授權(quán)驗(yàn)證,也就是我們?nèi)庋塾^察到的,你是否對(duì)xxxxx授權(quán)這種信息。
2、用戶成功授權(quán)后,調(diào)用wx.getUserInfo() 接口獲取用戶信息。
完整代碼如下
wx.login({ success:function(){ wx.getUserInfo({ success:function(res){ var simpleUser = res.userInfo; console.log(simpleUser.nickName); } }); } });
第二種比較復(fù)雜了,需要與后臺(tái)進(jìn)行交互才能獲得userInfo,但是這種方案獲得的數(shù)據(jù)是完整的(包含openId)。
1、調(diào)用wx.login()接口 授權(quán) 在success 成功函數(shù)的參數(shù)中包含code。
2、調(diào)用wx.getUserInfo()接口success 函數(shù)中包含encryptedData、iv
3、將上述參數(shù)傳給后臺(tái)解析,生成userInfo
代碼如下
js
var request = require("../../utils/request.js"); wx.login({ success:function(res_login){ if(res_login.code) { wx.getUserInfo({ withCredentials:true, success:function(res_user){ var requestUrl = "/getUserApi/xxx.php"; var jsonData = { code:res_login.code, encryptedData:res_user.encryptedData, iv:res_user.iv }; request.httpsPostRequest(requestUrl,jsonData,function(res){ console.log(res.openId); }); } }) } } })
后臺(tái)解析
/** * 獲取粉絲信息 * 其中的參數(shù)就是前端傳遞過來的 */ public function wxUserInfo($code,$encryptedData,$iv) { $apiUrl = "https://api.weixin.qq.com/sns/jscode2session?appid={$this->wxConfig['appid']}&secret={$this->wxConfig['appsecret']}&js_code={$code}&grant_type=authorization_code"; $apiData = json_decode(curlHttp($apiUrl,true),true); if(!isset($apiData['session_key'])) { echoJson(array( "code" => 102, "msg" => "curl error" ),true); } $userInfo = getUserInfo($this->wxConfig['appid'],$apiData['session_key'],$encryptedData,$iv); if(!$userInfo) { echoJson(array( "code" => 105, "msg" => "userInfo not" )); } //$userInfo = json_decode($userInfo,true); //載入用戶服務(wù) //$userService = load_service("User"); //$userService->checkUser($this->projectId,$userInfo); echo $userInfo; //微信響應(yīng)的就是一個(gè)json數(shù)據(jù) }
getUserInfo function 其中wxBizDataCrypt.php 就是微信官方提供的素材包
curlHttp 函數(shù)是一個(gè)自定函數(shù) 該函數(shù)的源碼查看我的這篇文章curlHttp
//獲取粉絲信息 function getUserInfo($appid,$sessionKey,$encryptedData,$iv){ require_once ROOTPATH . "/extends/wxUser/wxBizDataCrypt.php"; $data = array(); $pc = new WXBizDataCrypt($appid, $sessionKey); $errCode = $pc->decryptData($encryptedData, $iv, $data ); if ($errCode == 0) { return $data; } else { return false; } }
自己寫的小工具 request.js
var app = getApp(); //遠(yuǎn)程請(qǐng)求 var __httpsRequest = { //http 請(qǐng)求 https_request : function(obj){ wx.request(obj); }, //文件上傳 upload_request : function(dataSource){ wx.uploadFile(dataSource); } }; module.exports = { //執(zhí)行異步請(qǐng)求get httpsRequest:function(obj){ var jsonUrl = {}; jsonUrl.url = obj.url; if(obj.header)jsonUrl.header=obj.header; if(obj.type) jsonUrl.method = obj.type; else jsonUrl.method="GET"; if(obj.data)jsonUrl.data = obj.data; obj.dataType?(jsonUrl.dataType=obj.dataType):(jsonUrl.dataType="json"); jsonUrl.success = obj.success; jsonUrl.data.projectId = app.globalData.projectId; __httpsRequest.https_request(jsonUrl); }, //get 請(qǐng)求 httpsGetRequest:function(req_url,req_obj,res_func) { var jsonUrl = { url:app.globalData.host + req_url, header:{"Content-Type":"application/json"}, dataType:"json", method:"get", success:function(res) { typeof res_func == "function" && res_func(res.data); } } if(req_obj) { jsonUrl.data = req_obj; } jsonUrl.data.projectId = app.globalData.projectId; __httpRequest.https_request(jsonUrl); }, //post 請(qǐng)求 httpsPostRequest:function(req_url,req_obj,res_func) { var jsonUrl = { url:app.globalData.host + req_url, header:{"Content-Type":"application/x-www-form-urlencoded"}, dataType:"json", method:"post", success:function(res) { typeof res_func == "function" && res_func(res.data); } } if(req_obj) { jsonUrl.data = req_obj; } jsonUrl.data.projectId = app.globalData.projectId; __httpsRequest.https_request(jsonUrl); }, //文件上傳 httpsUpload:function(uid,fileDataSource,res_func) { dataSource = { url:app.globalData.host + req_url, header:{ "Content-Type":"multipart/form-data" }, dataType:"json", formData : { "uid" : uid }, filePath : fileDataSource, name : "fileObj", success:function(res){ typeof res_func == "function" && res_func(res); } } __httpsRequest.upload_request(dataSource); } };
app.globalData.host 就是域名地址如 https://xxxxx.com;
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS判斷鼠標(biāo)從什么方向進(jìn)入一個(gè)容器實(shí)例說明
偶然將想到的一個(gè)如何判斷鼠標(biāo)從哪個(gè)方向進(jìn)入一個(gè)容器的問題,并且做了一系列的設(shè)想,代碼部分不是很多,我直接寫了個(gè)示例, 感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-02-02JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript實(shí)現(xiàn)三階幻方算法謎題解答
這篇文章主要介紹了JavaScript實(shí)現(xiàn)三階幻方算法謎題解答,三階幻方是指試將1~9這9個(gè)不同整數(shù)填入一個(gè)3×3的表格,使得每行、每列以及每條對(duì)角線上的數(shù)字之和相同,需要的朋友可以參考下2014-12-12Javascript浮點(diǎn)數(shù)乘積運(yùn)算出現(xiàn)多位小數(shù)的解決方法
這篇文章主要介紹了Javascript浮點(diǎn)數(shù)乘積運(yùn)算出現(xiàn)多位小數(shù)的解決方法,需要的朋友可以參考下2014-02-02Javascript實(shí)現(xiàn)鼠標(biāo)框選操作 不是點(diǎn)擊選取
這篇文章主要介紹了Javascript實(shí)現(xiàn)鼠標(biāo)框選操作,不是點(diǎn)擊選取,利用鼠標(biāo)進(jìn)行框選,感興趣的小伙伴們可以參考一下2016-04-04JavaScript Event學(xué)習(xí)第四章 傳統(tǒng)的事件注冊(cè)模型
在這一章我會(huì)講解給元素注冊(cè)事件的最好的一種辦法,那就是:確保一個(gè)特定的事件在特定的HTML元素上發(fā)生并且能運(yùn)行特定的腳本。2010-02-02