Bagaimanakah program mini WeChat memastikan setiap halaman telah dilog masuk? Artikel ini akan memperkenalkan anda kepada kaedah program mini untuk memastikan setiap halaman dilog masuk. Saya harap ia akan membantu anda!

Aplet WeChat mempunyai halaman utama, halaman peribadi, beberapa halaman senarai, halaman butiran, dll. Kebanyakan halaman ini boleh dikongsi. Apabila halaman kongsi dibuka oleh pengguna lain, bagaimanakah halaman ini memastikan pengguna dilog masuk?

Terdapat banyak penyelesaian di Internet yang menambah pemintasan pada enkapsulasi permintaan Jika tiada token, hubungi permintaan log masuk untuk mendapatkan token sebelum meneruskan. Tidak ada yang salah dengan penyelesaian ini. Hanya perhatikan satu perkara Apabila berbilang permintaan dicetuskan pada halaman pada masa yang sama, selepas semua permintaan dipintas, mereka diletakkan dalam tatasusunan susun satu permintaan pada satu masa.

Tetapi keperluan ini sedikit lebih rumit Sebagai contoh, apel kedai serbaneka rantaian, kebanyakan halaman perlu mempunyai kedai (kerana perlu mendapatkan inventori, harga, dll. produk kedai semasa. di kedai). Kedai ini berdasarkan kedai semasa diperolehi dengan memanggil antara muka latar belakang Pada masa ini, ia akan menjadi terlalu menyusahkan untuk merangkumnya dalam permintaan.

Penyelesaian

Pertama sekali, kami menyedari bahawa log masuk, mendapatkan kedudukan dan permintaan halaman kami adalah tidak segerak, kami perlu memastikan bahawa permintaan halaman Ia adalah selepas log masuk dan mendapatkan kedudukan, tetapi jika kita menulisnya semula untuk setiap halaman, kebolehselenggaraan akan menjadi terlalu lemah. Jadi kita boleh mengekstrak cara untuk melakukan ini. Jadi kodnya adalah seperti ini:

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

Melakukan ini nampaknya menyelesaikan masalah kami, tetapi fikirkan semula, jika anda ingin melakukan lebih banyak, seperti pemprosesan bersatu onShareAppMessage untuk setiap halaman, Tetapi saya tidak Saya tidak mahu menulisnya lagi untuk setiap halaman Selain itu, saya juga ingin melaksanakan jam tangan untuk setiap halaman sendiri.

Penyelesaian lanjut

Kita dapat melihat bahawa applet WeChat, setiap halaman adalah Halaman(), maka kita boleh memberikan Halaman ini Dengan shell di luar, kita boleh mempunyai MyPage untuk menggantikan Halaman ini Tanpa berlengah lagi, berikut ialah kod:

tool.js Kod berkaitan

/**
   * 處理合并參數(shù)
   */
  handlePageParamMerge(arg) {
    let numargs = arg.length; // 獲取被傳遞參數(shù)的數(shù)值。
    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
  }

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

  /**
   * 處理組件參數(shù)合并
   */
  handleCompParamMerge(arg) {
    let numargs = arg.length; // 獲取被傳遞參數(shù)的數(shù)值。
    let data = {}
    let options = {}
    let properties = {}
    let methods = {}
    let comp = {}
    for (let ix in arg) {
      let item = arg[ix]
      // 合并組件的初始數(shù)據(jù)
      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

        //獲取回調(diào)方法
        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)
  }

  /**
    * 設(shè)置監(jiān)聽器
    */
  setWatcher(page) {
    let data = page.data;
    let watch = page.watch;
    Object.keys(watch).forEach(v => {
      let key = v.split('.'); // 將watch中的屬性以'.'切分成數(shù)組
      let nowData = data; // 將data賦值給nowData
      for (let i = 0; i < key.length - 1; i++) { // 遍歷key數(shù)組的元素，除了最后一個！
        nowData = nowData[key[i]]; // 將nowData指向它的key屬性對象
      }

      let lastKey = key[key.length - 1];
      // 假設(shè)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; // 若未設(shè)置deep,則為undefine
      this.observe(nowData, lastKey, watchFun, deep, page); // 監(jiān)聽nowData對象的lastKey
    })
  }

  /**
   * 監(jiān)聽屬性 并執(zhí)行監(jiān)聽函數(shù)
   */
  observe(obj, key, watchFun, deep, page) {
    var val = obj[key];
    // 判斷deep是true 且 val不能為空 且 typeof val===&#39;object&#39;（數(shù)組內(nèi)數(shù)值變化也需要深度監(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); // 遞歸調(diào)用監(jiān)聽函數(shù)
      })
    }
    var that = this;
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set: function (value) {
        if (val === value) {
          return
        }
        // 用page對象調(diào)用,改變函數(shù)內(nèi)this指向,以便this.data訪問data內(nèi)的屬性值
        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;
      }
    })
  }

Kod halaman:

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

Akhirnya

Kod telah berjalan dalam talian untuk masa yang lama Pakej newPage dalam alat boleh ditambah mengikut keperluan anda sendiri . Pendek kata, saya di sini untuk memberikan idea Jika anda mempunyai idea yang lebih baik, sila kongsi.

[Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara memastikan setiap halaman program mini dilog masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!