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


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 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
js处理表格对table进行修饰
May 26 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue cli使用融云实现聊天功能的实例代码
Apr 19 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随机数生成代码与使用实例分析
2011/04/08 PHP
thinkPHP查询方式小结
2016/01/09 PHP
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python flask实现分页的示例代码
2018/08/02 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
Python 解决相对路径问题:"No such file or directory"
2020/06/05 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
建筑工程自我鉴定
2013/10/18 职场文书
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
女大学生个人求职信
2013/12/09 职场文书
导游实习生自荐书
2014/01/28 职场文书
西门豹教学反思
2014/02/04 职场文书
环保志愿者活动方案
2014/08/14 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python