小程序页面路由整理

合集 - 小程序(2)

1.微信小程序 登录获取 openid 和 session_key Go服务2024-12-19

2.小程序页面路由整理02-17

收起

小程序跳转功能以及参数传递

前言

最近在做小程序开发时，遇到了一些问题，比如页面跳转以及页面传参，这里总结一下，方便以后查阅。

-、几种页面跳转方式

• wx.switchTab
• wx.navigateTo
• wx.redirectTo
• wx.reLaunch
• wx.navigateBack
• 自定义路由

1、wx.switchTab 跳转 tabBar 定义的页面
使用示例
app.json 配置

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

代码示例

wx.switchTab({
    url: '/pages/index/index', // 注意路径必须为 tabBar 中的路径
    success: function () {  // 调用成功回调函数
        console.log('跳转成功')
    },
    fail: function () {  // 调用失败回调函数
        console.log('跳转失败')
    },
    complete: function () {  // 调用完成回调函数
        console.log('跳转完成')
    }
})

2、wx.navigateTo 跳转到应用内的某个页面，但是不能跳到 tabbar 页面
使用示例
app.json 配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ]
}

代码示例
a页面 JS 文件

wx.navigateTo({
    url: '/pages/logs/logs?id=1', // 跳转路径 ?后为参数
    success: function () {  // 调用成功回调函数
        console.log('跳转成功')
    },
    fail: function () {  // 调用失败回调函数
        console.log('跳转失败')
    },
    complete: function () {  // 调用完成回调函数
    onsole.log('跳转完成')
    }
})

b页面 JS 文件

Page({
    onLoad: function (options) {  // options 为跳转路径携带的参数
        console.log(options.id)  // 输出 1
    }
})

3、wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
使用示例
app.json 配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ]
}

代码示例
a页面 JS 文件

wx.redirectTo({
    url: '/pages/logs/logs?id=1', // 跳转路径 ?后为参数 非 tabBar 页面
    success: function () {  // 调用成功回调函数
        console.log('跳转成功')
    },
    fail: function () {  // 调用失败回调函数
        console.log('跳转失败')
    },
    complete: function () {  // 调用完成回调函数
        console.log('跳转完成')
    }
})

b页面 JS 文件

Page({
    onLoad: function (options) {  // options 为跳转路径携带的参数
        console.log(options.id)  // 输出 1
    }
})

4、wx.reLaunch 关闭所有页面，打开到应用内的某个页面。但是不允许跳转到 tabbar 页面
使用示例
app.json 配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ]
}

代码示例
a页面 JS 文件

wx.reLaunch({
    url: '/pages/logs/logs?id=1', // 跳转路径 ?后为参数 非 tabBar 页面
    success: function () {  // 调用成功回调函数
        console.log('跳转成功')
    },
    fail: function () {  // 调用失败回调函数
        console.log('跳转失败')
    },
    complete: function () {  // 调用完成回调函数
        console.log('跳转完成')
    }
})

b页面 JS 文件

Page({
    onLoad: function (options) {  // options 为跳转路径携带的参数
        console.log(options.id)  // 输出 1
    }
})

5、wx.navigateBack 关闭当前页面，返回上一页面或多级页面。可以返回多级页面，返回的页面由开发者调用 navigateTo 或 redirectTo 而来
使用示例
a页面 JS 文件

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})
// 此处是C页面
const pageList = getCurrentPages() // 获取当前页面栈, 通过 pageList 长度判断返回页面层级
wx.navigateBack({
    delta: 1, // 返回的页面层级
    success: function () {  // 调用成功回调函数
        console.log('跳转成功')
    },
    fail: function () {  // 调用失败回调函数
        console.log('跳转失败')
    },
    complete: function () {  // 调用完成回调函数
        console.log('跳转完成')
    }
})

6.自定义路由
wx.router
app.json 配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "renderer": "webview",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
}

代码示例
a页面 JS 文件

// 定义自定义效果，从右侧推入
const {windowWdith, screenHeight} = wx.getWindowInfo()
const slideRouteBuilder = (customRouteContext) => {
  const { primaryAnimation } = customRouteContext
  const handlePrimaryAnimation = () => {
    'worklet'
    const transX = windowWidth * (1 - primaryAnimation.value)
	   return {
		   transform: `translateX(${transX}px)`,
	   }
  }
  return {
    handlePrimaryAnimation
  }
}

wx.router.addRouteBuilder('slide', slideRouteBuilder)

// 使用自定义路由
wx.navigateTo({
  url: 'xxx',
  routeType: 'slide'
})