前言：由於微信官方修改了 getUserInfo、authorize 介面，無法彈出授權視窗，所以現在無法實現一進入微信小程式就彈出授權視窗，只能通過 button 去觸發

1.實現思路

微信授權登入僅適用於使用微信使用者資訊的使用者，如果自己的專案有完善的使用者資訊（一套式開發專案），可不使用微信使用者資訊；如果僅為微信小程式，則要授權、獲取使用者資訊

自己寫一個微信授權登入頁面讓使用者實現點選的功能，也就是實現了通過 button 元件去觸發 getUserInof 介面。在使用者進入微
信小程式的時候，判斷使用者是否授權了，如果沒有授權的話就顯示下面“介面簡介”的第一個圖，讓使用者去執行授權的操作。如
果已經授權了，則直接跳過這個頁面，進入首頁。

2.介面簡介

3.原始碼

authorize.html

<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.json

{
    "navigationBarTitleText": "授權登入"
}

authorize.js

const app = getApp();
Page({
    data: {
        //判斷小程式的API，回撥，引數，元件等是否在當前版本可用。
        canIUse: wx.canIUse('button.open-type.getUserInfo')
    },
    onLoad: function () {
        var that = this;
        // 檢視是否授權
        wx.getSetting({
            success: function (res) {
                if (res.authSetting['scope.userInfo']) {
                    wx.getUserInfo({
                        success: function (res) {
                            //從資料庫獲取使用者資訊
                            that.queryUsreInfo();
                            //使用者已經授權過
                            wx.switchTab({
                                url: '/pages/index/index'
                            })
                        }
                    });
                }
            }
        })
    },
    bindGetUserInfo: function (e) {
        if (e.detail.userInfo) {
            //使用者按了允許授權按鈕
            var that = this;
            //插入登入的使用者的相關資訊到資料庫
            wx.request({
                url: app.globalData.urlPath + 'user/add',
                data: {
                    openid: getApp().globalData.openid,
                    nickName: e.detail.userInfo.nickName,
                    avatarUrl: e.detail.userInfo.avatarUrl,
                    province:e.detail.userInfo.province,
                    city: e.detail.userInfo.city
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    //從資料庫獲取使用者資訊
                    that.queryUsreInfo();
                    console.log("插入小程式登入使用者資訊成功！");
                }
            });
            //授權成功後，跳轉進入小程式首頁
            wx.switchTab({
                url: '/pages/index/index'  
            })
        } else {
            //使用者按了拒絕按鈕
            wx.showModal({
                title:'警告',
                content:'您點選了拒絕授權，將無法進入小程式，請授權之後再進入!!!',
                showCancel:false,
                confirmText:'返回授權',
                success:function(res){
                    if (res.confirm) {
                        console.log('使用者點選了“返回授權”')
                    } 
                }
            })
        }
    },
    //獲取使用者資訊介面
    queryUsreInfo: function () {
        wx.request({
            url: app.globalData.urlPath + 'user/userInfo',
            data: {
                openid: app.globalData.openid
            },
            header: {
                'content-type': 'application/json'
            },
            success: function (res) {
                console.log(res.data);
                getApp().globalData.userInfo = res.data;
            }
        })；
    },

})

拓展

安利一下，微信小程式什麼情況下需要授權：

授權程式碼：

注意：wx.authorize({scope: “scope.userInfo”})，無法彈出授權視窗，請使用 <button open-type="getUserInfo"></button>

wx.getSetting({
    success(res) {
        if (!res.authSetting['scope.record']) {
            wx.authorize({
                scope: 'scope.record',
                success() {
                    // 使用者已經同意小程式使用錄音功能，後續呼叫 wx.startRecord 介面不會彈窗詢問
                    wx.startRecord()
                }
            })
        }
    }
})

如果此篇部落格對您或者您的朋友有幫助，請予以收藏或者轉發，感謝您的檢視，始終信仰：每一次分享都會幫助一些採坑中的道友，愛分享，能讓道友時候踩一個坑是我們的幸福，
如果有什麼不對的地方，請於評論區提示，及時發現問題解決問題會讓我們進步更快，謝謝
參考文章地址：https://blog.csdn.net/weidong_y/article/details/79636386