【微信小程序】实现页面跳转功能

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

1d745ec2d2ce424dbbf75c4bc57840cb.gif


🏆今日学习目标:第十三期——实现页面跳转功能

😃创作者:颜颜yan_

✨个人主页:颜颜yan_的个人主页

⏰预计时间:20分钟

🎉专栏系列:我的第一个微信小程序


前言


哈喽大家好,本期是微信小程序专栏第十三期,本期我们将学习页面跳转功能,页面跳转功能主要使用小程序的导航API来实现。


注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~


实现效果


e128ac20dc244d74811b7f0a9ba12c34.gif


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


事件


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


如何实现事件


1.在组件上注册事件。注册事件将告诉小程序,我们要监听哪个组件的什么事件。

2.在js中编写事件处理函数响应事件。监听到事件后,需要编写自己的业务。


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


welcome.wxml


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


37dc5a514414455587fdf026297508bf.png


welcome.js


思路:


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

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

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


dd401720940544feaf10cd66f745894a.png


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


c4cc967a822f4493a2fe3177b450b89c.png


小程序的导航API


wx.redirectTo


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


我们加入onUnload和onHide进行调试


72183dc921f243c89a1962331d3e47d2.png


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


a655a9ba8cd74a899034043699a5beec.png

3fe13cb0f28945fea0aa72d07131242b.png


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


c4c2f7dee98b4df3a58911589f2c7c20.png


wx.navigateTo


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


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


de344c5801dc4a419410f052dd31006f.png

95019e9f01054737919918b1bbd5d1b4.png


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


04789384ea0d4502882569a754fde677.png


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

wx.switchTap


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


Object参数可接受的方法


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


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏,持续更新呢~

咱们下期再见~


86001fc8f74c4131b1e0a14973067897.gif

相关文章
|
10天前
|
移动开发 小程序 前端开发
几千怎么部署搭建校园服务平台,校园圈子论坛系统小程序搭建,校园系统源码,多种功能一体的综合性校园平台
校园圈子论坛是一款集交友、二手市场、聊天等多功能于一体的校园社交平台,支持App、小程序和H5三端交付。学生可处理闲置物品、结识新朋友,通过算法匹配兴趣相投的用户。平台提供分享邀请机制,支持自动绑定推荐关系,并设有奖励机制。开发过程中需注重数据安全与系统稳定性,确保功能兼容及性能优化。
52 5
|
10天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
73 3
|
13天前
|
小程序 安全 搜索推荐
陪玩小程序的搭建解析与功能需求
陪玩小程序是为玩家提供专业陪玩服务的应用,嵌入社交或游戏平台,具备智能匹配、实时聊天、预约服务等功能,支持便捷高效的游戏体验。源码交付时需提供详细文档、技术支持及定制开发服务,确保客户能顺利维护和升级。选择陪玩小程序时应关注功能需求、用户体验、安全性和成本效益,以确保最佳使用效果。
37 0
|
10天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
2月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
3月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
116 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
3月前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
31 1
|
4月前
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制,并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
切西瓜法实现微信抢红包功能
|
5月前
|
小程序 JavaScript
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
这篇文章讲解了微信小程序中页面跳转的方法,包括使用按钮点击事件和调用方法实现跳转,以及推荐使用`this.pageRouter.navigateTo`代替`wx.navigateTo`的方式。
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
|
4月前
|
人工智能 前端开发 JavaScript
MacTalk 测评通义灵码,实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。