微信小程序授权登录页面（有提示窗）

微信小程序授权登录（有弹窗提示）

1 效果显示

1.1 授权登录页面

1.2 授权登录提示弹窗

1.3 拒绝授权登录

1.4 允许登录后，跳转到小程序首页

2 代码

2.1 wxml 文件

<view class='header'>
  <image src="{{userInfo.avatarUrl}}"></image><!-- 用户头像 -->
</view>
<view>
   <button class="bottom" bindtap="getUI"type='primary'>授权登录</button><!-- 授权登录按钮 -->
</view>
<!-- type='primary' 默认按钮为蓝色 --><!-- 授权登录 为按钮内容 -->

2.2 wxss 文件

/* pages/userInfo/userInfo.wxss */
.header {/*样式文件配置 */
  margin: 90rpx 0 90rpx 50rpx;/*margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写 */
  border-bottom: 1px solid rgb(11, 165, 88);/* border-bottom 简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与 border-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。 */
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
  margin-top: 120px;
 }
 .header image {
  width: 185rpx;
  height: 185rpx;
  border-radius: 50%;/* 图片圆角为50 */
  margin-right: 20rpx;
  background-color: #f8f8f8;
 }
.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
 }

2.3 js 文件

Page({
  data: {
    avatarUrl: './user-unlogin.png', // 未登录时的状态图片
    userInfo: {}, // 存储用户信息列表
    hasUserInfo: false,
    logged: false,
    takeSession: false,
    requestResult: '', // 请求结果
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') // 如需尝试获取用户信息可改为false
  },

  onLoad: function () {}, //页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
  getUI(e) { //点击授权登录时产生的监听事件
    var t = this // 定义 变量 t var 可以定义全局变量 let 定义局部变量
    console.log('获取头像昵称', e) // console.log 打印输出
    wx.getUserProfile({ //获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo,用于替换 wx.getUserInfo
      lang: 'zh_CN', //显示用户信息的语言
      desc: '用于在后台更好的识别您的身份', //声明获取用户个人信息后的用途
      success(res) { //接口调用成功的回调函数
        console.log('获取', res)
        wx.setStorageSync('userInfo', res.userInfo); // userInfo 本地缓存指定的 key  res.userInfo 需要存储的数据
        // wx.setStorageSync('userInfo', res.userInfo); 第一个参数为本地缓存指定的 key 
        // 第二个参数为 res.userInfo 为要需要存储的数据信息 这里要把 res.userInfo 获取到的用户信息列表，存储在userInfo 列表里面
        t.setData({ //对 userInfo 进行数据更改，赋值
            userInfo: res.userInfo, //把获取到的数据列表赋值给 userInfo 改变里面的数据
            avatarUrl: res.userInfo.avatarUrl //把头像地址赋值给 avatarUrl
          }),
          wx.switchTab({ //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 就是首页  
            //用户授权成功后就要跳转到首页导航栏
            url: "/pages/index/index",
          }); // 进入到首页后，出现消息提示窗，提示用户:'欢迎使用本小程序'的提示语
        wx.showToast({ //显示消息提示框
          image: "/static/image/success.png", //自定义图标的本地路径，image 的优先级高于 icon
          icon: "success", //显示成功图标，此时 title 文本最多显示 7 个汉字长度
          title: '欢迎使用本小程序',
          duration: 1000, //提示的延迟时间 为1s 1000ms=1s
        });
      },
      fail(err) { //接口调用失败的回调函数 用户拒绝授权登录后，出现的提示窗
        console.error(err) //打印输出错误数据
        console.error("123")
        wx.showToast({ // 拒绝登录 显示消息提示框 
          image: "/static/image/error.png",
          title: '用户拒绝授权', // 提示用户：'用户拒绝授权'
          icon: "error",
          duration: 1000 // 提示语出现时间延迟1s
        });
      }
    })
  },
  onShow() { //页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数
    this.setData({
      userInfo: wx.getStorageSync('userInfo') // 更新存储里面的 key ：userInfo
    })
  },
  getUserProfile() {
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({// 更新数据和给字段赋值
          avatarUrl: res.userInfo.avatarUrl,// 更新用户图像列表
          userInfo: res.userInfo,// 更新用户列表列表信息
          hasUserInfo: true,
        })
      }
    })
  },

  onGetUserInfo: function (e) {
    if (!this.data.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo,
        hasUserInfo: true,
      })
    }
  },
})

不足之处还望指教!