小程序跳转页面几种方式

￡神魔★判官ぃ 2022-12-11 07:29 273阅读 0赞

**需求：** 从home.wxml跳转到detail.wxml页；

### 一：js实现 ###

1.  navigateTo （有返回键，不可以跳转到tabBar页面）

//保留当前页面，跳转到应用内的某个页面
    wx.navigateTo({ 
      url: '/pages/detail/detail?id=1'
    })

1.  switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）

wx.switchTab({   
          url: `/pages/detail/detail`,
        })

1.  reLaunch (跳转任意页面， 没有返回， 有 首页 按钮  
    )

wx.reLaunch({ 
          url: '/pages/detail/detail'
        })

1.  redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮  
    )

wx.redirectTo({ 
           url: `/pages/detail/detail`,
        })

1.  navigateBack (应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级  
    )

wx.navigateBack({ 
           delta:1
        })

### 区别： ###

1.  wx.navigator是开启一个新页面，那个页面是隐藏了,原页面是onHide,所以是可以返回的，但是返回之后，跳转的页面就unload了
2.  wx.redirecTo是当前页面替换成新的页面，所以返回不去onunload(页面被卸载)
3.  tabBar无论跳哪个页面都是onHide

### 传参注意： ###

跳转页面传递数组参数必须序列化

let  arr=[1,2,3,4,5]
          category = JSON.stringify(arr)        //取子集分类 数组传递需要序列化
         wx.navigateTo({ 
             url: `/pages/detail/detail/?cate= ${ category} `,
            })

跳转页面传递数组参数必须序列化

onLoad: function (options) { 
      let   category = JSON.parse(options.cate);
     console.log(category)
    }

参数值过长接收时候内容不全得问题

//传参
    wx.navigateTo({ //wx.redirectTo、wx.reLaunch
        url: '/pages/details/details?id=' + encodeURIComponent(id)
        })

//接收
    onLoad(options) { 
        var id = decodeURIComponent(options.id);
    }

### 二：navigator组件实现 ###

1.  `<navigator url = "/pages/details/details">跳转到新页面</navigator>`
2.  `<navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>`
3.  `<navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>`