微信小程序更改接口之后的登陆方式

关于微信小程序更改接口之后的登陆方式

最近在做一个小程序，以前对小程序接触不少，当一直没有过多关注微信小程序的登陆这块，直到这次项目的要求，才匆匆去学习。但、、、、、微信登陆接口getUserInfo()接口突然不能用了，而且官方说明文档几乎就没有,MMP, 是真坑啊。在网上找资料发现不但少，而且都不能用，在加上对微信授权方法不熟悉，，几乎奔溃、、废话说完了，下面开始。

1.首先你要对用到的几个基本方法的有一定了解

//查看用户是否对某个权限进行了授权
wx.getSetting({
        success:function(res){
        //这里判断的是：是否对获得用户的信息进行了授权
            if (res.authSetting['scope.userInfo']) {
            console.log("已经授权！");
                }
            }else{
                console.log("没有授获取用户信息权限权！");
                //进入授权界面
                wx.navigateTo({
                    url: '../authorize/authorize',
                });
            }
        },
        fail:function(res){
            console.log("授权失败！");
        }
    })

//调用此方法，微信会为我们放回一个code
//这个code和将传给我们的服务器，另外和我们的appid、secret，一起发送给微信服务器，微信服务器将会向我们返回当前用户的openid和一个session_key（这个用于解码用户数据）
  wx.login({
        success: function(res) { },
        fail: function(res) {},
        complete: function(res) {},
    });

//由于检查session_key是否过期
wx.checkSession();

2.微信规定：敏感数据不应该从我们的服务器下发到小程序

而敏感数据是个啥呢？
其实就是openid和session_key（这个要注意，对上线审核有影响）
解决办法：
创建两张表：
userinfo用于存放可以返回给小程序的
session表用于存放敏感信息（如果条件允许，最好放进redis）

这里两张表的id对同以用户是相同的

3.基本工作已经准备好了，开始代码
首先在utils下新建一个login.js

module.exports = {
    doLogin: doLogin,
    queryUsreInfo: queryUsreInfo,
    checkLogin: checkLogin
};
const app = getApp();
//用于调用wx:login()获取code,发送给后台，得到session_key和openid储存在后台，返回id保存在本地
function doLogin() {
    var that = this;
    wx.login({
        success: function(res) {
            if (res.code) {
                wx: wx.request({
                    url:app.globalData.webUrl + '/wxSession/doCode',
                    data: {
                        code: res.code
                    },
                    method: 'GET',
                    success: function(res) {
                        console.log(res)
                        if (res.data) {
                            //获取到用户凭证 存儲 id
                            wx.setStorage({
                                key: 'id',
                                data: res.data
                            })
                        }
                    },
                    fail: function(res) {
                        console.log("login失败！");
                    },
                    complete: function(res) {},
                });
            }
        },
        fail: function(res) {},
        complete: function(res) {},
    });
};
//更新，并返回用户数据
function queryUsreInfo(e) {
    //从存储中获取id
    wx.getStorage({
        key: 'id',
        success: function(res) {
            console.log(res.data);
            wx.request({
                url: app.globalData.webUrl + '/wxUser/getUserInfo',
                method:'GET',
                //encryptedData:加密的用户数据，iv：解码用到的偏移量
                data: { id: res.data, encryptedData: e.encryptedData, iv: e.iv },
                success:function(res){
                    console.log("查询信息成功！");
                    savaUserinfo(res.data);
                },fail:function(res){
                    console.log("获取结果失败！");
                }
            })
        }     
    })
}
function savaUserinfo(userInfo){
    console.log("全局变量赋");
    app.globalData.userInfo=userInfo;
};
//检查session_key是否失效
function checkSession_key(){
    wx.checkSession({
        success:function(res){
            console("session_key未失效！");
        },
        fail:function(res){
            console("session_key已失效！");
            doLogin();
        }
    })
};
function checkLogin(){
    wx.getSetting({
        success:function(res){
            if (res.authSetting['scope.userInfo']) {
            console.log("已经授权！");
            //判断用户信息是否为空
                if (app.globalData.userInfo == null && app.globalData.userInfo==undefined){
                    wx.getUserInfo({
                        success:function(res){
                            queryUsreInfo(res);
                        }
                    });
                }
            }else{
                console.log("没有授获取用户信息权限权！");
                //进入授权界面
                wx.navigateTo({
                    url: '../authorize/authorize',
                });
            }
        },
        fail:function(res){
            console.log("授权失败！");
        }
    })
}

要用到的进行授权的页面代码：
authorize.wxml

<view wx:if="{{canIUse}}">
    <view class='header'>
        <image src='/images/wx_login.png'></image>
    </view>
    <view class='content'>
        <view>申请获取以下权限</view>
        <text>获得你的公开信息(昵称，头像等)</text>
    </view>
    <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
        授权登录
    </button>
</view>
<view wx:else>请升级微信版本</view>

authorize.wxss

.header {
    margin: 90rpx 0 90rpx 50rpx;
    text-align: center;
    width: 650rpx;
    height: 300rpx;
    line-height: 450rpx;
}
.header image {
    width: 200rpx;
    height: 200rpx;
}
.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}
.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}

authorize.js

var login = require("../../utils/login.js");
const app = getApp();
Page({
    data: {
        //判断小程序的API，回调，参数，组件等是否在当前版本可用。
        canIUse: wx.canIUse('button.open-type.getUserInfo')
    },
    onLoad: function () {
      
    },
    bindGetUserInfo: function (e) {
        console.log("用户点击了按钮！");
        if (e.detail.userInfo) {
        login.doLogin();
            //用户按了允许授权按钮
            var that = this;
            //插入登录的用户的相关信息到数据库
            login.queryUsreInfo(e.detail);
            //授权成功后，跳转进入小程序首页
            wx.navigateBack({
                delta:1
            });
        } else {
            console.log("用户拒绝了按钮！");
            //用户按了拒绝按钮
            wx.showModal({
                title: '警告',
                content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
                showCancel: false,
                confirmText: '返回授权',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击了“返回授权”')
                    }
                }
            })
        }
    }
})

后台用到的两个方法：

//doLongin()用到的方法
 @RequestMapping("/doCode")
    public String doCode(String code){
        return wxSessionService.getId(code);
    }
//queryUsreInfo（e）用到的方法
@RequestMapping("/getUserInfo")
    public WxUser getUserInfo(String id,String encryptedData,String iv){
        return wxUserService.getUserInfo( id, encryptedData, iv);
    }

4.最后只需要在要进行授权获取用户信息的js中

1.添加引用
const login=require("../../utils/login.js");
2.在onLaunch()或其它方法中调用方法
 login.checkLogin();

5.如果想要定时定时效果

onShow: function () {
        setTimeout(function () {
            login.checkLogin();
        }, 3000);
    }

OK！登陆功能到此结束，如有不当之处和不明白之处，给我留言哦。。。。
最后吐槽，腾讯真坑。。。