（十四）登錄註冊 邏輯二 前端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教程