微信小程序个人中心跳转页面进行授权登录

微信小程序授权登录操作

第一步：进入页面跳到授权登录页面
第二步：点击立即授权按钮弹出授权框
- 1.这里会调用微信官方文档中的一个方法
- 2.点击允许授权获取微信头像和昵称
- 3.授权成功之后跳回之前的页面
第三步：将数据渲染到个人中心
- 1.在拿到数据的那里进行数据渲染，我这里是将数据存到本地存储，然后在个人中心页面取出
- 2.个人中心页面取出
- 3.定义一个userInfoData进行赋值
- 4.渲染啦
最后：效果如下
想要源码的点这里就可以啦~

第一步：进入页面跳到授权登录页面

在onshow中进行判断是否需要跳转授权页面，第三步有详细解释；

 onShow() {let a = wx.getStorageSync("userInfoData");console.log('===========>>>>>>>>>>',Boolean(a))if (!a) {wepy.navigateTo({url: "./authorization"});}}

这里是页面的代码；

<template><scroll-view scroll-y class="container authorization"><view class="box"><view><text class="title">需要您的授权\n\n</text><text class="msg">为了更好的提供服务\n</text><text class="msg">请在稍后的提示框中点击“允许”\n</text></view><image mode="widthFix" src="http://qiniu.fakaonline.cn/auth.png"></image><!-- <view @tap="authBtn">立即授权</view> --><button class="authBtn" open-type="getUserInfo" @tap="loginWepy">立即授权</button><button class="backBtn" @tap="back()">暂不授权</button></view></scroll-view>
</template>

第二步：点击立即授权按钮弹出授权框

1.这里会调用微信官方文档中的一个方法

一定要通过按钮点击才可以哦~

 wx.getUserProfile({})

微信开发者文档 wx.getUserProfile详细介绍

2.点击允许授权获取微信头像和昵称

//这个方法是点击立即授权的按钮触发的；
loginWepy() {wx.getUserProfile({lang: "zh_CN",desc: "获取你的昵称、头像、地区及性别",success: res => {//res.userInfo就是一些信息，在这里进行渲染//在这里进行你需要的操作，比如拿昵称、头像、性别wx.showToast({title: "授权成功",icon: "none"});setTimeout(() => {wx.navigateBack({//登陆完返回delta: 1});}, 1000);resolve(res);},// 失败回调fail: err => {reject(err);}});},

这里就是我授权成功拿到的信息了；

3.授权成功之后跳回之前的页面

     setTimeout(() => {wx.navigateBack({//跳回前一页delta: 1});}, 1000);

第三步：将数据渲染到个人中心

1.在拿到数据的那里进行数据渲染，我这里是将数据存到本地存储，然后在个人中心页面取出

2.个人中心页面取出

我是在onshow中取出，然后也是从这里判断是否跳到授权界面的；
onshow是每次进入这个页面都会进入的一个方法；
我这里的判断的意思是，当本地存储有我的个人信息就不用跳授权了，如果本地存储没有我的个人信息就要跳到授权登录的页面然后进行授权登录操作；

onShow() {let a = wx.getStorageSync("userInfoData");console.log('===========>>>>>>>>>>',Boolean(a))if (!a) {wepy.navigateTo({//这个页面就是授权登录的页面url: "./authorization"});}//这一步就是把本地存储拿到的值，赋值给当前个人中心的页面this.userInfoData = wx.getStorageSync("userInfoData");}

下面就是本地存储的数据啦；

3.定义一个userInfoData进行赋值

4.渲染啦

最后：效果如下

想要源码的点这里就可以啦~

微信小程序个人中心跳转页面进行授权登录相关推荐

vue+uni-app商城实战 | 第一篇：从0到1快捷开发一个商城微信小程序，无缝接入OAuth2实现一键授权登录
一. 前言本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案参考文章: (1)微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案 (2)https://www. ...
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
uniApp和微信小程序好看的我的页面（有源码）
uniApp和微信小程序好看的我的页面(有源码) 1.先睹为快未登录状态以登录 uniapp源码 <template><view class="content" ...
微信小程序中使用全局变量解决页面的传值问题
微信小程序中使用全局变量解决页面的传值问题由于项目需要,最近便在做一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变 ...
关于微信小程序“南安明朗教育”活动页面错误问题记录
关于微信小程序"南安明朗教育"活动页面错误问题记录关于微信小程序"南安明朗教育"活动页面错误问题记录你好! 这是一遍关于南安明朗教育的微信小程序问题解决的日 ...
微信小程序云开发如何将页面生成为pdf?
项目场景: 最近有小伙伴问了一个问题,那就是微信小程序云开发如何将页面生成为pdf?但是在没有后端工程师的协助下,我们要怎么办了? 解决方案: 于是便逛了一下微信社区,但很遗憾腾讯baba没有给出相应 ...
自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...
微信小程序客服会话发送页面卡片
微信小程序客服会话发送页面卡片,这个腾讯在按钮里面已经封装好了,我们直接拿过来用就行了. 首先设置open-type="contact" 我们看下官方文档官方文档.png 常用的 ...