推荐精品教程

微信小程序登录接口调整修改方案(以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接口,所以用户还需要进行对个平台的适配。

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

原创文章,作者:小创果,如若转载,请注明出处:https://www.i4qq.com/jpjc/xcxdltzfa.html
空调小程序:抖音热门网页小程序版(自娱自乐版)
« 上一篇 05-12

发表评论

仅有一条评论

  1. 六零Lv.1 说道:

    博主,已经编译成小程序代码的,修改哪个文件?已加Q群,同意一下,谢谢啦

作者信息

安好屋

热门文章

最多点赞

标签TAG

热评文章