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

时间  2021-08-15
标签 前端 api app ide 函数 this url spa code xml 栏目 HTTP/TCP 繁體版
原文   原文链接

 

                   

 

咱们在点击登陆的时候  成功以后跳转到home前端

 

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

由于还有其余页面也要使用 共有的数据 全部用到  globalDataapi

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

二 登陆页面

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

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页面ide

三 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代码this

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的时候  在每次重启的时候 数据就会消失，这样的话 咱们就要用到 storageurl

登录页面

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 咱们有不少页面 在每一个页面都须要登录者的信息 如何作spa

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

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

其实咱们只要作到程序启动的时候去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',})
  }
})
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程