WeChat アプレットはどのようにしてすべてのページがログインしていることを確認(rèn)しますか?この記事では、すべてのページに確実にログインするためのミニプログラムの方法を紹介します。お役に立てば幸いです。

WeChat アプレットには、ホームページ、個(gè)人ページ、いくつかのリスト ページ、詳細(xì)ページなどがあり、これらのページのほとんどは共有できます。共有ページが別のユーザーによって開かれた場(chǎng)合、このページはユーザーがログインしていることをどのように確認(rèn)しますか?

インターネット上には、リクエストのカプセル化にインターセプトを追加するソリューションが多數(shù)あります。トークンがない場(chǎng)合は、まずログイン リクエストを呼び出してトークンを取得してから続行します。 このソリューションには何も問(wèn)題はありません。1 つの點(diǎn)に注意してください。ページ上で複數(shù)のリクエストが同時(shí)にトリガーされた場(chǎng)合、すべてのリクエストがインターセプトされた後、それらは配列に配置されます。トークンの取得に成功したら、単に一度に 1 つのリクエストを配列します。

しかし、この要件は少し複雑です。たとえば、チェーンのコンビニ アプレットでは、ほとんどのページに店舗が必要です (現(xiàn)在の店舗の商品の在庫(kù)、価格などをベースに取得する必要があるため)このストアは現(xiàn)在のストアをベースにしています。位置情報(bào)はバックグラウンドインターフェイスを呼び出すことで取得します。このとき、リクエストにカプセル化するのは面倒です。

解決策

まず、ログイン、位置の取得、ページリクエストが非同期であることに気付きました。ページリクエスト ログインして位置情報(bào)を取得した後ですが、ページごとに書き直すとメンテナンス性が悪すぎます。したがって、これを行う方法を抽出できます。 したがって、コードは次のようになります。

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

これを?qū)g行すると問(wèn)題は解決するように見えますが、ページごとの onShareAppMessage の統(tǒng)一処理など、さらにやりたい場(chǎng)合はもう一度考えてください。すべてのページにもう一度書きたくないのですが、さらに自分で各ページにウォッチを?qū)g裝したいのですが、どうすればよいですか?

さらなる解決策

WeChat アプレット、各ページが Page() であることがわかり、このページに追加することができます。外側(cè)のシェルのレイヤーを使用すると、このページを置き換える MyPage を作成できます。これ以上の手間をかけずに、コードを次に示します:

tool.js 関連コード

/**
   * 處理合并參數(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
  }

  /***
   * 合并頁(yè)面方法以及數(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的頁(yè)面
   */
  newPage() {
    let options = this.handlePageParamMerge(arguments)
    let that = this
    let app = getApp()

    //增加全局點(diǎn)擊登錄判斷
    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)
        //頁(yè)面埋點(diǎn)
        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ù)組的元素，除了最后一個(gè)！
        nowData = nowData[key[i]]; // 將nowData指向它的key屬性對(duì)象
      }

      let lastKey = key[key.length - 1];
      // 假設(shè)key===&#39;my.name&#39;,此時(shí)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對(duì)象的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對(duì)象下的每一個(gè)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對(duì)象調(diào)用,改變函數(shù)內(nèi)this指向,以便this.data訪問(wèn)data內(nèi)的屬性值
        watchFun.call(page, value, val); // value是新值，val是舊值
        val = value;
        if (deep) { // 若是深度監(jiān)聽,重新監(jiān)聽該對(duì)象，以便監(jiān)聽其屬性。
          that.observe(obj, key, watchFun, deep, page);
        }
      },
      get: function () {
        return val;
      }
    })
  }

ページ コード:

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

最後に

#コードは長(zhǎng)い間オンラインで実行されており、ツールの newPage パッケージを使用してニーズに応じて追加できます。つまり、私はアイデアを提供するためにここにいます。もっと良いアイデアがあれば、ぜひ共有してください。

[関連する學(xué)習(xí)の推奨事項(xiàng):

小さなプログラム開発チュートリアル]

以上がミニ プログラムの各ページが確実にログインしていることを確認(rèn)する方法についての簡(jiǎn)単な説明の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。