微信小程序 - - 授权登录退出和缓存

一、开发前的准备

• 将colorui-master解压，这里使用的是其中的demo部分(下载colorui-master的zip)
  

二、调用方法

• wx.getUserProfile：授权登录，并获取用户信息
• wx.setStorageSync(string key, any data)：设置缓存
• wx.getStorageSync(string key)：取缓存

三、代码

1.home.wxml

<scroll-view scroll-y class="scrollPage">
  <view class="UCenter-bg">
    <!-- 未登录时显示内容 -->
    <view class="padding flex flex-wrap justify-between align-center bg-gray" wx:if="{{noLogin}}">
      <image src="{{avatarUrl}}" class="png" mode="widthFix" style="width: 130rpx; height: 130rpx;background-color:white;border-radius: 100rpx;position: absolute;left: 50rpx; top: 160rpx;"></image>
      <button class="cu-btn bg-green lg" style="position: absolute; left: 220rpx;top: 185rpx;" bindtap="login">登录</button>
    </view>
    <!-- 登录时显示内容 -->
    <view wx:if="{{!noLogin}}">
      <image src="{{avatarUrl}}" class="png" mode="widthFix" style="width: 130rpx; height: 130rpx;background-color:white;border-radius: 100rpx;position: absolute;left: 50rpx; top: 160rpx;"></image>
      <text style="font-size:14px;color: black;position: absolute; bottom: 120rpx;left: 210rpx;">{{nickName}}</text>
      <br/>
      <text style="font-size:14px;color: gray;position: absolute; bottom: 70rpx;left: 210rpx;">欢迎您来到云上挂号厅</text>
    </view>
    <!-- <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
  </view>
  <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
    <view class="cu-item arrow" bindtap="logout">
      <navigator class="content" hover-class="none">
        <text class="cuIcon-creativefill text-orange"></text>
        <text class="text-grey">退出登录</text>
      </navigator>
    </view>
  </view>
</scroll-view>

2.home.js

Component({
  options: {
    addGlobalClass: true,
  },
  data: {
    nickName:'',    //获取的微信用户名
    avatarUrl:'../../../images/tabbar/about.png',   //获取微信用户头像
    noLogin:true,   //用户是否登录（true为未登录）
  },
  ready(){
    //在页面加载时获取本地缓存中的user用户信息，如果有的话就是之前登录过，直接将缓存拿过来，无须再登录
    let getNickName=wx.getStorageSync('nickName')    //获取缓存用户名
    if(getNickName==''){        //如果缓存用户名为空字符串，代表还未登录，就将noLogin设置为true
      wx.setStorageSync('noLogin',true)
    }
    let getAvatarUrl='';      //获取缓存用户头像
    if(wx.getStorageSync('avatarUrl')!=''){     //如果用户头像有值，代表登录过，将值取出来
      getAvatarUrl=wx.getStorageSync('avatarUrl')
    }else{
      getAvatarUrl='../../../images/tabbar/about.png';     //否则使用原始图像，为colorui-master下自带的图像
    }
    let newnoLogin=true;
    //代表当前状态为未登录
    if(wx.getStorageSync('noLogin')==true){
      newnoLogin=true;
    }else{   //代表当前状态为登录
      newnoLogin=false;
    }
    //将获取到的用户信息回显到页面
    this.setData({
      nickName:getNickName,
      avatarUrl:getAvatarUrl,
      noLogin:newnoLogin,
    })
  },
  methods: {
    //登录
    login(e){
      wx.getUserProfile({
        desc: '必须授权才可以继续登录',
        //使用箭头函数就不需要将this改成that了
        success:res => {
          //setData做数据的动态绑定
          let user=res.userInfo;
          //拼接用户头像的链接
          let avatarUrlSub = user.avatarUrl.substring(0, 8)+res.userInfo.avatarUrl.substring(13, res.userInfo.avatarUrl.length - 3)+'0';
          // console.log("用户头像",avatarUrlSub) 
          user.avatarUrl=avatarUrlSub;
          //将用户信息缓存到本地，再在onLoad方法中将其加载出来
          wx.setStorageSync('nickName', user.nickName)
          wx.setStorageSync('avatarUrl', user.avatarUrl)
          wx.setStorageSync('noLogin', false)
          this.setData({   
            nickName:user.nickName,
            avatarUrl:user.avatarUrl,
            noLogin:false,
          })
        },
        fail:res => {
          console.log("授权失败",res)
        }
      })
    },
    //登出
    logout(e){
      this.setData({   
        nickName:'',
        avatarUrl:'../../../images/tabbar/about.png',
        noLogin:true,
      })
      //将用户信息置空（清空缓存）
      wx.setStorageSync('nickName', '')
      wx.setStorageSync('avatarUrl', '')
      wx.setStorageSync('noLogin', true)
    }
  }
})

四、遇到的问题

• 报错：TypeError: wx.getUserProfile is not a function
  由于微信官方文档更新较快，getUserProfile是新的方法，所以需要更新版本