我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序如何实现页面跳转功能详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序如何实现页面跳转功能详解

前言

本期我们将学习页面跳转功能,页面跳转功能主要使用小程序的导航API来实现。

实现效果

要从welcome页面跳转到post页面,需要使用事件来响应点击“开启小程序之旅”这个动作。

事件

事件是视图层(wxml)到逻辑层(js)的通信方式。通俗些讲,事件可以让我们在js里处理一些用户在界面上的一些操作,并对这些操作做出反馈。

如何实现事件

  • 在组件上注册事件。注册事件将告诉小程序,我们要监听哪个组件的什么事件。
  • 在js中编写事件处理函数响应事件。监听到事件后,需要编写自己的业务。

如下,我们调用MINA框架中的导航API,来实现页面跳转

welcome.wxml

在按钮组件上添加catchtap的事件绑定,监听点击这个动作。当用户点击这个动作后,将执行一个onTapJump的函数。

welcome.js

思路:

1、在页面的js文件中定义onTapJump的函数。

2、使用redirectTo实现页面跳转。

3、定义跳转成功、失败、完成时的函数,并进行调试。

可以看到,点击“开启小程序之旅”跳转后,控制台出现了“jump success”和“jump complete”,说明跳转成功了。

小程序的导航API

wx.redirectTo

关闭当前页面,跳转到指定页面

我们加入onUnload和onHide进行调试

如下,当我们使用redirectTo函数会发现,页面左上角有一个“小房子”,点击返回后可以再返回到welcome页面。

如下,我们会发现,页面输出“page id onunload”,所以,redirectTo将关闭当前页面并将页面卸载

wx.navigateTo

保留当前页面,跳转到指定页面

如下,当我们使用navigateTo函数会发现,页面左上角有一个返回按钮,点击返回后可以再返回到welcome页面。

navigateTo将执行onHide事件回调,并输出了“page is onhide”。所以,navigateTo仅仅会隐藏当前页面,还可以再次返回到被隐藏的页面。

redirectTo和navigateTo在使用方式上完全相同,他们都接收一个Object对象作为参数。Object对象中最重要的属性是url,它将指定要跳转的页面路径。

wx.switchTap

只能用于跳转到带tabBar的页面,并关闭其他所有非tabBar页面。

Object参数可接受的方法

  • success:跳转页面成功时MINA框架将调用的函数
  • fail:跳转页面失败时MINA框架将调用的函数
  • complete:无论成功或者失败,MINA框架都将调用此函数。

总结

到此这篇关于微信小程序如何实现页面跳转功能详解的文章就介绍到这了,更多相关微信小程序页面跳转功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序如何实现页面跳转功能详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序如何实现页面跳转功能详解

这篇文章主要给大家介绍了关于微信小程序如何实现页面跳转功能的相关资料,包括页面跳转的方式、跳转传参的方法以及页面返回的操作,通过简单的代码示例,帮助读者快速掌握微信小程序页面跳转的基本用法,下面需要的朋友可以参考下
2023-05-13

微信小程序怎么实现页面跳转功能

这篇“微信小程序怎么实现页面跳转功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么实现页面跳转功能”文章吧。实
2023-07-05

如何进行微信小程序的页面跳转

本篇文章为大家展示了如何进行微信小程序的页面跳转,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。我们将创建第二个视图,然后实现从第一个视图到第二个视图的跳转。首先开发第二个视图:微信小程序开发系列七:
2023-06-05

微信小程序实现页面跳转动画效果

微信小程序实现页面跳转动画效果在微信小程序中,页面跳转是一项非常常见的功能。为了提升用户体验,我们可以通过添加动画效果来让页面切换更加流畅和生动。下面我将介绍如何使用微信小程序的API来实现页面跳转动画效果,并附上具体的代码示例。首先,我们
微信小程序实现页面跳转动画效果
2023-11-21

小程序如何实现页面跳转

本篇内容主要讲解“小程序如何实现页面跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序如何实现页面跳转”吧!  1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ u
2023-06-26

微信小程序 页面跳转和数据传递实例详解

微信小程序页面跳转和数据传递实例详解微信小程序提供多种页面跳转方式和数据传递机制,包括wx.navigateTo()、wx.redirectTo()、query参数和setData()。本文详细介绍了这些技术及其实际应用实例,如传递简单数据、复杂数据和页面间数据共享。开发者可根据需求选择最合适的方法,实现流畅的数据传递和提升用户体验。
微信小程序 页面跳转和数据传递实例详解
2024-04-02

微信小程序实现页面导航与传参功能详解

这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握微信小程序如何进行传递参数,感兴趣的朋友可以了解一下
2022-11-13

编程热搜

目录