关于小程序的导航栏的返回监控

这个微信小程序有一个好处,它提供了很多组件而且已经封装很多细节,提供了很多方便,就比如说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,
          })
      }
    }
  },

但是实际上有一个问题,就是代码复用有问题,因为他只在自己的页面生命周期起作用,没有像组件一样“即插即用”,但是这个很灵活。如果你想对导航栏有更多的想法,我觉得最好还是自定义导航栏,但是也要忍受一些问题,不如我现在自定义导航栏会遇到页面上下滑动,自定义导航栏会“抖一下”的问题,论坛上看了,已经是老问题了还没解决。

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