Heim > Web-Frontend > js-Tutorial > So erhalten Sie Benutzerinformationen über das WeChat-Applet

So erhalten Sie Benutzerinformationen über das WeChat-Applet

小云云
Freigeben: 2018-05-10 15:20:41
Original
4181 Leute haben es durchsucht

Vor Kurzem lerne ich, wie man das WeChat-Miniprogramm spielt. Nachdem ich Kontakt aufgenommen hatte, entdeckte ich viele Fallstricke. In diesem Artikel erfahren Sie, wie Sie Benutzerinformationen über das WeChat-Applet erhalten.

Zum Beispiel können wir in einem Browser das DOM-Objekt der Seite über document.getElementById abrufen. Das DOM-Objekt kann jedoch nicht im WeChat-Applet abgerufen werden. document.getElementById() meldet direkt einen Fehler, getElementById funktioniert nicht. Ich bin auch betrunken. Ohne diese Unterstützung sind viele interessante Features nicht umsetzbar.
Um zum Geschäftlichen zurückzukehren, lassen Sie mich über meine Gedanken zum Erhalt von Benutzerinformationen sprechen.

Es gibt zwei Möglichkeiten, Benutzerinformationen zu erhalten.
1. Ein JSON-Objekt, das keine vertraulichen Informationen openId enthält (einschließlich grundlegender Informationen wie Spitzname, Avatar-Url usw.)
2. Enthält grundlegende Informationen wie vertrauliche Informationen openId.

Die erste Erfassungslösung

1. Rufen Sie zuerst die wx.login()-Schnittstelle auf, um die Überprüfung der Benutzerberechtigung zu ermöglichen, was wir beim Nackten beobachten Auge. Ob diese Art von Informationen für xxxxx autorisiert werden soll.
2. Rufen Sie nach erfolgreicher Autorisierung des Benutzers die Schnittstelle wx.getUserInfo() auf, um Benutzerinformationen abzurufen.

Der vollständige Code lautet wie folgt

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

Der zweite Typ ist komplizierter und erfordert eine Interaktion mit dem Hintergrund, um Benutzerinformationen zu erhalten, aber die erhaltenen Daten Damit ist die Lösung vollständig (enthält openId).

1. Rufen Sie die Schnittstelle wx.login() auf, um Code zu autorisieren und in die Parameter der Erfolgsfunktion aufzunehmen.
2. Rufen Sie die Erfolgsfunktion wx.getUserInfo() auf, die verschlüsselte Daten und iv enthält.
3. Übergeben Sie die oben genannten Parameter zur Analyse an den Hintergrund und generieren Sie userInfo.

Der Code lautet wie folgt
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);
   });
   }
  })
  }
 }
 })
Nach dem Login kopieren

Backend-Analyse

/**
 * 获取粉丝信息
 * 其中的参数就是前端传递过来的
 */
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数据
}
Nach dem Login kopieren

getUserInfo-Funktion, wobei wxBizDataCrypt.php das offiziell von WeChat bereitgestellte Materialpaket ist

curlHttp-Funktion ist a Benutzerdefinierte Funktion. Sehen Sie sich den Quellcode dieser Funktion an

//获取粉丝信息
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;
 }
}
Nach dem Login kopieren

ein kleines Tool request.js geschrieben von mir

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);
 }
};
Nach dem Login kopieren

app.globalData.host ist der Domainname Adresse wie https://xxxxx. com;

Verwandte Empfehlungen:

Eine Fallstudie darüber, wie Thinkphp5 das WeChat-Applet implementiert, um es zu erhalten Benutzerinformationsschnittstelle

10 empfohlene Artikel zum Erhalten von Benutzerinformationen

So erhalten Sie Benutzerinformationen durch Webautorisierung

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Benutzerinformationen über das WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage