微信小程序 - 獲取用戶信息
最近在研究微信小程序怎么玩的。接觸后發(fā)現(xiàn)好多的坑。
比如在瀏覽器中我們可以通過document.getElementById 獲取到頁(yè)面的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ù)就是前端傳遞過來(lái)的 */ 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ù) - <code o="" cl="" ptm="" pbm"="" style="word-wrap: break-word; margin: 0px; padding: 0px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace;">
