微信小程序之页面路由知识点总结

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于页面路由的相关内容,路由是指分组从源到目的地时,决定端到端路径的网络范围的进程,下面就一起来看一下,希望对大家有帮助…

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于页面路由的相关内容,路由是指分组从源到目的地时,决定端到端路径的网络范围的进程,下面就一起来看一下,希望对大家有帮助。

微信小程序之页面路由知识点总结

什么是路由?

路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由,根据路由规则(路径)从一个页面跳转到另一个页面的的规则。

一、哪些会触发页面跳转

小程序启动,初始化第一个页面

跳转新页面,调用wx.navigateTo或者<navigator />

页面重定向,调用wx.redirectTo或者<navigator />

页面返回,调用wx.navigateBack,页面左上角返回按钮

wx.switchTab实现tabBar页面切换

Tips:所有页面都必须在app.json中注册,例如

{"pages":["pages/index/index","pages/classification/classification","pages/start/start","pages/detail/detail",]}

二、微信小程序中实现页面路由的几种方式

wx.navigateTo,保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面

wx.navigateTo({url:'pages/detail/detail',success:function(res){},…})

wx.redirectTo,关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

wx.redirectTo({url:'pages/detail/detail',success:function(res){},…})

<navigator />组件跳转方式

<navigatorurl=pages/detail/detail">跳转</navigator>

wx.navigateBack返回上一页

wx.navigateBack({delta:1,})

Tips:delta为1时表示返回上一页,为2时表示上上一页,以此类推;如果dalta大于已打开的页面总数,则返回到首页。返回后,元界面会销毁

wx.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

app.json:

{"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首页",},{"pagePath":"pages/car/car","text":"购物车",},…}}

index.js:

wx.switchTab({url:'pages/car/car'})

三、小程序路由实现原理

小程序路由是通过自己实现的一个栈(先进先出)来管理的。

当我们通过wx.navigateTo或者<navigator/>从A页面跳转到B页面时。路由栈的变化是这样的。

微信小程序之页面路由知识点总结

路由栈刚开始只存有页面A,当使用wx.navigateTo跳转后,页面B推入路由栈并展示到界面上,页面A隐藏。

当我们使用wx.navigateBack返回时

微信小程序之页面路由知识点总结

那么wx.redirectTo与wx.navigateTo有什么区别呢?

假如当前已经在二级页面B上,我们使用wx.redirectTo跳转到C页面,其过程是这样的。

微信小程序之页面路由知识点总结

如当前已经在二级页面B上,我们使用wx.redirectTo跳转到C页面,其过程是这样的。

页面B会被pop出,然后C页面再push进入栈,这个时候栈中还是只有两个页面。

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/27781.html;
(0)
上一篇 2022年11月27日 下午4:17
下一篇 2022年11月27日 下午4:18

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部