小程序开发之路由跳转

页面之间的跳转,无论在什么项目中,PC,APP,公众号还是其他项目中都需要用到的一个东西,小程序给我们带来了很多自己的路由跳转,完全够我们用,但是种类很多,什么时候该用什么跳转方式呢?
  • navigator
    • target:在那个目标上发生路由跳转,不常用
    • url:跳转的地址,可将页面需要传递的参数伴随url发送过去
    • hover-class:String,为none时,点击跳转无任何样式,可以通过添加类名来实现跳转点击时的样式
    • open-type:跳转的方式
      • navigate:默认跳转方式对应js中wx.navigateTo,或者 wx.navigateToMiniProgram跳转后可返回上级页面
      • navigateBack:跳转到上一个页面,可返回上级页面
      • switchTab:小程序主页面底部导航的跳转,对应js中wx.switchTab,跳转后可返回上级页面
      • reLaunch:关闭当前页面打开新的页面,跳转后不能返回上级页面
      • redirectTo: 页面重定向,跳转后可返回上级
      • exit:退出小程序,只有当target=" miniProgram"时生效。
注:页面之间的来回跳转,会在内存中占据一定的空间,叫做栈,当来回跳转达到10次时,下次的跳转将会失效。
下面张图非常有意思:
 
### 微信小程序页面路由跳转实现 在微信小程序中,页面间的路由跳转主要依赖于特定的API函数以及配置文件中的路径设定。这些功能允许开发者灵活地管理应用内的页面流转。 #### 使用 `wx.navigateTo` 进行页面跳转 为了保留当前页面并打开新页面,可以使用 `wx.navigateTo` 方法。此方法适用于非TabBar页面之间的切换[^4]: ```javascript // 保留当前页面,跳转到目标页面 wx.navigateTo({ url: '/pages/targetPage/targetPage?id=1', }) ``` 这里的关键在于指定要跳转的目标页面URL地址,并可以通过查询字符串传递参数给下一个页面。 #### 利用 `<navigator>` 组件触发跳转 除了通过JavaScript代码调用API外,还可以利用内置的 `<navigator>` 组件来创建可点击链接或按钮,从而简化用户的交互过程: ```html <navigator open-type="navigate" url="/pages/detail/detail">查看详情</navigator> ``` 这使得HTML结构更加直观易懂,同时也减少了额外编写事件处理逻辑的需求。 #### 处理返回操作 如果想要关闭当前页面并回退至上一页面,则应采用 `wx.navigateBack` 函数: ```javascript wx.navigateBack() ``` 该命令会按照历史记录栈顺序依次弹出最近访问过的页面直到满足条件为止。 #### 配置 pages.json 文件 最后值得注意的是,在项目根目录下的 `app.json` 或者单独模块化的 `page.json` 中也需要正确定义各个页面及其对应的路径信息[^2]。这样做的好处是可以集中化管理整个应用程序内部所有的视图资源位置关系,方便后续维护与扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值