首頁 > web前端 > js教程 > 微信小程式取得使用者資訊如何實現

微信小程式取得使用者資訊如何實現

小云云
發布: 2018-05-10 15:20:41
原創
4275 人瀏覽過

最近在研究微信小程式怎麼玩的。接觸後發現好多的坑。 本文就教大家微信小程式取得使用者資訊如何實現。

例如在瀏覽器中我們可以透過document.getElementById 取得到頁面的DOM物件。而在微信小程式中是取得不到DOM對象的。 document.getElementById() 直接報錯 getElementById not function 我也是醉了。不支援這個好多有趣的功能不能實現了。
言歸正傳,我談下獲取用戶資訊的感想。

有兩種取得使用者資訊的方案。
1、不包含敏感資訊openId 的json物件(包含:nickname、avatarUrl等基本資訊)
2、包含敏感資訊openId的基本資訊。

第一種取得方案

1、先呼叫wx.login()介面讓使用者授權驗證,也就是我們肉眼觀察到的,你是否對xxxxx授權這種資訊。
2、使用者成功授權後,呼叫wx.getUserInfo() 介面取得使用者資訊。

完整程式碼如下

1

2

3

4

5

6

7

8

9

10

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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);

   });

   }

  })

  }

 }

 })

登入後複製

後台解析

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

/**

 * 获取粉丝信息

 * 其中的参数就是前端传递过来的

 */

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

1

2

3

4

5

6

7

8

9

10

11

12

13

//获取粉丝信息

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

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;

相關推薦:

Thinkphp5如何實作微信小程式取得使用者資訊介面的案例

關於取得使用者資訊的10篇文章推薦

網頁授權取得使用者資訊的方法

以上是微信小程式取得使用者資訊如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
現在個人嫩申請微信小程序
來自於 1970-01-01 08:00:00
0
0
0
javascript - 小程式中遇到js執行時序問題
來自於 1970-01-01 08:00:00
0
0
0
用php如何產生小程式的小程式碼?
來自於 1970-01-01 08:00:00
0
0
0
微信小程式
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板