微信小程序——授权登录（是否受过权都会弹出授权按钮但是不会弹出微信官方调用用户信息的弹窗）

1、home.wxml

<view class="main">
    <dialog title="微信授权登录" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm">
    </dialog>
</view>

2、home.json

"usingComponents": {
        "dialog":"../../../components/dialog/dialog"

    }

3、home.js

注意逻辑——wx.login获取code；将code和appid一起传给后台；受过权后台返回token等用户信息否则返回openid，再利用wx.getUserProfile获取用户信息，并把用户信息和openid传给后台获取token

 data: {
        userInfo: {},
        status: false,//弹窗
        code: '',
        openId: '',
        token: '',
        parameter:{},//all页面数据
        dataList:[]//页面数据
    },
onLoad(options) {
        var that = this;
        //弹窗是否展示
        if (this.data.userInfo) {
            this.setData({
                status: true
            })
        }
        wx.login({
            success: res => {
                // 获取到用户的 code 之后：res.code
                if (res.code) { //当有临时登录凭证code码时，我们请求登录接口
                    this.setData({
                        code: res.code
                    })
                } else {
                    console.log('登录失败！' + res.errMsg)
                }
            }
        });
    },
    // 获取到用户的信息
    getProfile() {
        wx.getUserProfile({
            desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {
                this.setData({
                    userInfo: res.userInfo,
                    status: false
                })
            }
        });
    },
// 弹窗-取消按钮
    handlecancel() {
        this.setData({
            status: false
        })
    },
//确定按钮
    handleConfirm() {
        this.setData({
            status: false
        })

      //   授权登录——这里是后台接口
        api.authPath({
            code: this.data.code
        }).then((res) => {
            if (res.data.code == 100) {
                //受过权
                this.data.userInfo.nickName = res.data.info.realName
                this.data.userInfo.avatarUrl = res.data.info.headPortrait
                this.data.token = res.data.info.haircutxcx_token
                //存储用户信息和token
                wx.setStorageSync("userInfo", this.data.userInfo);
                wx.setStorageSync("Token", res.data.info.haircutxcx_token);
                
            } else if (res.data.code == 200) {
                //没受过权
                this.data.openId = res.data.msg
                console.log(this.data.openId)
                console.log(this.data.userInfo)
                wx.getUserProfile({
                    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                    success: (res) => {
                        console.log('res', res)
                        // wx.setStorageSync("userInfo", res.userInfo);
                        this.setData({
                            userInfo: res.userInfo,
                            status: false
                        })

                //注册——这里是后台接口
                        api.registeredPath({
                            openid: this.data.openId,
                            realName: this.data.userInfo.nickName,
                            headPortrait: this.data.userInfo.avatarUrl,
                        }).then((res) => {
                            this.data.token = res.data.info.haircut_tokenxcx
                            wx.setStorageSync("Token", res.data.info.haircut_tokenxcx);
                        })
                    }
                });
            }
            //获取页面数据（可不写）
            this.getBannerData()
        })
    },

4、dialog.wxml

<view class="mask" wx:if="{{status}}">
      <view class="dialog">
            <view class="dialog-header">{{title}}</view>
            <view class="dialog-footer">
            <!--       <view class="dialog-btn" bindtap='handleCancel'>取消</view> -->
                  <view class="dialog-btn" bindtap='handleConfirm'>确认</view>
                </view>
          </view>
</view>

5、dialog.wxss

/* components/dialog/dialog.wxss */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog {
    width: 600rpx;
    height: auto;
    background: #fff;
    border-radius: 30rpx;
}

.dialog-header {
    /* padding: 20rpx 0; */
    text-align: center;
    font-size: 36rpx;
font-weight: bold;
}

.dialog-footer {
    display: flex;
}

.dialog-btn {
    flex: 1;
    text-align: center;
    padding: 10rpx 0;
    /* border-top: 1rpx solid #eee; */
}

.dialog-btn:first-child {
    background-color: rgb(255, 0, 0);
    color: #fff;
    border-radius: 4%;
    /* border-right: 1rpx solid #eee; */
}

.dialog-body {
    /* padding: 30rpx; */
}


.content {
    text-indent: 72rpx;
    color: #333;
}

/* .dialog-body image {
    width: 100%;

} */

6\dialog.js

// components/dialog/dialog.js
var api = require("../../request/api")
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        title: {
            type: String,
            value: "标题"
        },
        content: String,
        status: {
            type: Boolean,
            value: false,
        }

    },

    /**
     * 组件的初始数据
     */
    data: {
      
    },

    /**
     * 组件的方法列表
     */
    methods: {
        handleCancel() {
            this.triggerEvent("cancel")
        },
        handleConfirm() {

            this.triggerEvent('confirm')

        },
    }
})