（十四）登陆注册逻辑二前端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但是我们在登录成功之后应该拿到用户的头像和用户的名称

继续

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

官方不推荐使用的方法

 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',})
  }
})

posted @ 2019-02-27 21:48 流年中渲染了微笑阅读(559) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

流年中渲染了微笑

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

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

二 登录页面