How to develop a WeChat applet to obtain users' personal information-JS Tutorial-php.cn

This time I will show you how to develop a WeChat applet to obtain users' personal information. What are theprecautions for developing a WeChat applet to obtain users' personal information? The following is a practical case, let's take a look.

Recently I am studying how to play WeChat mini programs. After contacting it, I found many pitfalls.

For example, in a browser we can get the DOM object of the page through document.getElementById. However, the DOM object cannot be obtained in the WeChat applet. document.getElementById() directly reports an error getElementById not function. I am also drunk. Without support for this many interesting features cannot be implemented.

Getting back to business, let me talk about my thoughts on obtaining user information.

There are two options for obtaining user information.

1. A json object that does not contain sensitive information openId (including basic information such as nickname, avatarUrl, etc.)
2. Contains basic information of sensitive information openId.

The first acquisition scheme

1. First call the wx.login() interface to allow user authorization verification, which is what we observe with the naked eye. Are you sure about xxxxx? Authorize this information.

2. After the user is successfully authorized, call the wx.getUserInfo() interface to obtain user information.

The complete code is as follows

wx.login({ success:function(){ wx.getUserInfo({ success:function(res){ var simpleUser = res.userInfo; console.log(simpleUser.nickName); } }); } });

Copy after login

The second typeis more complicated and requires interaction with the background to obtain userInfo, but the data obtained by this solution is complete (including openId).

1. Call the wx.login() interface to authorize the parameter

of the successfunction to include code.2. Call the wx.getUserInfo() interface success function, which contains encryptedData and iv
3. Pass the above parameters to the background for analysis and generate userInfo

The code is as follows

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); }); } }) } } })

Copy after login

Backend analysis

/** * 获取粉丝信息 * 其中的参数就是前端传递过来的 */ 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); //载入用户服务 //$userService = load_service("User"); //$userService->checkUser($this->projectId,$userInfo); echo $userInfo; //微信响应的就是一个json数据 }

Copy after login

getUserInfo function where wxBizDataCrypt.php is the material package officially provided by WeChat

curlHttp function is a custom function. For the source code of this function, check out my article 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; } }

Copy after login

My own small tool request.js

var app = getApp(); //远程请求 var httpsRequest = { //http 请求 https_request : function(obj){ wx.request(obj); }, //文件上传 upload_request : function(dataSource){ wx.uploadFile(dataSource); } }; module.exports = { //执行异步请求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 请求 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 请求 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); } };

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!