微信小程序?qū)W習(xí)筆記之登錄API與獲取用戶信息操作圖文詳解

更新時間：2019年03月29日 09:52:58 作者：李維山

這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之登錄API與獲取用戶信息操作,結(jié)合實例形式分析了微信小程序登陸請求及后臺交互相關(guān)操作技巧,并結(jié)合圖文形式進行說明,需要的朋友可以參考下

本文實例講述了微信小程序?qū)W習(xí)筆記之登錄API與獲取用戶信息操作。分享給大家供大家參考，具體如下：

前面介紹了微信小程序跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)，這里來分析一下登錄API與獲取用戶信息操作方法。

【小程序登錄】wx.login()

app.js：

App({
 onLaunch: function () {
  // 登錄
  wx.login({
   success: function (res) {
    if (res.code) {
     //發(fā)起網(wǎng)絡(luò)請求
     wx.request({
      url: 'https://www.msllws.top/delcode.php',
      data: {
       code: res.code
      }
     })
    } else {
     console.log('登錄失敗！' + res.errMsg)
    }
   }
  });
 }
})

初始化后得到了臨時登錄憑證code，使用wx.request()發(fā)送code，請求后臺接口獲取【會話密鑰session_key】和【用戶唯一標識openid】，滿足UnionID下發(fā)條件時還可以獲得【用戶在開放平臺的唯一標識符unionid】。

后臺接收code的接口delcode.php：

<?php 
  $code = $_GET['code'];
  $appid = 'wx1aebd07bdcf596b8';
  $secret = '9ee8211007b81efd8c11d7d82d3b8658';
  $url = 'https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$secret.'&js_code='.$code.'&grant_type=authorization_code';
  $res = file_get_contents($url);

  //(省略業(yè)務(wù)邏輯:保存返回結(jié)果中的openid與用戶userid關(guān)聯(lián)......)

  echo $res;

請求返回結(jié)果：

（unionid需要小程序綁定已認證的微信開放平臺才可以獲得）

【獲取用戶信息】wx.getUserInfo()

首先借助button來授權(quán)登錄，login.wxml：

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權(quán)登錄</button>
<view wx:else>請升級微信版本</view>

login.js如下：

Page({
 data: {
  //判斷getUserInfo是否在當前版本可用
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 bindGetUserInfo(e) {
  console.log(e.detail.userInfo)
 }
})

首次點擊button按鈕提示微信授權(quán)，允許后調(diào)用bindGetUserInfo函數(shù)打印獲得的用戶信息

此時修改login.js如下，使用wx.getSetting()獲得用戶信息

（調(diào)用wx.getUserInfo()之前需要調(diào)用wx.getSetting()獲取用戶當前的授權(quán)狀態(tài)，返回結(jié)果中如果包含【scope.userInfo】，說明用戶已對用戶信息進行授權(quán)，可以直接調(diào)用wx.getUserInfo()獲取用戶信息）

Page({
 data: {
  //判斷getUserInfo是否在當前版本可用
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 onLoad: function () {
  // 查看是否授權(quán)
  wx.getSetting({
   success(res) {
    if (res.authSetting['scope.userInfo']) {
     // 已經(jīng)授權(quán)，直接調(diào)用getUserInfo獲取用戶信息
     wx.getUserInfo({
      success: function (res) {
       console.log(res.userInfo)
      }
     })
    }
   }
  })
 },
 bindGetUserInfo(e) {
  console.log(e.detail.userInfo)
 }
})

重新編譯，頁面加載獲得同上用戶信息：