微信小程序授权登录,跳转页面后在跳回首页不用再次登录
小程序授权登录要使用wx.getUserProfile,获得用户投头像后,做一些页面跳转功能,但是如果需要再次跳转首页的话,小程序就会有回到登录前的状态,这样体验感会很差。要想不用再次登录,也不难,只需要判断userInfo是否还存有信息就可以了。举个例子:
//wxml登录页面,也作为首页
<view class="touxiang"><block wx:if="{{!hasUserInfo}}"><image bindtap="login" class="ava"></image><view class="text"><text>点击圆圈登录</text></view></block><block wx:else><image class="ava" src="{{userInfo.avatarUrl}}"></image><view class="text"><text>{{userInfo.nickName}}</text></view><button bindtap="url">跳转页面</button></block>
</view>//wxss
.ava{width: 100rpx;height: 100rpx;border: 1rpx solid black;border-radius: 50%;margin-left: 43.5%;
}
.text{text-align: center;
}
/*** 页面的初始数据*/data: {userInfo: {},hasUserInfo: false,},
/*点击后微信授权登录*/login: function (e) {var that = this// 获取用户的昵称和头像wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {that.setData({userInfo: res.userInfo,hasUserInfo: true //用于让页面判断是否登录})//这里要把用户信息保存进全局变量getApp().globalData.userInfo = res.userInfo}})},url: function () {wx.navigateTo({url: '/pages/url/url',})},
跳转后的url页面
<button bindtap="shouye">跳转回首页</button>
//就假设该页面已经过多次不同页面跳转,现从该页面直接跳转回首页登录面,
//则跳转回后首页会成未登录状态
shouye:function(){wx.navigateTo({url: '../test/test',})},
此时就可以在首页js文件的onShow()做判断,判断全局变量的userInfo是否为空
onShow() {// 如果后台userInfo信息存在,可赋值直接进入登录页面,无需再次登录获取// 获取用户globalData信息var n = getApp().globalData.userInfo// 后台不为‘’,则赋值,然后登录if (n != '' && n != null) {this.setData({userInfo: n,hasUserInfo: true,canIUseGetUserProfile: true})//为空则意味着之前没有登录,直接登录就行this.login()}},
微信小程序授权登录,跳转页面后在跳回首页不用再次登录相关推荐
- uniApp和微信小程序好看的我的页面(有源码)
uniApp和微信小程序好看的我的页面(有源码) 1.先睹为快 未登录状态 以登录 uniapp源码 <template><view class="content" ...
- 微信小程序个人中心跳转页面进行授权登录
微信小程序授权登录操作 第一步:进入页面跳到授权登录页面 第二步:点击立即授权按钮弹出授权框 1.这里会调用微信官方文档中的一个方法 2.点击允许授权获取微信头像和昵称 3.授权成功之后跳回之前的页面 ...
- 微信小程序授权登录页面(有提示窗)
微信小程序授权登录(有弹窗提示) 1 效果显示 1.1 授权登录页面 1.2 授权登录提示弹窗 1.3 拒绝授权登录 1.4 允许登录后,跳转到小程序首页 2 代码 2.1 wxml 文件 <v ...
- 微信小程序授权登录取消授权重新授权处理方法 附可用代码
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进 ...
- 新版微信小程序授权登录流程及问题汇总(getUserProfile)
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
- 微信小程序授权登录界面
微信小程序授权登录界面 原先用的 wx.getUserInfo(Object object) ,现已改革 现用的 wx.getUserProfile(Object object),获取用户信息.每次请 ...
- 微信小程序授权登录 组件的封装
微信小程序授权登录 组件的封装 新建components文件 写wxml文件 wxss部分 js部分 json引用 页面使用 页面js 授权登录 流程如下: 因为多个页面功能需要登录状态 所以做了个组 ...
- SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录 一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
- 微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号 一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
最新文章
- 计算机类和鼠标类是什么关系,常见鼠标的种类
- spring使用JUnit测试,@Autowired无法注入原因
- mysql主从位点保存时间_MySQL主从备份
- C语言标识符、关键字和注释
- java hashmap实例_java HashMap详解及实例代码
- 高斯拉普拉斯算子(Laplace of Gaussian)
- iOS应用开发最佳实践
- [Andriod设计模式之旅]——Builder模式
- nginx配置中文域名解析
- Unity(十九):获取编辑器内置样式和内置图标
- mysql修改唯一索引
- linux的命令解释器-----shell
- Docker_数据卷容器
- 【Vue3】第十四部分 父子组件传参
- 通过websocket抓取斗鱼弹幕和礼物消息
- LESS与SASS的伯与仲
- electron打开系统默认浏览器
- 创建 Time Machine 时间机器的备份至 openmediavault 5(OMV 5) NAS 的 SMB/CIFS 共享文件夹
- 个人站长之路,痛下决心换云服务器
- Word轻松粘贴代码