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


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文件中调用js的实现方法小结
Oct 23 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
JavaScript如何判断input数据类型
Feb 06 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 Google的translate API代码
2008/12/10 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php操作access数据库的方法详解
2017/02/22 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
详解python3中zipfile模块用法
2018/06/18 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
董事长助理工作职责
2014/06/08 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js