微信小程序突破页面层级限制

笨重的方法
1、首先自定义头部导航组件相关DOM结构；

<view class="head_nav">
  <view style="width:100%;height:{{statusBarHeight}}px;background-color:{{barBgColor}};" class="top_bar"></view>
  <view class="status-bar" style="top:{{statusBarHeight}}px;background-color:{{barBgColor}};">
    <view class="bar_text">
      <view class="bar_pr">
        <!-- 此为突破限制， -->
       <image class="login_out_btn" bindtap="goBack" wx:if="{{isShare === '2'}}"  src="../../images/fanhui.png"></image>
        <image class="back_home"  bindtap="getBackHome"  src="../../images/home-icon.png"></image>
        <view class="bar_title">{{topBarName}}</view>
      </view>
    </view>
  </view>
</view>

2、首先自定义头部导航组件相关js；顶部返回上一级事件

goBack() {
   // 返回上一级
   wx.navigateBack({
     delta: 1
   })
   /**
    * 此为突破页面层数限制，
    * 每一个需要这样写
    * wx.navigateTo({
    *  url:'',
    *  fail() {
    *    wx.redirectTo({
    *      url:'',
    *    })
    *  }
    * })
    * */ 
 },
  getBackHome(){
   // 返回首页
    let that = this;
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

3、页面中路由跳转规则
// 每一个跳转都需要先navigateTo，wx.navigateTo跳转可以将页面添加到getCurrentPages()中，而wx.redirectTo是不会添加到历史记录中的；失败之后才使用wx.redirectTo; 不明白查看小程序路由api

这样既能保证右上角返回键，一直返回上一页；而且可以很好的辨别手机（我的安卓手机是没有问题）物理返回键逐级返回；
如：查看用户详情事件；

toSeeGoodsDetail(event) {
  let that = this;
  let goodsId = event.detail;
  globalInfo.goodsBaseInfo = {
    goodsId: goodsId
  };
  
  wx.navigateTo({
    url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
    fail: function(fail) {
      wx.redirectTo({
        url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
      })
    }
  })
},

4、如果不确定是从什么页面进入的，可以自定义进入路由名称
如：定义 routerName=INDEX将其拼接到路径中；在下级页面根据进入路径名称判断返回哪一个页面（此方法有问题，只能识别上一级别，而且不能识别手机物理返回键；但是可以用于小程序授权登录时，跳回指定页面）

wx.navigateTo({
    url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
    fail: function(fail) {
      wx.redirectTo({
        url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
      })
    }
  })

如有需要请添加本人qq号：1772496409
欢迎鼓励：如果您感觉总结对您有帮助，欢迎打赏
在这里插入图片描述

刺客-Andy

发布了21 篇原创文章 · 获赞 0 · 访问量 2837

私信关注

微信小程序突破页面层级限制

猜你喜欢