（十四）登陆注册 逻辑二 前端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',})
  }
})
复制代码

 

 

posted @   流年中渲染了微笑  阅读(576)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手
CONTENTS
✕