（十四）登陆注册 逻辑二 前端globalData的使用 和 Storage

                   

我们在点击登录的时候  成功之后跳转到home

 一 在全局的app.js里会有一个 globalData

因为还有其他页面也要使用 共有的数据 所有用到  globalData

App({
  globalData: {
    phone: null
  }
})

二 登录页面

要通过 var app =getApp();来使用

var app = getApp(); 
pages({
    onClickSubmit:function(){
      wx.request({
      url: 'http://127.0.0.1:8000/api/login/',
      data: { phone: this.data.phone, code:this.data.code },
      method: 'POST',
      success: function (res) {
        if (res.data.status) {
          // 登陆成功 跳转home页面
          app.globalData.phone = res.data.data.phone
          wx.navigateBack({})
        } else {
          // 发送失败
          wx.showToast({
            title: '登陆失败',
            icon: 'none',
          })
        }
      },
    })
  },
})

成功之后 我们要跳转到home页面

三 home页面

前端 wxml

      <view class="name" wx:if="{{phone}}">
        <view>{{phone}}</view>
      </view>
      <view class="name" wx:else="{{phone}}">　　　　　　　　　　　　　　　　# 进行一个判断
          <navigator url="/pages/auth/auth">登录</navigator>
          |
          <navigator url="/pages/auth/auth">注册</navigator>
      </view>

js代码

var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  　　　　　　　　　　　　　　　　　　　　　　　　# onLoad和onReady 只有在第一次加载的时候才管用，每次都管用的是 onShow
  /**
   * 生命周期函数--监听页面初次渲染完成  
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      phone:app.globalData.phone
    })
  },
}）

 四 storage的使用

我们在使用全局的globalData的时候  在每次重启的时候 数据就会消失，这样的话 我们就要用到 storage

登陆页面

var app = getApp(); 
pages({
    onClickSubmit:function(){
      wx.request({
      url: 'http://127.0.0.1:8000/api/login/',
      data: { phone: this.data.phone, code:this.data.code },
      method: 'POST',
      success: function (res) {
        if (res.data.status) {
          // 登陆成功 跳转home页面

          // 1. 在公共的app.js中调用globalData，在里面赋值（在全局变量赋值）
          app.globalData.phone = res.data.data.phone
          
          // 2.在本地的storage中赋值
          wx.setStorageSync('phone', res.data.data.phone)

          wx.navigateBack({})
        } else {
          // 发送失败
          wx.showToast({
            title: '登陆失败',
            icon: 'none',
          })
        }
      },
    })
  },
})

home页面

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var phone = wx.getStorageSync('phone')
    this.setData({
      // phone:app.globalData.phone
      phone: phone
    })
    
  },

五 全局来说

问题1 我们有很多页面 在每个页面都需要登陆者的信息 如何做

问题2 在内存存储的值和在文件存储的值 去取的时候那个快？

上面我们写的都是去文件 storage里取值

其实我们只要做到程序启动的时候去storage里取值一次，然后存在内存里即可。

 

看上图 我们就是在点击登录的时候 登录成功之后跳转 在跳转的时候我们往内存中写一份 往文件里写一下 调回我的页面我们选择在内存中取值

//全局app.js
App({
  onLaunch: function () {
    var phone = wx.getStorageSync('phone');
    if(phone){
      this.globalData.phone=phone;
    }
  },
  globalData: {
    phone: null
  }
})

  // home.js
    /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      phone:app.globalData.phone
    })

其实向上面基本上就差不多了 但是我们还可以在更改

// auth.js
onClickSubmit:function(){
      wx.request({
      url: 'http://127.0.0.1:8000/api/login/',
      data: { phone: this.data.phone, code:this.data.code },
      method: 'POST',
      success: function (res) {
        if (res.data.status) {
          
          // 初始化执行initUserinfo函数
          app.initUserinfo(res.data.data);
                    // // 登陆成功 跳转home页面
                    // // 1. 在公共的app.js中调用globalData，在里面赋值（在全局变量赋值）
                    // app.globalData.phone = res.data.data.phone
                    
                    // // 2.在本地的storage中赋值
                    // wx.setStorageSync('phone', res.data.data.phone)




          wx.navigateBack({})
        } else {
          // 发送失败
          wx.showToast({
            title: '登陆失败',
            icon: 'none',
          })
        }
      },
    })
  },

上面标蓝色的代码 我们拿到 全局的app.js中

//app.js
App({
  onLaunch: function () {
    var phone = wx.getStorageSync('phone');
    if(phone){
      this.globalData.phone=phone;
    }
  },
  globalData: {
    phone: null
  },
  initUserinfo:function(res){
    // 登陆成功 跳转home页面
    // 1. 在公共的app.js中调用globalData，在里面赋值（在全局变量赋值）
    app.globalData.phone = res.phone

    // 2.在本地的storage中赋值
    wx.setStorageSync(res.phone)
  }
})

再找个问题 现在只有一个phone 我们要的token啥的都没有我们要继续修改一下

//app.js
App({
  onLaunch: function () {
    var userinfo = wx.getStorageSync('userinfo');
    if (userinfo){
      this.globalData.userinfo = userinfo;
    }
  },
  globalData: {
    userinfo: null
  },
  initUserinfo:function(res){
    // 登陆成功 跳转home页面
    // 1. 在公共的app.js中调用globalData，在里面赋值（在全局变量赋值）
    // app.globalData.phone = res.phone
    this.globalData.userinfo=res
    // 2.在本地的storage中赋值
    wx.setStorageSync('userinfo',res)
  }
})

// home.js
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userinfo: null,
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      userinfo: app.globalData.userinfo
    })
    
  },
})

这个时候我们拿到了phone和token但是我们在登录成功之后应该拿到用户的头像和用户的名称

继续

这个还是回到登录页面 输入了手机号和验证码 在点击登录的时候获取用户的头像和用户的名称存在内存一份存在文件一份

官方不推荐使用的方法

<button class="submit" bindtap="onClickLogin">登录 | 注册</button>

 onClickLogin:function(){
      wx.request({
      url: 'http://127.0.0.1:8000/api/login/',
      data: { phone: this.data.phone, code:this.data.code },
      method: 'POST',
      success: function (res) {
        if (res.data.status) {
          wx.getUserInfo({
            success:function(local){
              // app.initUserinfo(res.data.data, local.userInfo.nickName, local.userInfo.avatarUrl);
              app.initUserinfo(res.data.data, local.userInfo);
            }
          })
 
          wx.navigateBack({})
        } else {
          // 发送失败
          wx.showToast({
            title: '登陆失败',
            icon: 'none',
          })
        }
      },
    })
  },

详见 （七）获取用户信息

官方推荐的使用方法

    <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>

 onClickSubmit:function(e){
    wx.request({
      url: 'http://127.0.0.1:8000/api/login/',
      data: { phone: this.data.phone, code: this.data.code },
      method: 'POST',
      success: function (res) {
        if (res.data.status) {
           app.initUserinfo(res.data.data, e.detail.userInfo);
          wx.navigateBack({})
        } else {
          // 发送失败
          wx.showToast({
            title: '登陆失败',
            icon: 'none',
          })
        }
      },
    })
  },

 六 注销

  　　
# wxml
　　　　<view class="name" wx:if="{{userinfo}}">
        <view bindtap="onClickLgout">{{userinfo.nickName}}</view>
      </view>
      <view class="name" wx:else="{{userinfo}}">
          <navigator url="/pages/auth/auth">登录</navigator>
          |
          <navigator url="/pages/auth/auth">注册</navigator>
      </view>

  onClickLgout:function(){
    app.globalData.delUserinfo = null,
    this.setData({
      userinfo: null
    })
  },

//app.js
App({


   delUserinfo:function(){
    this.globalData.userinfo = null,
    wx.removeStorage({key: 'userinfo',})
  }
})