举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > 微信小程序页面路由怎么设置 微信小程序 页面路由

微信小程序页面路由怎么设置 微信小程序 页面路由

2023-04-18 14:20

微信小程序页面路由怎么设置 微信小程序 页面路由

微信小程序页面路由怎么设置

微信小程序页面路由是指在小程序中,用户从一个页面跳转到另一个页面的过程。它是小程序中最基本的功能之一,也是小程序开发中必不可少的部分。

微信小程序的路由设置主要通过 app.json 文件来实现,app.json 文件是整个小程序的入口文件,它包含了整个小程序的全部信息,包括页面路由、导航样式、tabBar 等。

{
  "pages": [ // 页面路由表 
    "pages/index/index",  // 首页 
    "pages/list/list"     // 列表页 
  ],  

  "window": {   // 窗口表单  
    "backgroundTextStyle": "light",   // 背景文字样式,dark 或 light  
    "navigationBarBackgroundColor": "#fff",   // 导航栏背景色  
    "navigationBarTitleText": "WeChat",   // 导航栏标题文字内容  
    "navigationBarTextStyle": "black"     // 导航栏文字样式,black 或 white  
  },

  "tabBar": {      // tabBar 设置  
    "color": "#999",      // tabBar 文字默认颜色  
    "selectedColor": "#000",      // tabBar 文字选中时的颜色  

    list: [{        // tab 项列表,详见 list 属性说明    

      pagePath: 'pages/index/index',        // 页面路径,必填    

      text: 'home',        // tabbar 标题文字    

      iconPath: 'images/home.png',        // icon 路径    

      selectedIconPath: 'images/home_active.png'        // 选中时 icon 的图片地址    

    }, {      

      pagePath: 'pages/list/list',      

      text: 'list',      

      iconPath: 'images/list.png',      

      selectedIconPath: 'images/list_active.png'      

    }]    

  } 																	}

微信小程序 页面路由

页面路由

在小程序中所有页面的路由全部由框架进行管理。

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:

路由方式 页面栈表现
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 页面不断出栈,直到目标返回页
Tab 切换 页面全部出栈,只留下新的 Tab 页面
重加载 页面全部出栈,只留下新的页面

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

页面栈示例:页面栈遵循先进后出的规则,当前也在最上面。

路由方式

对于路由的触发方式以及页面生命周期函数如下:

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面 onLoad, onShow
打开新页面 调用 API wx.navigateTo
使用组件 <navigator open-type="navigateTo"/>
onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo
使用组件 <navigator open-type="redirectTo"/>
onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack
使用组件<navigator open-type="navigateBack">
用户按左上角返回按钮
onUnload onShow
Tab 切换 调用 API wx.switchTab
使用组件 <navigator open-type="switchTab"/>
用户切换 Tab
各种情况请参考下表
重启动 调用 API wx.reLaunch
使用组件 <navigator open-type="reLaunch"/>
onUnload onLoad, onShow

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):

当前页面 路由后页面 触发的生命周期(按顺序)
A A Nothing happend
A B A.onHide(), B.onLoad(), B.onShow()
A B(再次打开) A.onHide(), B.onShow()
C A C.onUnload(), A.onShow()
C B C.onUnload(), B.onLoad(), B.onShow()
D B D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从转发进入) A D.onUnload(), A.onLoad(), A.onShow()
D(从转发进入) B D.onUnload(), B.onLoad(), B.onShow()

Tips:

  • navigateToredirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。


阅读全文
以上是名动网为你收集整理的微信小程序页面路由怎么设置 微信小程序 页面路由全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们