微信小程序开发页面路由和跳转(微信小程序开发页面路由和跳转怎么设置)

## 问题背景

客户端和前端开发过程中,页面之间互相跳转是十分常见的场景,本文将介绍微信小程序开发过程是如何实现页面路由和跳转的。

## 问题分析

1、页面跳转相关

小程序启动,初始化第一个页面(默认是app.json中pages配置页面中的第一个页面)

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

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

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

tabBar页面切换,调用wx.switchTab实现

plus: 所有页面都必须在app.json中注册

## 问题解决

话不多说,直接上代码

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

/* navigateTo进行页面跳转 */ router1: function () { wx.navigateTo({ url: '/pages/index2/index', success: function(res) { console.log('router1 success'); }, fail: function(res) { console.log('router1 fail'); console.log(res) } }) },

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

/* redirectTo进行页面跳转 */ router2: function () { wx.redirectTo({ url: '/pages/index3/index', success: function(res) { console.log('router3 success'); }, fail: function(res) { console.log('router3 fail'); console.log(res) } }) },

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

/* switchTab进行页面跳转 */ router3: function () { wx.switchTab({ url: '/pages/index4/index' }) }

(4)wx.navigateBack返回上一页

/* 回到上个页面 */ back_before: function () { wx.navigateBack({ delta: 1, }) },

对应的app.json配置文件可参考:

{ "pages":[ "pages/index/index", "pages/index2/index", "pages/logs/logs", "pages/index3/index", "pages/index4/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json", "tabBar": { "list": [ { "pagePath": "pages/index3/index", "text": "index3"}, { "pagePath": "pages/index4/index", "text": "index4"} ] }}

## 问题总结

本文初步介绍了微信小程序开发过程是实现页面路由和跳转的几种方案,有兴趣的同学可以进一步深入研究。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年5月10日 上午9:16
下一篇 2023年5月10日 上午9:26

相关推荐

  • 大学项目基金管理系统

    大学项目基金管理系统 随着现代高等教育的不断发展,大学项目基金管理也成为了一个日益重要的话题。项目基金是大学用于资助科研项目和研究生培养的重要资源,其管理需要高效、规范、透明的系统…

    科研百科 5天前
    0
  • 央企党组织属地化管理

    央企党组织属地化管理 随着中国经济的快速发展,央企已成为中国经济发展的重要力量。然而,央企党组织的属地化管理一直是央企管理中的一个难题。为了更好地推动央企的发展,加强党组织的管理,…

    科研百科 2024年10月14日
    27
  • 遂宁:党建引领、协同共治,画出小区治理最大“同心圆”(党建引领小区治理标语)

    来源:四川日报-川观新闻 “三无小区”装上了门禁 川观新闻记者 王若晔 “现在小区环境越来越好,生活也越来越丰富多彩了。” 时近立冬,虽然天气一天天变冷,可遂宁船山区正兴街社区梨园…

    科研百科 2024年7月6日
    75
  • 重大科研项目如何区分

    重大科研项目如何区分 重大科研项目是推动科技进步和发展的重要力量。然而,如何区分不同类型的重大科研项目是一个值得重视的问题。以下是一些常见的区分方法: 1. 资金规模 重大科研项目…

    科研百科 2025年3月29日
    1
  • 解构与重塑:建设工程合同纠纷审判思维与方法(第2版) 周利明pdf

    本书的亮点有以下三个:一是将工程价款争议案件分为静态审查与动态审查的九个步骤,各步骤之间存在严密的逻辑递进关系,所有案件均可通过该方法予以支解、拆分并分别审查、厘清思路,此为笔者所…

    科研百科 2022年8月6日
    1.2K
  • 科研项目申请书的概念

    科研项目申请书的概念 科研项目申请书是一份正式的文档,用于介绍一项科研项目的基本信息,包括研究背景、研究目的、研究方法、研究内容、预期成果和研究团队等。一份好的科研项目申请书对于科…

    科研百科 2025年5月21日
    1
  • 项目管理系统施工

    项目管理系统施工 项目管理系统是一种能够帮助项目经理和团队成员高效地管理项目的工具。通过使用项目管理系统,我们可以更好地控制项目进度,预算和资源,提高项目的成功率和质量。本文将介绍…

    科研百科 2024年8月17日
    35
  • 科研项目课题基础

    科研项目课题基础 科研项目课题基础是科研项目的起点,是项目开展的基础。它包括确定研究目标、研究内容、研究方法、研究步骤和研究结果等方面。在科研项目课题基础确定之后,研究人员就可以开…

    科研百科 2025年2月20日
    0
  • 地下煤制气科研项目

    地下煤制气科研项目 随着能源需求的不断增加,地下煤制气项目成为了一个备受关注的科研项目。地下煤制气项目是一种利用煤炭进行制气的新方法,它可以有效地减少对环境的影响,并且具有更高的能…

    科研百科 2025年4月4日
    1
  • 科研项目 专利

    科研项目与专利 科研项目和专利是学术界和工业界中都非常重要的概念。科研项目是指为了获得新知识或改进现有技术而进行的研究项目,而专利则是指一种权利,允许特定公司或个人在未经授权的情况…

    科研百科 2025年2月10日
    0