授权登录退出和缓存
一、开发前的准备二、调用方法三、代码1.home.wxml2.home.js 四、遇到的问题一、开发前的准备
将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="/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设置为truewx.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是新的方法，所以需要更新版本
