<>简介

为优化用户体验,使用 wx.getUserInfo
接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo
接口,将无法弹出授权询问框,默认调用失败。

* 小程序使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。
* 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。
<>看效果





<>第一步:调用微信wx.login获取登录凭证code

<>wx.login(Object object)


调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。
请求参数 Object object 属性 类型 默认值 是否必填 说明 支持版本 timeout number 否 超时时间,单位ms >= 1.9.90
success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否
接口调用结束的回调函数(调用成功、失败都会执行) 返回结果 Object res 属性 类型 说明 支持版本 code string
用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 code2Session,使用 code 换取 openid 和 session_key 等信息
<>代码示例
wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url:
'https://test.com/onLogin', data: { code: res.code } }) } else {
console.log('登录失败!' + res.errMsg) } } })
<>第二步:通过code 获取 openid 和 session_key

开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key
是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。
接口地址:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

<https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code>
请求参数 参数 必填 说明 appid 是 小程序唯一标识 secret 是 小程序的 app secret js_code 是 登录时获取的 code
grant_type 是 填写为 authorization_code 返回参数 参数 说明 openid 用户唯一标识 session_key 会话密钥
expires_in 过期时长(默认7200)
<>第三步:实现源码

<>getOpenId.wxml
<view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}"
open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn">
点击微信授权 </button> <block wx:else> <image bindtap="bindViewTap"
class="userinfo-avatar" src="{{userInfo.avatarUrl}}"
background-size="cover"></image> <text
class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view>
####getOpenId.js
var app = getApp() var userInfo = null; Page({ globalData: { appid:
'wx416xxxx16a0a1',//appid需自己提供,此处的appid我随机编写 secret:
'5498fcab2xxxx5df26bf854ba89',//secret需自己提供,此处的secret我随机编写 }, data: { userInfo:
{}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') },
onLoad: function () { var that = this; if (app.globalData.userInfo) {
this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else
if (this.data.canIUse) { // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 //
所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({
userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有
open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => {
app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo,
hasUserInfo: true }) } }) } //登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code
后传到开发者服务器调用此接口完成登录流程。 wx.login({ success: function (res) { if (res.code) {
console.log("res.code:" + res.code); var d =
that.globalData;//这里存储了appid、secret、token串 var l =
'https://api.weixin.qq.com/sns/jscode2session?appid=' + d.appid + '&secret=' +
d.secret + '&js_code=' + res.code + '&grant_type=authorization_code';
wx.request({ url: l, data: {}, method: 'GET', success: function (res) { var obj
= {}; obj.openid = res.data.openid; console.log("openid:" + obj.openid);
console.log("session_key:" + res.data.session_key); obj.expires_in = Date.now()
+ res.data.expires_in; wx.setStorageSync('user', obj);//存储openid } }); } else {
console.log('获取用户登录态失败!' + res.errMsg) } } }); } , getUserInfo: function (e) {
console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({
userInfo: e.detail.userInfo, hasUserInfo: true }) } })
####getOpenId.json
{ "navigationBarTitleText": "微信授权并获取OpenId" }
####getOpenId.wxml
.userinfo { display: flex; flex-direction: column; align-items: center;
background: #f0145a; width: 100%; height: 300rpx; } .userinfo-btn{ margin-top:
50rpx; background: none !important; color: #fff !important; font-size: 40rpx; }
.userinfo-avatar { width: 108rpx; height: 108rpx; margin: 40rpx; border-radius:
50%; } .userinfo-nickname { color: #fff; }
<>贡献者

* IT实战联盟-Line <https://www.jianshu.com/u/283f93ada597>
* IT实战联盟-咖啡 <https://www.jianshu.com/u/29d607600e98>
<>更多精彩内容可以关注“IT实战联盟”公众号哦~~~