微信小程序登錄獲取用戶信息並緩存用戶信息及封裝監聽data數據的變化的js封裝

1.先在app.js里寫一個方法，然后在onload里調用即可,具體說明看代碼

 loadToData:function(){
    var that = this;
    var user = wx.getStorageSync('user') || {};
    var userInfo = wx.getStorageSync('userInfo') || {};
    console.log('緩存的數據', user, userInfo)
    if ((user && user.userId) || this.globalData.userInfo.nickName) {
      wx.showTabBar();
    } else {
      wx.hideTabBar()
    }
    if ((!user.openid || (user.expires_in || Date.now()) < (Date.now() + 600)) && (!userInfo.nickName)) {
      wx.login({
        //獲取code
        success: function (res) {
          var code = res.code //返回code
          wx.getSetting({
            success: res => {
              if (res.authSetting['scope.userInfo']) {
                // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
                wx.getUserInfo({
                  success: res => {
                    // 可以將 res 發送給后台解碼出 unionId
                    that.globalData.userInfo = res.userInfo;
                    var userObj = {};
                    var userInfoObj = {};
                    userObj.encryptedData = res.encryptedData;
                    userObj.iv = res.iv;
                    userObj.expires_in = Date.now() + 24 * 7 * 60 * 60;
                    userInfoObj.nickName = res.userInfo.nickName;
                    userInfoObj.avatarUrl = res.userInfo.avatarUrl;
                    userInfoObj.gender = res.userInfo.gender;
                    wx.request({
                      url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + that.globalData.appid + '&secret=' + that.globalData.secret + '&js_code=' + code + '&grant_type=authorization_code',
                      data: {},
                      header: {
                        'content-type': 'application/json'
                      },
                      success: function (res) {
                        var openid = res.data.openid; //返回openid
                        userObj.openid = openid;
                        that.globalData.openid = res.data.openid;
                        apiModel.verificationWecat({ usrWecat: userObj.openid }).then(res => {
                          console.log('請求登錄是否成功', res.code == '200', userObj.openid, res)
                          if (res.code == '200') {
                            console.log('請求登錄成功', res.data.usrId, res)
                            that.globalData.userId = res.data.usrId;
                            userObj.userId = res.data.usrId;
                            wx.setStorageSync('userInfo', userInfoObj);
                            wx.setStorageSync('user', userObj);
                          } else {
                            var param = {
                              usrName: userInfoObj.nickName,
                              usrWecat: userObj.openid,
                            }
                            apiModel.addUser(param).then(res => {
                              console.log('添加注冊用戶成功', res.data.usrId, param, res)
                              that.globalData.userId = res.data.usrId;
                              userObj.userId = res.data.usrId;
                              wx.setStorageSync('userInfo', userInfoObj);
                              wx.setStorageSync('user', userObj);
                            })
                          }
                        });
                      }
                    });
                    
                  }
                })
              }
            }
          });
        }
      })
    }
  },
  globalData: {
    openid:null,//傳給后台用於給用戶標識注冊的id
     currentShow: 1,
    userInfo: {},//用戶頭像、昵稱
    userId:null,//用戶id
    appid: 'wx4f18a4fcbfb12f49f239e',//appid需自己提供，此處的appid我隨機編寫
    secret: '06164999eaf9f5402f0024419f9a09179f9a',//secret需自己提供，此處的secret我隨機編寫
  }

2.其實我們在啟動小程序的時候並沒有自己彈出獲取用戶信息的彈框，這個得自己寫一個button來獲取用戶信息，然后再進行相應的操作

index.wxml:

<view class="cont1" wx:if="{{!hasUserInfo && canIUse}}">
<view class="zw"></view>
  <view class="userinfo">
    <view class="toast-title">提示</view>
    <view class="toast-content">將獲取你的個人信息頭像、昵稱等</view>
    <button class="toast-true" open-type="getUserInfo" bindgetuserinfo="getUserInfo">確認</button>
  </view>
</view>
<view wx:else>
  <view hidden="{{currentShow ? true : false}}">
    <merchantIndex />
  </view>

  <view hidden="{{!currentShow ? true : false}}">
     <studentindex />
  </view>
</view>

 

index.js

const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    // 1---->學生
    // 0---->管理
    currentShow: app.globalData.currentShow,
    hasUserInfo: wx.getStorageSync('hasUserInfo'),
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  
 
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    app.setWatcher(this);
    if (app.globalData.userInfo.nickName) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
      wx.setStorageSync('hasUserInfo', true)
    } else if (this.data.canIUse) {
      // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        wx.setStorageSync('hasUserInfo', true)
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
          wx.setStorageSync('hasUserInfo', true)
          app.loadToData();
        }
      })
    }
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    console.log("onshow")
  },
  getUserInfo: function (e) {
    app.globalData.userInfo = e.detail.userInfo
    console.log('app.globalData.userInfo', app.globalData.userInfo)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
    wx.setStorageSync('hasUserInfo', true)
    app.loadToData()
  },
  watch: {
    userInfo: function (newobj, oldobj) {
      if (newobj.nickName) {
        wx.showTabBar();
      }
    }
  },
  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
    console.log("onHide")
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
    console.log("onUnload")
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

其中有一個watch.js的封裝

/**
 * 設置監聽器
 */
export function setWatcher(page) {
  let data = page.data;
  let watch = page.watch;
  // if (!watch.userInfo.nickName){
    
  // };
  Object.keys(watch).forEach(v => {
    let key = v.split('.'); // 將watch中的屬性以'.'切分成數組
    let nowData = data; // 將data賦值給nowData
    for (let i = 0; i < key.length - 1; i++) { // 遍歷key數組的元素，除了最后一個！
      nowData = nowData[key[i]]; // 將nowData指向它的key屬性對象
    }
    let lastKey = key[key.length - 1];
    // 假設key==='my.name',此時nowData===data['my']===data.my,lastKey==='name'
    let watchFun = watch[v].handler || watch[v]; // 兼容帶handler和不帶handler的兩種寫法
    let deep = watch[v].deep; // 若未設置deep,則為undefine
    observe(nowData, lastKey, watchFun, deep, page); // 監聽nowData對象的lastKey
  })
}
/**
 * 監聽屬性 並執行監聽函數
 */
function observe(obj, key, watchFun, deep, page) {
  var val = obj[key];
  // 判斷deep是true 且 val不能為空 且 typeof val==='object'（數組內數值變化也需要深度監聽）
  if (deep && val != null && typeof val === 'object') {
    Object.keys(val).forEach(childKey => { // 遍歷val對象下的每一個key
      observe(val, childKey, watchFun, deep, page); // 遞歸調用監聽函數
    })
  }
  let that = this;
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    set: function (value) {
      watchFun.call(page, value, val); // value是新值，val是舊值
      val = value;
      if (deep) { // 若是深度監聽,重新監聽該對象，以便監聽其屬性。
        observe(obj, key, watchFun, deep, page);
      }
    },
    get: function () {
      return val;
    }
  })
}
module.exports = {
  setWatcher: setWatcher
}

調用watch.js的方法

const watch = require("./utils/watch.js");
App({
  setWatcher(page) {
    watch.setWatcher(page);
  },})

然后在其他頁面的應用可見index.js:在onload里調用，然后再在頁面寫監聽data里相應數據的變化watch方法即可；