微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

微信小程序授权登录解决方案攻略

概述

微信小程序授权登录是指用户可以通过微信账号的方式快速登录小程序，授权登录可以让用户快速访问小程序中的某些功能，提升用户体验。接下来，将一步步为大家介绍微信小程序授权登录解决方案的代码实现过程。

控件准备

对于微信小程序的授权登录，需要用到微信提供的 button 和 open-type=getUserInfo 控件，其中 “open-type=getUserInfo” 是指获取用户授权信息，这里需要注意，在实现授权登录的时候，“open-type=getUserInfo” 必须要与控件配合使用
以下是引用 button 和 open-type=getUserInfo 控件的示例代码：

<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权登录</button>

授权登录解决方案（已通过）

授权登录解决方案需要用户主动点击 Button 控件，授权登录后获取用户信息。以下是完整的授权登录解决方案代码示例：

//1. 在 app.js 中监听全局的 getUserInfo 事件
App({
    onLaunch: function () {
        wx.getUserInfo({
            success: function (res) {
                console.log(res.userInfo)
            }
        })
    }
})

//2. 在授权登录的button的bindgetuserinfo事件中，获取用户信息
Page({
    getuserinfo: function (e) {
        console.log(e.detail.userInfo)
    }
})

在上述代码中，我们监听了全局的 “getUserInfo” 事件，当用户在小程序中授权登录后，我们使用 e.detail.userInfo 获取用户信息并输出。

未通过授权解决方案

未通过授权解决方案是指用户在拒绝授权的情况下，依然可以用某些功能。以下是未通过授权解决方案的完整代码示例：

//1. 在 app.js 中监听全局的 getUserInfo 事件
App({
    onLaunch: function () {
        // 获取用户信息
        wx.getSetting({
            success: res => {
                if (res.authSetting['scope.userInfo']) {
                    // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                    wx.getUserInfo({
                        success: res => {
                            console.log(res.userInfo)
                        }
                    })
                }
            }
        })
    }
})

// 2. 页面中某些功能调用时，判断是否获取到用户信息
Page({
    click: function () {
        if (wx.getStorageSync('login_status')) {
            console.log('已登录');
        } else {
            // 获取用户信息
            wx.getSetting({
                success: res => {
                    if (res.authSetting['scope.userInfo']) {
                        // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                        wx.getUserInfo({
                            success: res => {
                                wx.setStorageSync('login_status', true);
                                console.log(res.userInfo);
                            }
                        })
                    } else {
                        // 未授权跳转到授权页面
                        wx.navigateTo({
                            url: '/pages/auth/auth',
                        })
                    }
                }
            })
        }
    }
})

在上述代码中，我们监听了全局的“getUserInfo”事件，当用户未授权时，我们判断是否已经获取用户信息，未获取则直接跳转到授权页面。如果获取了，则标记已经登录状态，在已登录状态下可以正常调用某些功能。

以上是针对微信小程序授权登录解决方案攻略的详细讲解，希望对大家有所帮助。