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


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 相关文章推荐
Jquery api 速查表分享
Jan 12 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
MVVM 双向绑定的实现代码
Jun 21 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
JQuery优缺点分析说明
2011/04/10 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python编程之string相关操作实例详解
2017/07/22 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
四查四看剖析材料
2014/02/14 职场文书
活动策划求职信模板
2014/04/21 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
大雁塔英文导游词
2015/02/10 职场文书