微信小程序如何获取用户信息

2019-11-19 14:28:25

字体：大中小

来源：转载

供稿：网友

最近在研究微信小程序怎么玩的。接触后发现好多的坑。

比如在浏览器中我们可以通过document.getElementById 获取到页面的DOM对象。而在微信小程序中是获取不到DOM对象的。document.getElementById() 直接报错 getElementById not function 我也是醉了。不支持这个好多有趣的功能不能实现了。
言归正传，我谈下获取用户信息的感想。

有两种获取用户信息的方案。
1、不包含敏感信息openId 的json对象(包含:nickname、avatarUrl等基本信息)
2、包含敏感信息openId的基本信息。

第一种获取方案

1、首先调用wx.login()接口让用户授权验证，也就是我们肉眼观察到的，你是否对xxxxx授权这种信息。
2、用户成功授权后，调用wx.getUserInfo() 接口获取用户信息。

完整代码如下

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

第二种比较复杂了，需要与后台进行交互才能获得userInfo，但是这种方案获得的数据是完整的(包含openId)。

1、调用wx.login()接口授权在success 成功函数的参数中包含code。
2、调用wx.getUserInfo()接口success 函数中包含encryptedData、iv
3、将上述参数传给后台解析，生成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);   });   }  })  } } })

后台解析

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

getUserInfo function 其中wxBizDataCrypt.php 就是微信官方提供的素材包

curlHttp 函数是一个自定函数该函数的源码查看我的这篇文章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();//远程请求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); }};

app.globalData.host 就是域名地址如 https://xxxxx.com;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序模版渲染详解

下一篇：vue实现前进刷新后退不刷新效果