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


Posted in Javascript onJanuary 26, 2018

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

比如在浏览器中我们可以通过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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js时间日期和毫秒的相互转换
Feb 22 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
深入理解Node module模块
Mar 26 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
微信小程序实现单选功能
Oct 30 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 #Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 #Javascript
微信小程序实现图片压缩功能
Jan 26 #Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 #Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 #Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
You might like
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
实用函数9
2007/11/08 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php自动获取关键字的方法
2015/01/06 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
js实现div弹出层的方法
2014/11/20 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python常用小技巧总结
2015/06/01 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python 常用的基础函数
2018/07/10 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
2015年保洁员工作总结
2015/05/04 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python