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

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

在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.渲染啦

最后：效果如下

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