微信小程序 - - 授权登录退出和缓存
2024-05-10 04:34:12
授权登录退出和缓存
- 一、开发前的准备
- 二、调用方法
- 三、代码
- 1.home.wxml
- 2.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="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设置为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是新的方法，所以需要更新版本
微信小程序 - - 授权登录退出和缓存相关推荐
- 新版微信小程序授权登录流程及问题汇总（getUserProfile）
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
- 微信小程序授权登录页面（有提示窗）
微信小程序授权登录(有弹窗提示) 1 效果显示 1.1 授权登录页面 1.2 授权登录提示弹窗 1.3 拒绝授权登录 1.4 允许登录后,跳转到小程序首页 2 代码 2.1 wxml 文件 <v ...
- 微信小程序授权登录 组件的封装
微信小程序授权登录 组件的封装 新建components文件 写wxml文件 wxss部分 js部分 json引用 页面使用 页面js 授权登录 流程如下: 因为多个页面功能需要登录状态 所以做了个组 ...
- SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录 一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
- uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码 弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
- 微信小程序授权登录取消授权重新授权处理方法 附可用代码
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进 ...
- SpringCloud 微信小程序授权登录 获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起 早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...
- 微信小程序授权登录第一次总是失败，第二次登录便正常了
微信小程序授权登录第一次总是失败,第二次登录便正常了 错误流程 调用 用户点击授权用户信息按钮 ===> 调用wx.login( )生成code发送给后台生成session_key解密 ===& ...
- 微信小程序授权登录报错encryted_data或iv不合法，前端坑^-^~~
微信小程序授权登录原来用的wx.getUserInfo(),在用户未授权过的情况下调用此接口,将不再出现授权弹窗, 会直接进入 fail 回调(详见<公告>).在用户已授权的情况下调用此接 ...
最新文章
- [转]java 为什么wait(),notify(),notifyAll()必须在同步方法/代码块中调用？
- linux 编译sqlitecpp,编译安装sqlite3数据库
- 学习XHTML的强烈欲望、！
- LeetCode Super Pow(快速求幂算法)
- 浅谈协同过滤推荐算法
- linux nfsnobody用户,处理CentOS 5.5 x64 配置NFS服务过程中nfsnobody用户造成的问题
- 手机都能拍月亮了，为何我们还在怀念诺基亚？
- 使用 golang-plugins 时要避免的事情
- 方法 手写promise_实现一个符合 Promise/A+规范的 Promise（typescript 版）
- 程序员面试金典——7.5平分的直线
- sql与ORACLE链接服务器相互访问方法
- 设计模式（十一）：享元模式
- 《MYSQL必知必会》—3~9.使用MySQL、检索数据列、排序检索数据列、过滤数据(WHERE子句、组合WHERE子句、通配符、正则表达式)
- yum文件，来自网络
- 高级语言与低级语言如何定义？解释型语言和编译型语言又如何区别？
- 片上总线协议学习(1)——SiFive的TileLink与ARM系列总线的概述与对比
- Process-wide API spying - an ultimate hack 摘要翻译(一)
- Java类型转换的细节
- Qt下简单WebSocket网络聊天服务器
- 啤酒游戏的牛鞭效应之VMI策略减弱