【微信小程序】微信小程序层级跳转限制

前面博文上面提到微信小程序有三种常见的跳转方式 navigateTo,redirectTo 和 reLaunch

10层的限制只是针对navigateTo ,redirectTo 和reLaunch不受此限制。

navigateTo :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

redirectTo :关闭当前页面,跳转到应用内的某个页面。

reLaunch: 关闭所有页面,打开到应用内的某个页面

思路:通过getCurrentPages()来获取页面栈数组,然后通过判断数组当中判断是否已存有当前页面然后做出相应的跳转就可以避免navigateTo跳转的10层限制了!

 首先我们先建一个js文件  命名随意

// navroter.js
module.exports = {
 
    navigateTo(object) {
        if (getCurrentPages().length > 9) {
            this.redirectTo(object)
            // this.reLaunch(object)
        } else {
            wx.navigateTo(object)
        }
    },
    // 其他跳转不处理
    navigateBack(object) {
        wx.navigateBack(object)
    },
 
    switchTab(object) {
        wx.switchTab(object)
    },
 
    redirectTo(object) {
        wx.redirectTo(object)
    },
 
    reLaunch(object) {
        wx.reLaunch(object)
    },
 
}

 然后再把navroter.js文件引入到全局app.js里面 

// app.js
// 引入路径于实际为准
import navroter from './utils/navroter.js'

App({
  onLaunch: function (e) {},  
  onShow: function (options) {},
  globalData: {},
  navroter,
})

 具体代码如下(仅供参考,具体以实际情况为准):


var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    domainImg: config.DOMAIN_IMGS,
    list: [],
    isFirst: false, //是否是第一次进入
  },
  // 跳转下一个页面
  listItemTap:function(e){
    var that = this
    app.navroter.navigateTo({url:下个页面路径可在app.json文件当中取})
  },
  onLoad: function(options) {
    wx.hideShareMenu()
  },
  /*** 生命周期函数--监听页面初次渲染完成*/
  onReady: function() {

  },
  /*** 生命周期函数--监听页面显示*/
  onShow: function() {

  },
  /*** 生命周期函数--监听页面隐藏*/
  onHide: function() {

  },
  /*** 生命周期函数--监听页面卸载*/
  onUnload: function() {

  },
  /*** 页面相关事件处理函数--监听用户下拉动作*/
  onPullDownRefresh: function() {

  },
  /*** 页面上拉触底事件的处理函数*/
  onReachBottom: function() {

  },
  /*** 用户点击右上角分享*/
  onShareAppMessage: function() {

  }
})

以上就是小程序解决层级嵌套限制10层的方法,有待优化。

============仅做自备笔记==============

你可能感兴趣的:(微信小程序)