Perbincangan ringkas tentang cara memastikan setiap halaman program mini dilog masuk

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

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

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!