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

## 问题背景

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

## 问题分析

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

相关推荐

  • 不容错过!这6款手机必备软件,绝对实用,建议收藏(手机必备的几款软件)

    相信许多使用安卓手机的朋友们,对系统都多多少少有些怨念,后台占用损耗严重、通知信息日益激增和拍照软件滤镜丑爆等一系列问题,使得不少安卓党也因此转投苹果。 不过还在使用安卓系统的用户…

    科研百科 2023年3月11日
    367
  • 公路设计科研项目有哪些

    公路设计科研项目有哪些 随着经济的发展,交通流量不断增大,道路建设的需求也越来越高。为了保障交通安全,提高交通效率,公路设计科研项目也在不断涌现。本文将介绍一些公路设计科研项目的内…

    科研百科 2025年3月31日
    1
  • IT项目过多,管理太难?NO!因为你还没学会这七招(it项目管理有什么困难)

    来源:计算机世界 今天的CIO会感觉自己就像是马戏团的表演者,同时处理多个项目,还要确保没有一个项目失败。当全世界开始在疫情后恢复过来时,随着远程工作、安全、数字化转型、自动化及其…

    科研百科 2023年12月20日
    149
  • 喜欢看动漫和漫画?用这两个软件试试看(看动漫和漫画的app)

    在当今数字化时代,动漫和漫画已经成为年轻人喜爱的娱乐形式之一。无论是风靡全球的日本动漫还是来自其他国家的精彩作品,这些视觉艺术作品已经融入了人们的生活。为了满足这个庞大的粉丝群体的…

    科研百科 2024年4月29日
    122
  • 修复系统集成项目管理

    系统集成项目管理是软件开发过程中非常重要的一个环节,负责协调开发团队的工作,确保项目按时交付并满足客户需求。然而,在现代软件开发中,由于各种因素的影响,系统集成项目管理往往会出现各…

    科研百科 2025年1月10日
    0
  • 剑桥寒假科研项目

    剑桥寒假科研项目:探索未知领域的无限可能 随着寒假的到来,学生们开始了他们放逐式的寒假生活。在这个短暂的假期里,学生们可以摆脱课本和作业的束缚,放下心中的负担,去探索未知的领域,寻…

    科研百科 2025年2月7日
    0
  • 护理能搞科研项目吗知乎

    护理也能搞科研项目吗? 近年来,随着科技的不断进步,护理领域也开始尝试开展一些科研项目。这些项目旨在提高护理水平,并推动护理研究的发展。那么,护理是否能搞科研项目呢?答案是肯定的。…

    科研百科 2025年4月30日
    1
  • 信息系统项目管理师备考时间

    信息系统项目管理师备考:掌握核心知识点 随着信息技术的快速发展,信息系统项目管理师这个职位也越来越受欢迎。作为一个专业的项目经理,掌握信息系统项目管理的核心知识点是非常重要的。本文…

    科研百科 2024年8月14日
    41
  • 深圳市科技重大专项

    深圳市科技重大专项 深圳市政府近年来积极推动科技创新,尤其在重大专项方面取得了显著成就。作为我国科技创新的重要领域之一,科技重大专项的实施不仅可以推动经济发展,也可以提升国家科技实…

    科研百科 2024年11月9日
    0
  • 用友工程项目管理系统

    用友工程项目管理系统: 让项目管理更高效 随着信息技术的不断发展,项目管理已经成为了现代企业运营中不可或缺的一部分。传统的手工管理方式已经无法满足现代企业对于项目管理的需求,因此,…

    科研百科 2025年1月12日
    2