Comment s'assurer que chaque page de l'applet WeChat a été connectée ? Cet article vous présentera la méthode du mini programme pour vous assurer que chaque page est connectée. J'espère que cela vous sera utile !

Dans un mini programme WeChat, il y a une page d'accueil, une page personnelle, des pages de liste, des pages de détails, etc. La plupart de ces pages peuvent être partagées. Lorsque la page partagée est ouverte par un autre utilisateur, comment cette page garantit-elle que l'utilisateur est connecté??

Il existe de nombreuses solutions sur Internet qui ajoutent une interception au package de requête. S'il n'y a pas de token, appelez la requête de connexion pour obtenir le token avant de continuer. Il n'y a rien de mal à cette solution. Faites juste attention à une chose. Lorsque plusieurs requêtes sont déclenchées sur une page en même temps, une fois toutes les requêtes interceptées, elles sont placées dans un tableau. Après avoir obtenu le jeton, parcourez simplement le tableau. tableau une requête à la fois.

Mais cette exigence est un peu plus compliquée. Par exemple, pour l'applet d'une cha?ne de dépanneurs, la plupart des pages doivent avoir un magasin (car il est nécessaire d'obtenir l'inventaire, le prix, etc. des produits actuels du magasin en fonction du magasin) . Ce magasin appelle le backend en fonction du positionnement actuel obtenu depuis l'interface, il serait trop compliqué de l'encapsuler dans la requête pour le moment.

Solution

Tout d'abord, nous avons remarqué que la connexion et l'obtention du poste sont asynchrones avec notre demande de page. Nous devons nous assurer que la demande de page a lieu après la connexion et l'obtention du poste, mais si nous écrivons. chaque page Encore une fois, la maintenabilité sera trop mauvaise. Nous pouvons donc extraire un moyen de le faire. Le code est donc comme ceci?:

const app = getApp()
Page({
  data: {
    logs: []
  },
  onLoad() {
    app.commonLogin(()=>{
        // 處理頁頁面請求
    })
  }
})

Faire cela semble résoudre notre problème, mais réfléchissez-y à nouveau, si vous voulez en faire plus, comme le traitement unifié de onShareAppMessage pour chaque page, mais je ne veux pas le faire sur chaque page. Réécrivez chaque page. De plus, je souhaite mettre en place moi-même une surveillance pour chaque page.

Autre solution

Nous pouvons voir l'applet WeChat, chaque page est une Page(), puis nous pouvons ajouter un shell à l'extérieur de cette Page, et nous pouvons avoir une MyPage pour remplacer cette Page, sans plus loin, voici le code :

tool.js Code associé

/**
   * 處理合并參數
   */
  handlePageParamMerge(arg) {
    let numargs = arg.length; // 獲取被傳遞參數的數值。
    let data = {}
    let page = {}
    for (let ix in arg) {
      let item = arg[ix]
      if (item.data && typeof (item.data) === 'object') {
        data = Object.assign(data, item.data)
      }
      if (item.methods && typeof (item.methods) === 'object') {
        page = Object.assign(page, item.methods)
      } else {
        page = Object.assign(page, item)
      }
    }
    page.data = data
    return page
  }

  /***
   * 合并頁面方法以及數據, 兼容 {data:{}, methods: {}} 或 {data:{}, a:{}, b:{}}
   */
  mergePage() {
    return this.handlePageParamMerge(arguments)
  }

  /**
   * 處理組件參數合并
   */
  handleCompParamMerge(arg) {
    let numargs = arg.length; // 獲取被傳遞參數的數值。
    let data = {}
    let options = {}
    let properties = {}
    let methods = {}
    let comp = {}
    for (let ix in arg) {
      let item = arg[ix]
      // 合并組件的初始數據
      if (item.data && typeof (item.data) === 'object') {
        data = Object.assign(data, item.data)
      }
      // 合并組件的屬性列表
      if (item.properties && typeof (item.properties) === 'object') {
        properties = Object.assign(properties, item.properties)
      }
      // 合組件的方法列表
      if (item.methods && typeof (item.methods) === 'object') {
        methods = Object.assign(methods, item.methods)
      }
      if (item.options && typeof (item.options) === 'object') {
        options = Object.assign(options, item.options)
      }
      comp = Object.assign(comp, item)
    }
    comp.data = data
    comp.options = options
    comp.properties = properties
    comp.methods = methods
    return comp
  }

  /**
   * 組件混合 {properties: {}, options: {}, data:{}, methods: {}}
   */
  mergeComponent() {
    return this.handleCompParamMerge(arguments)
  }

  /***
   * 合成帶watch的頁面
   */
  newPage() {
    let options = this.handlePageParamMerge(arguments)
    let that = this
    let app = getApp()

    //增加全局點擊登錄判斷
    if (!options.publicCheckLogin){
      options.publicCheckLogin = function (e) {
        let pages = getCurrentPages()
        let page = pages[pages.length - 1]
        let dataset = e.currentTarget.dataset
        let callback = null

        //獲取回調方法
        if (dataset.callback && typeof (page[dataset.callback]) === "function"){
          callback = page[dataset.callback]
        }
        // console.log('callback>>', callback, app.isRegister())
        //判斷是否登錄
        if (callback && app.isRegister()){
          callback(e)
        }
        else{
          wx.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    }

    const { onLoad } = options
    options.onLoad = function (arg) {
      options.watch && that.setWatcher(this)
      onLoad && onLoad.call(this, arg)
    }

    const { onShow } = options
    options.onShow = function (arg) {
      if (options.data.noAutoLogin || app.isRegister()) {
        onShow && onShow.call(this, arg)
        //頁面埋點
        app.ga({})
      }
      else {
        wx.navigateTo({
          url: '/pages/login/login'
        })
      }
    }

    return Page(options)
  }

  /**
   * 合成帶watch等的組件
   */
  newComponent() {
    let options = this.handleCompParamMerge(arguments)
    let that = this
    const { ready } = options
    options.ready = function (arg) {
      options.watch && that.setWatcher(this)
      ready && ready.call(this, arg)
    }
    return Component(options)
  }

  /**
    * 設置監(jiān)聽器
    */
  setWatcher(page) {
    let data = page.data;
    let watch = page.watch;
    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===&#39;my.name&#39;,此時nowData===data[&#39;my&#39;]===data.my,lastKey===&#39;name&#39;
      let watchFun = watch[v].handler || watch[v]; // 兼容帶handler和不帶handler的兩種寫法
      let deep = watch[v].deep; // 若未設置deep,則為undefine
      this.observe(nowData, lastKey, watchFun, deep, page); // 監(jiān)聽nowData對象的lastKey
    })
  }

  /**
   * 監(jiān)聽屬性 并執(zhí)行監(jiān)聽函數
   */
  observe(obj, key, watchFun, deep, page) {
    var val = obj[key];
    // 判斷deep是true 且 val不能為空 且 typeof val===&#39;object&#39;（數組內數值變化也需要深度監(jiān)聽）
    if (deep && val != null && typeof val === &#39;object&#39;) {
      Object.keys(val).forEach(childKey => { // 遍歷val對象下的每一個key
        this.observe(val, childKey, watchFun, deep, page); // 遞歸調用監(jiān)聽函數
      })
    }
    var that = this;
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set: function (value) {
        if (val === value) {
          return
        }
        // 用page對象調用,改變函數內this指向,以便this.data訪問data內的屬性值
        watchFun.call(page, value, val); // value是新值，val是舊值
        val = value;
        if (deep) { // 若是深度監(jiān)聽,重新監(jiān)聽該對象，以便監(jiān)聽其屬性。
          that.observe(obj, key, watchFun, deep, page);
        }
      },
      get: function () {
        return val;
      }
    })
  }

Code de la page :

app.tool.newPage({
  data: {
    // noAutoLogin: false
  },
  onShow: function () {
    // 在這里寫頁面請求邏輯
  }
}

Le dernier code

est exécuté en ligne depuis longtemps. Vous pouvez suivre le package newPage dans l'outil. . Ajoutez vos propres besoins. En bref, je suis ici pour vous donner une idée. Si vous avez une meilleure idée, partagez-la.

【Recommandations d'apprentissage associées?: Tutoriel de développement de mini-programmes】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!