微信小程序登录接口调整修改方案（以typecho小程序为例）

微信小程序官方在四月中旬对小程序登录、用户信息相关接口进行了调整，导致大部分小程序的登录功能都受到了很多影响，当时调整的时候就打算写个教程的，但是一直没有时间去写这个，最近typecho小程序群里的小伙伴一直在问这个，就抽个时间写一下教程吧，以typecho小程序为例，适用于所有小程序修改。注意：因为typecho小程序采用的是uniapp编写的，所以可能会微信小程序的原框架代码有所不同，但是大同小异。

旧版说明

首先说一下以前版本的时候小程序采用的登录授权方式，一般都说采用点击按钮<button open-type="getUserInfo" @getuserinfo="getuserinfo"/>的形式进行的，通过getUserInfo接口获取用户信息，但是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。
原来的代码如下：

//wxml

<button open-type="getUserInfo" @getuserinfo="getuserinfo">登录</button>

//js

getuserinfo: function() {

var that = this;

// wx登录

uni.login({

success(res) {

// console.log(res)

if (res.code) {

//发起网络请求

var code = res.code;

// 获取微信用户信息

uni.getUserInfo({

success: function(res) {

res.userInfo.code = code;

that.userInfo = res.userInfo;

uni.request({

// #ifdef MP-WEIXIN

url: API.WXLogin(that.userInfo),

// #endif

// #ifdef MP-QQ

url: API.QQLogin(that.userInfo),

// #endif

success: function(res) {

// console.log(res);

that.userInfo.openid = res.data.data;

uni.setStorageSync('isLogin', true);

uni.setStorageSync('userInfo', that.userInfo);

uni.setStorageSync('openid', that.userInfo.openid);

that.showLogin = false;

// console.log(that.userInfo);

}

});

},

fail: res => {

// 获取失败的去引导用户授权

}

});

} else {

}

}

});

},

新版更换获取授权接口

新版修改了登录授权接口，可以直接采用点击任意view进行登录，不在局限于button和open-type，可以直接采用@click（注：微信原框架为bindtap），也就是说我们可以将代码登陆的按钮写成下面这样：

//uniapp版

<button @click="getuserinfo">点击登录</button>

//微信版

<button bindtap="getuserinfo">点击登录</button>

然后就是将以前的wx.getuserinfo改成wx.getUserProfile就行了，通过wx.getUserProfile可以直接获取用户的userInfo，修改如下：

getuserinfo: function() {

uni.showLoading({

title:"登录中"

})

var that = this;

let code = '';

uni.login({

success: (res) => {

console.log(res)

code = res.code;

}

})

uni.getUserProfile({

desc: '用于完善会员资料',

success: res => {

console.log(res);

res.userInfo.code = code;

that.userInfo = res.userInfo;

uni.request({

url: API.WXLogin(that.userInfo),

success: res=> {

console.log(res);

uni.hideLoading();

that.userInfo.openid = res.data.data;

uni.setStorageSync('isLogin', true);

that.isLogin = true;

uni.setStorageSync('userInfo', that.userInfo);

uni.setStorageSync('openid', that.userInfo.openid);

console.log(that.userInfo);

}

});

}

});

}

这里需要注意的是wx.getUserProfile不能静默调用，所以不能将wx.getUserProfile写在wx.login的回调函数中，这里我直接将他们放在了同级，因为在用户点击按钮的时候wx.login已经调用，获取到了code，然后用户在通过弹窗点击授权时就可以直接使用了。

以上就是大致的修改过程，采用的是uniapp代码方式，但是大致思路就是这样，不过改接口好像只有微信小程序支持,QQ等平台似乎还没有支持getUserProfile接口，所以用户还需要进行对个平台的适配。

更多优质请关注本站或本站微信公众号：阳光艺创站