微信小程序开发--路由切换,页面重定向

1、页面切换传参,参数读取 

  1.1  wx.navigateTo(object)

  功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到当前页面。

复制代码

wx.navigateTo({     //当前页面对应的JS文件内 控制模板
  url: 'test?id=1'     //需要切换到的页面路劲,此处为相对路劲,id为传递的参数
})


//test.js         //test页面对应的JS文件,名字必须相同
Page({    
  onLoad: function(option){     //通过路由传递过来的参数,只能在onLoad方法内收到,option就是路由参数的一个组合对象
    console.log(option.id)
  }
})    

复制代码

  1.2   wx.navigateBack(object)

  功能:关闭当前页面,与 wx.navigateTo({ })功能相对。返回上一页面或多级页面。可通过 getCurrentPages() 获取当前

### 微信小程序页面切换实现方法教程 #### 导航与跳转基础 微信小程序支持多种页面间的导航和跳转操作,这些功能对于创建良好的用户体验至关重要。常见的页面跳转方式有`navigateTo`, `redirectTo`, `switchTab` 和 `reLaunch`四种基本模式[^2]。 - **navigateTo**: 打开新的页面并将其加入栈顶,原页面保持不动; - **redirectTo**: 关闭当前页面重定向至目标页面- **switchTab**: 跳转到带有tabBar的指定页面- **reLaunch**: 清除所有历史记录并将应用重新启动到特定页面; 每种方式适用于不同的场景需求,在实际项目中应根据具体情况进行选择。 #### 使用Navigator组件进行页面间通信 除了上述API调用外,还可以借助内置的 `<navigator>` 组件来完成页面之间的链接工作。此标签允许开发者更灵活地设计UI布局的同时也简化了跨屏传递参数的过程。 ```html <navigator url="/pages/detail/detail?id=123">前往详情页</navigator> ``` 以上代码片段展示了如何通过设置URL属性值的方式向下一个屏幕发送额外的数据信息。 #### 参数化路由处理 为了增强程序逻辑性和可维护性,建议采用参数化的形式定义各个视图对应的路径规则。例如: ```json { "pages": [ "index/index", "logs/logs", "product/product?category={categoryId}&item={itemId}" ] } ``` 这里以JSON格式列出了几个可能存在的入口地址,并且最后一个例子包含了动态部分用于区分不同商品类别下的具体内容展示[^4]。 #### 返回时携带数据 有时需要从子页面带回某些反馈给父级页面的信息,则可通过全局事件监听器或者本地存储等方式达成目的。一种较为推荐的做法是在wx.navigateBack()函数内部附加delta参数以及data字段来达到这一效果。 ```javascript // 子页面内执行如下命令关闭自身并向来源处提交结果 wx.navigateBack({ delta: 1, success: function () { var pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.setData({ receivedData: 'some value' }); } }); ``` 综上所述,掌握了以上几种核心技能之后便可以在微信环境中轻松驾驭各类复杂的浏览行为,进而打造出更加精致的小应用程序体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值