每日一唠叨：

  之前写了公众号H5的授权登录功能，现在新加一个小程序的授权登录，
  然而，微信的授权登录进行了调整，原本的getUserInfo()获取不到信息了，
 改为使用getUserProfile()，下面来一个完成版小程序授权登录功能。

正文开始👇

需求：微信小程序授权登录与退出。

HTML 代码

效果图与代码（授权事件不是非要button才行，image或div都是可以的）

image.png

image.png

image.png

image.png

image.png

image.png

<!-- #ifdef MP-WEIXIN -->
    <image :src="weixiLogin" @tap="getMPLoging()"></image>
<!-- #endif -->

Css就不提供了 很简单 自行定义

JS代码

创建字段

image.png

  /*
  *小程序授权登录
  **/
    //#ifdef MP-WEIXIN 
        getMPLoging(){
            let  me=this
            // 弹出授权框（每次执行都会弹出）
            uni.getUserProfile({
                 desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                 success: (res) => {
                    console.log("获取用户授权信息：",res)
                     me.userInfo=res.userInfo;
                     uni.setStorageSync('userInfo', res.userInfo);
                          if(me.userInfo){
                          // 获取code
                            uni.login({
                                 success: (res) => {
                                 console.log("打印授权成功获取的code：",res)
                                  if(res.errMsg == "login:ok"){
                                    me.userCode=res.code;
                                    // 调用登录方法
                                    me.updateUserInfo();
                                   }else{
                                        uni.showToast({title: '登录失败！',duration: 2000});
                                        console.log('登录失败！' + res.errMsg)
                                        }
                                    }
                                })
                            }
                          },
                          fail(res){
                            uni.showToast({
                                title:"拒绝授权，将无法进入小程序",
                                duration: 1000,
                                icon: 'none'
                            })
                             console.log("您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!")
                }         
             })
        },
  /*
  *小程序授权登录（更新登录数据）
  */
        updateUserInfo() {
            let me=this;
            me.access_id = uni.getStorageSync("access_id")?uni.getStorageSync("access_id"):me.$store.state.access_id;
                uni.showLoading({
                    title: '登录中...'
                });
                //接口字段根据自己的来
                let data = {
                        module: "app",
                        app: 'user',
                        action: "login",
                        code:me.userCode,
                        nickName:me.userInfo.nickName,
                        headimgurl:me.userInfo.avatarUrl,
                        sex:me.userInfo.gender, //新本授权获取不到性别，传了0给后台
                        access_id:me.access_id, //用户的access_id，如果有则是绑定，没有就新创
                        pid:'', //上级PID 
                      }
                  uni.request({
                        data,
                        url: uni.getStorageSync("url"), //后台登录接口URL
                        header: {
                            'content-type': 'application/x-www-form-urlencoded'
                        },
                        method: 'POST',
                        success:(res)=> {
                            uni.hideLoading();
                            if(res.data.code==200){
                                uni.showToast({
                                    title: res.message,
                                    duration: 1000,
                                    icon: 'none'
                                })
                                uni.setStorageSync('openid', res.data.openid);
                                uni.setStorageSync('session_key', res.data.session_key);
                                uni.switchTab({
                                    url:'../tabBar/my'
                                })
                            }else{
                                uni.hideLoading();
                                uni.showToast({
                                    title: res.message,
                                    duration: 1000,
                                    icon: 'none'
                                })
                            }
                          }
                      })
                 },

退出功能就更简单了，清空缓存的数据

<!--v-if是我判断是否授权的字段，用不上的可以不要-->
<!-- #ifdef MP-WEIXIN -->
    <div class='button margin' v-if="lktauthflag" @tap="outLogin">退出登录</div>
<!-- #endif -->
 /*
 * 小程序退出登录
 */
    outLogin(){
        uni.getStorageSync("userInfo","")
        uni.navigateTo({
            url: '../../pages/login/login?toHome=true&quit=true&isauthorizedLogin=1'
        })
    },