1.授權按鈕：

<view>
   <button class='login-btn' type='primary' @click="bindGetUserInfo"> 授權登入 </button>
</view>

2.事件方法：

<script>
    export default {
        data() {
            return {

                nickName: null, //暱稱
                avatarUrl: null, //頭像
                isCanUse: uni.getStorageSync('isCanUse') || true
 
, //預設為true
                userInfo: {},
                canIUse: uni.canIUse('button.open-type.getUserInfo'),
                canIGetUserProfile: false,
                detail: {},
                openid: null,
                gender: null,
                city: null,
                province: null,
                country: 
 
null,
                session_key: null,
                unionid: null,



            }
        },
        onLoad() { //預設載入
            var _this = this;
            //console.log(uni.getUserProfile);
            if (uni.getUserProfile) {
                this.canIGetUserProfile = true;
            }
            
 
// console.log(this.canIGetUserProfile)
            //判斷若是版本不支援新版則採用舊版登入方式
            //檢視是否授權
            if (!this.canIGetUserProfile) {
                uni.getSetting({
                    success: function(res) {
                        if (res.authSetting['scope.userInfo']) {
                            uni.getUserInfo({
                                provider: 'weixin',
                                success: function(res) {
                                    // console.log(res);
                                    _this.userInfo = res.userInfo;
                                    try {
                                        uni.setStorageSync('isCanUse', false);
                                        _this.login();
                                    } catch (e) {}
                                },
                                fail(res) {}
                            });
                        } else {
                            // 使用者沒有授權
                            console.log('使用者還沒有授權');
                        }
                    }
                });
            }

        },
        methods: {
            //第一次授權
            bindGetUserInfo(e) {
                var _this = this;
                if (this.canIGetUserProfile) {
                    //新版登入方式
                    uni.getUserProfile({
                        desc: '登入',
                        success: (res) => {
                            _this.userInfo = res.userInfo;
                            try {
                                _this.login();
                            } catch (e) {}
                        },
                        fail: (res) => {
                            console.log('使用者還沒有授權');
                        }
                    });
                } else {
                    if (e.detail.userInfo) {
                        _this.userInfo = e.detail.userInfo;
                        try {
                            _this.login();
                        } catch (e) {}
                    } else {
                        console.log('使用者拒絕了授權');
                        //使用者按了拒絕按鈕
                    }
                }
            },
            //登入
            login() {
                let _this = this;
                // 獲取登入使用者code
                uni.getProvider({
                    service: 'oauth',
                    success: function(res) {
                        if (~res.provider.indexOf('weixin')) {
                            uni.login({
                                provider: 'weixin',
                                success: function(res) {
                                    // console.log(res);
                                    if (res.code) {
                                        let code = res.code;
                                        uni.request({
                                            url: 'https://api.wyzdjg.top/userinfo',
                                            data: {
                                                code: code,
                                            }, 
                                            method: 'GET',
                                            header: {
                                                'content-type': 'application/json'
                                            },
                                            success: (res2) => {
                                                console.log(res2);
                                                console.log(123)
                                                _this.detail = res2.data.data;
                                                _this.updateUserInfo();
                                                uni.hideLoading();
                                            }
                                        });
                                        //將使用者登入code傳遞到後臺置換使用者SessionKey、OpenId等資訊
                                        //...寫用code置換SessionKey、OpenId的介面
                                        //置換成功呼叫登入方法_this.updateUserInfo();
                                    } else {
                                        uni.showToast({
                                            title: '登入失敗！',
                                            duration: 2000
                                        });
                                    }
                                },
                            });
                        } else {
                            uni.showToast({
                                title: '請先安裝微信或升級版本',
                                icon: "none"
                            });
                        }
                    }
                    // 
                });
            },
            //向後臺更新資訊
            updateUserInfo() {
                let _this = this;
                // console.log(_this);
                uni.request({
                    url: 'https://api.wyzdjg.top/updateinfo', //伺服器端地址
                    data: {
                        openid: _this.detail.openid,
                        nickname: _this.userInfo.nickName,
                        avatarUrl: _this.userInfo.avatarUrl,
                        gender: _this.userInfo.gender,
                        city: _this.userInfo.city,
                        province: _this.userInfo.province,
                        country: _this.userInfo.country,
                        session_key: _this.detail.session_key,
                        unionid: _this.detail.unionid,
                    },
                    method: 'POST',
                    header: {
                        'content-type': 'application/json'
                    },
                    success: (res) => {
                        console.log(res)
                        if (res.data.code == 200) {
                            uni.reLaunch({ //資訊更新成功後跳轉到小程式首頁
                                // url: '/pages/index/index'
                            });
                        }
                    }

                });
            }
        },

    }
</script>