關於小程序的導航欄的返回監控

這個微信小程序有一個好處,它提供了很多組件而且已經封裝很多細節,提供了很多方便,就比如說rpx就是幫你處理了屏幕適配的問題,比如說你爲了適配可能要準備好幾套方案,或者你要自己算手機的寬度然後適配屏幕。但有些東西還是很棘手的,比如說手機導航欄的監控。

官方導航欄只是給你一個返回鍵和title,如果只是用官方組建本身,你可能只是設置一下導航欄文字,顏色這些非功能性的:

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

但是產品提需求,他總是對這個導航欄過不去,比如添加一些按鈕,要求一些邏輯判斷或者是什麼監控埋點。

處理這個有兩種,一是自定義導航欄,這個我有寫一個博客我是已組件的形式來完成,你也可以在頁面直接搞,但是要考慮到一個代碼重用的話儘量已組件的方式。如果覺得不想搞,還有一種就是通過,小程序頁面生命過程來完成,這就是使用“onUnload”和“onHide”來。

在這裏插入圖片描述
實際上小程序頁面切換類似一個壓棧,出棧的問題,通過生命週期我們其實可以看到在狀態切換到對應條件會觸發對應的生命函數,於是當我們點返回鍵的時候我們可以在“onUnload”上動一些手腳,添加業務邏輯或者業務埋點進去實際上也能完成相關的需求。

類似於我最近寫的一個根據跳轉過來的頁面路徑來完成跳轉的切換。

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
    var _this = this;
    if(_this.data.navigateToPage && _this.data.navigateToPage != null){
      console.log("=========" + _this.data.navigateToPage)
      var _url = _this.data.navigateToPage
      if (_url == '/pages/home/home'){
          wx.switchTab({
            url: _url,
          })
      }
    }
  },

但是實際上有一個問題,就是代碼複用有問題,因爲他只在自己的頁面生命週期起作用,沒有像組件一樣“即插即用”,但是這個很靈活。如果你想對導航欄有更多的想法,我覺得最好還是自定義導航欄,但是也要忍受一些問題,不如我現在自定義導航欄會遇到頁面上下滑動,自定義導航欄會“抖一下”的問題,論壇上看了,已經是老問題了還沒解決。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章