微信小程序登录----以及返回上一页刷新或当前页刷新

演示视频：

微信登录以及返回上一级刷新

====== 不废话接下来直接上代码 ======

一：微信小程序登录以及保存用户信息

1.来自【获取用户信息接口】JSON格式的原始数据

{
    avatar: "https://example.com/avatar/default_avatar.png"
    beans: 0
    expire_time: ""
    inviteCode: "NQKBXK"
    level: 2
    levelName: "黑卡会员"
    nickname: "胡"
    status: "未充值"
    tel: ""
}

2.微信小程序登录，以及保存用户信息

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 检查登录状态 【再次说明放onLaunch好处：确保整个小程序的登录状态是统一的】
    this.checkLogin();

  },
  // 检查登陆状态
  checkLogin(){
    const token = wx.getStorageSync('userToken')
    if(token){
      // 已登录，获取用户信息
      this.getUserInfo();
    }else{
      // 未登录，执行登录流程
      this.login();
    }
  },

  // 未登录，登录流程
  login(){
    /*
    * [此登录为]开发者服务器返回的自定义登录状态，内含登录状态的Token用于后续业务逻辑中前后端交互时识别用户身份。
    */
    // 登录
    wx.login({
      success: res => {
        console.log('最新的code：',res.code)
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if(res.code){
          wx.request({
            url: '用于微信登录的接口',
            method:'POST',
            data:{
              code:res.code
            },
            success:res => {
              console.log('【微信登陆】传来的数据：',res)
              if(res.data.code == 0){
                wx.setStorageSync('userToken', res.data.data)
                this.getUserInfo()
              }
            },
            fail: err => {
              console.log(err)
            }
          })
        }
      }
    })
  },
  // 已登录，获取用户信息
  getUserInfo(){
    const userToken = wx.getStorageSync('userToken')
    // console.log('处于已登录状态')
    wx.request({
      url: '用于获取用户信息接口',
      method:'POST',
      header:{ userToken },
      success: res => {
        // console.log('请求【获取用户信息】成功',res.data)
        if(res.data.code == 0){
          // (此用户获取后实例是{},导致取值每次应为this.app.globalData.userInfo?.avatar)较为麻烦
          // 在此处将{},转为[{}]这样话方便用wx:for取值
          const userInfoObj = res.data.data
          const userInfoArr = [userInfoObj]
          this.globalData.userInfo = userInfoArr
        }else{
          console.log('失败或未登录')
          // 先清除userToken
          wx.removeStorageSync('userToken')
          // 再次调用
          this.login()
        }
      },
      fail:err =>{
        console.log('获取用户信息实例出错具体原因：',err)
      }
    })
  },
  globalData: {
    // 此存储可在任何页面和组件中进行调用
     /*
      一：页面调用方式：
      1.js的onLoad中获取 app实例
        this.app = getApp()
      2.js的onReady中页面初次加载时访问用户信息，避免渲染失效结果为空
        方式一：
        this.setData({
          userInfo: this.app.globalData.userInfo
        )}
        方式二：
          const userInfo = this.app.globalData.userInfo 【这样之后记得循环挨个取值】
      3.在wxml页面中使用
        {{app.globalData.userInfo.avatarUrl}}

      二：组件调用方式：
      1.在lifetimes获取并访问
        ready(){
           // 获取 app 实例
           this.app = getApp();
           // 访问 globalData 中的用户信息
           const userInfo = this.app.globalData.userInfo;
        }
    */
    userInfo: null
  }
})

二：返回上一页刷新或当前页刷新（这里以昵称为例）

1. 二级页面定义

①二级页面wxml

<!--pages/options/mianMy_personalData/mianMy_personalData.wxml-->
<view wx:for="{{userInfo}}" wx:key="index">
    <input class="box_title" type="nickname" placeholder="请输入昵称" value="{{item.nickname == null ? '' : item.nickname}}" bind:change="inputNameChange"/>
</view>

②二级微信页面js 第一步：（进入页面首次加载，主要用于wx:for循环取值页面渲染）

// pages/options/mianMy_personalData/mianMy_personalData.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 定义从app.js中获取的用户信息
    userInfo:null
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取app实例
    this.app = getApp()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 获取用户信息实例
    console.log('看值',this.app.globalData.userInfo)
    if(this.app.globalData.userInfo){
      this.setData({
        userInfo: this.app.globalData.userInfo
      })
    }else{
      // console.log('看值-不存在啊这..')
      // 如果 this.app.globalData.userInfo 不存在,调用 this.app.checkLogin()更新用户数据
      this.app.checkLogin();
    }
  },

})

③二级微信页面js 第二步：（昵称修改，注意里边的重点【this.app.getUserInfo()】附有详细解释）

// 获取用户昵称并修改
  inputNameChange(e){
    const userToken = wx.getStorageSync('userToken')
    const nickname = e.detail.value
    console.log(nickname)
    if(userToken){
      wx.request({
        url: '用于昵称修改的接口',
        method:'POST',
        header:{ userToken },
        data:{
          nickname:nickname
        },
        success: res => {
          if(res.data.code == 0){
            wx.showToast({
              title: '昵称修改成功',
              icon:'success',
              duration:500
            })
            // 更新 app.globalData.userInfo
            /*
             ===【此步是精华，重中之重（用于上级页面同步刷新） 具体解释也在下面】===
              1.在修改成功后,调用 this.app.getUserInfo() 方法更新全局即app.js中的 app.globalData.userInfo
              2.同时如果在上级页面的onShow中调用this.getUserInfo()方法重新获取最新的用户信息，可确保 mainMy 页面也能及时显示最新的用户信息。  
             ===【至此，当你在 mainMy_personalData 页面更新用户昵称后,返回 mainMy 页面时,页面上的用户昵称也会同步更新。】===
            */
            this.app.getUserInfo();
          }
          console.log('请求成功的参数',res)
        },
        fail:err => {
          console.log(err)
        }
      })
    }
  },

④ 完整的二级页面js

// pages/options/mianMy_personalData/mianMy_personalData.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 定义从app.js中获取的用户信息
    userInfo:null
  },

  // 获取用户昵称并修改
  inputNameChange(e){
    const userToken = wx.getStorageSync('userToken')
    const nickname = e.detail.value
    console.log(nickname)
    if(userToken){
      wx.request({
        url: '用于昵称修改的接口',
        method:'POST',
        header:{ userToken },
        data:{
          nickname:nickname
        },
        success: res => {
          if(res.data.code == 0){
            wx.showToast({
              title: '昵称修改成功',
              icon:'success',
              duration:500
            })
            // 更新 app.globalData.userInfo
            /*
             ===【此步是精华，重中之重（用于上级页面同步刷新） 具体解释也在下面】===
              1.在修改成功后,调用 this.app.getUserInfo() 方法更新全局即app.js中的 app.globalData.userInfo
              2.同时如果在上级页面的onShow中调用this.getUserInfo()方法重新获取最新的用户信息，可确保 mainMy 页面也能及时显示最新的用户信息。  
             ===【至此，当你在 mainMy_personalData 页面更新用户昵称后,返回 mainMy 页面时,页面上的用户昵称也会同步更新。】===
            */
            this.app.getUserInfo();
          }
          console.log('请求成功的参数',res)
        },
        fail:err => {
          console.log(err)
        }
      })
    }
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取app实例
    this.app = getApp()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 获取用户信息实例
    console.log('看值',this.app.globalData.userInfo)
    if(this.app.globalData.userInfo){
      this.setData({
        userInfo: this.app.globalData.userInfo
      })
    }else{
      // console.log('看值-不存在啊这..')
      // 如果 this.app.globalData.userInfo 不存在,调用 this.app.checkLogin()更新用户数据
      this.app.checkLogin();
    }
  },

})

2.一级页面定义 【同步更新数据堪比无感刷新】

①一级页面wxml

<!--pages/mainMy/mainMy.wxml-->
<view wx:for="{{userInfo}}" wx:key="index"> 
    <text class="wcTextOne">{{item.nickname == null ? 'null' : item.nickname}}</text>
</view>

②一级微信页面js （对同二级页面修改后的昵称产生同步更新）

// pages/mainMy/mainMy.js
Page({

  /**
   * 页面的初始数据
   */
  data: {   
    // 定义从app.js中获取的用户信息
    userInfo:null
  },
  
  // 获取最新的用户信息（变更时同步更改：此代码重在确保页面能够始终获取到最新的用户信息。）
  getUserInfo() {
    if (this.app.globalData.userInfo) {
      this.setData({
        userInfo: this.app.globalData.userInfo
      });
    } else {
      this.app.checkLogin();
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取app实例
    this.app = getApp()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 解决由mainMy_personalData数据修改更新后，返回上一级页面也就是本页mainMy,数据无法同步问题
    this.getUserInfo()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})