Eine kurze Diskussion darüber, wie Sie sicherstellen können, dass jede Seite des Miniprogramms angemeldet ist

Wie kann sichergestellt werden, dass jede Seite im WeChat-Applet angemeldet ist? Dieser Artikel stellt Ihnen die Methode eines Miniprogramms vor, um sicherzustellen, dass jede Seite angemeldet ist. Ich hoffe, er wird Ihnen hilfreich sein!

In einem WeChat-Miniprogramm gibt es eine Startseite, eine persönliche Seite, einige Listenseiten, Detailseiten usw. Die meisten dieser Seiten können geteilt werden. Wie stellt diese Seite sicher, dass der Benutzer angemeldet ist, wenn die freigegebene Seite von einem anderen Benutzer geöffnet wird?

Es gibt viele Lösungen im Internet, die dem Anforderungspaket ein Abfangen hinzufügen. Wenn kein Token vorhanden ist, rufen Sie die Anmeldeanforderung auf, um das Token zu erhalten, bevor Sie fortfahren. An dieser Lösung ist nichts auszusetzen. Wenn mehrere Anforderungen gleichzeitig auf einer Seite ausgelöst werden, werden sie nach dem erfolgreichen Erhalt des Tokens einfach durchquert Array eine Anfrage nach der anderen.

Aber diese Anforderung ist etwas komplizierter. Beispielsweise muss auf den meisten Seiten ein Ladenketten-Applet vorhanden sein (da der Bestand, der Preis usw. der aktuellen Ladenprodukte basierend auf dem Laden ermittelt werden müssen). . Dieser Store ruft das Backend basierend auf der aktuellen Positionierung auf. Es wäre zu mühsam, es zu diesem Zeitpunkt in die Anfrage einzukapseln.

Lösung

Zunächst ist uns aufgefallen, dass die Anmeldung und das Abrufen des Standorts asynchron mit unserer Seitenanforderung erfolgen. Wir müssen sicherstellen, dass die Seitenanforderung nach der Anmeldung und dem Abrufen des Standorts erfolgt, wenn wir jedoch schreiben jede Seite Auch hier ist die Wartbarkeit zu schlecht. So können wir einen Weg finden, dies zu tun. Der Code sieht also so aus:

const app = getApp()
Page({
  data: {
    logs: []
  },
  onLoad() {
    app.commonLogin(()=>{
        // 处理页页面请求
    })
  }
})

Dies scheint unser Problem zu lösen, aber denken Sie noch einmal darüber nach, wenn Sie mehr tun möchten, z. B. eine einheitliche Verarbeitung von onShareAppMessage für jede Seite, aber ich möchte es nicht tun Jedes Mal. Schreiben Sie jede Seite erneut. Außerdem möchte ich für jede Seite eine Uhr implementieren.

Weitere Lösung

Wir können das WeChat-Applet sehen, jede Seite ist eine Page(), dann können wir außerhalb dieser Seite eine Shell hinzufügen, und wir können eine MyPage haben, um diese Seite zu ersetzen, ohne Nochmals, hier ist der Code:

tool.js Zugehöriger Code

/**
   * 处理合并参数
   */
  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)
  }

  /**
    * 设置监听器
    */
  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); // 监听nowData对象的lastKey
    })
  }

  /**
   * 监听属性 并执行监听函数
   */
  observe(obj, key, watchFun, deep, page) {
    var val = obj[key];
    // 判断deep是true 且 val不能为空 且 typeof val===&#39;object&#39;（数组内数值变化也需要深度监听）
    if (deep && val != null && typeof val === &#39;object&#39;) {
      Object.keys(val).forEach(childKey => { // 遍历val对象下的每一个key
        this.observe(val, childKey, watchFun, deep, page); // 递归调用监听函数
      })
    }
    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) { // 若是深度监听,重新监听该对象，以便监听其属性。
          that.observe(obj, key, watchFun, deep, page);
        }
      },
      get: function () {
        return val;
      }
    })
  }

Seitencode:

app.tool.newPage({
  data: {
    // noAutoLogin: false
  },
  onShow: function () {
    // 在这里写页面请求逻辑
  }
}

Der letzte

Code läuft schon lange online. Sie können dem newPage-Paket im Tool folgen . Fügen Sie Ihre eigenen Bedürfnisse hinzu. Kurz gesagt, ich bin hier, um eine Idee zu liefern. Wenn Sie eine bessere Idee haben, teilen Sie sie bitte mit.

【Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung】

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie Sie sicherstellen können, dass jede Seite des Miniprogramms angemeldet ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!