[移动开发]小程序开发基础8--授权登录退出和缓存（可当做基本登录推出控件在项目中使用）

一，知识部分

1，认识wx.getUserProfile方法

对应的文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html
文档直通车

使用这个方法可以获取如下的用户信息

2. 授权登录及前端美化

2.1 授权登录

一般我的使用上面的wx.getUserProfile方法获取用户信息时，需要用户授权的。一般授权弹窗如下。

只有用户点击允许以后才可以获取用户信息。

• 授权登录核心代码
  

 wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
      }
    })

2.2 美化页面

其实这里倒是挺简单，重点知识只有一个圆形图片的实现这里只需要一个image组件和一个text组件即可。通过css的border-radius就可以来设置圆形图像了，我小程序基础里也有讲过的，核心代码如下。

3. 本地缓存的添加与删除

3.1 本地缓存的添加

使用wx.setStorageSync缓存
这里缓存我们主要用到了wx.setStorageSync 对应的官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
文档直通车

3.2 本地缓存的查看方式

3.2 本地缓存获取

使用wx.getStorageSync获取缓存
对应的官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html
文档直通车

3.用户退出登录（将缓存清空覆盖即可）

退出登录其实很简单，就实现一个点击事件就可以了

二，代码部分

• index.wxml

<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button>
<view wx:else class="root">
  <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
  <text class="nicheng">{{userInfo.nickName}}</text>
  <button bindtap="loginOut">退出登录</button>
</view>

• index.js

Page({
  data: {
    userInfo: ''
  },
  onLoad() {
    let user = wx.getStorageSync('user')
    console.log('进入小程序的index页面获取缓存', user)
    this.setData({
      userInfo: user
    })
  },
  // 授权登录
  login() {
    wx.getUserProfile({
      desc: '必须授权才可以继续使用',
      success: res => {
        let user = res.userInfo
        // 把用户信息缓存到本地
        wx.setStorageSync('user', user)
        console.log("用户信息", user)
        this.setData({
          userInfo: user
        })
      },
      fail: res => {
        console.log('授权失败', res)
      }
    })
  },
  // 退出登录
  loginOut() {
    this.setData({
      userInfo: ''
    })
    wx.setStorageSync('user', null)
  }
})

• index.wxss

.root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.touxiang {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}

问题总结：

1.如果在用户登录时报错为：“getUserProfile:fail can only be invoked by user TAP gesture.”

那么使用下面代码就可以解决（将登录界面放在app.js中的login中）

wx.showModal({
          title: '温馨提示',
          content: '亲，授权微信登录后才能正常使用小程序功能',
          success(res) {
            console.log(0)
            console.log(res)
            //如果用户点击了确定按钮
            if (res.confirm) {
              wx.getUserProfile({
                desc: '获取你的昵称、头像、地区及性别',
                success: res => {
                  console.log(res)
                  console.log(1)
                },
                fail: res => {
                  console.log(2)
                  console.log(res)
                  //拒绝授权
                  wx.showToast({
                    title: '您拒绝了请求,不能正常使用小程序',
                    icon: 'error',
                    duration: 2000
                  })
                  return
                }
              });
            } else if (res.cancel) {
              //如果用户点击了取消按钮
              console.log(3)
              wx.showToast({
                title: '您拒绝了请求,不能正常使用小程序',
                icon: 'error',
                duration: 2000
              })
              return;
            }
          }
        })