手把手教你搭建消防安全答题小程序-实现页面间跳转功能

简介: 手把手教你搭建消防安全答题小程序-实现页面间跳转功能

手把手教你搭建知识答题小程序,系列文章前面的三章,分别描写了如何去搭建答题小程序的首页、答题页以及答题结果页。然而,界面设计篇将告一段落了,接下来将过渡到交互功能篇。

软件架构:微信原生小程序+云开发

戳源码地址,获取源码,版本持续迭代中...

项目效果图

首页
image.png
微信小程序“防火安全知识专项学习与竞答”

答题页
image.png
微信小程序“防火安全知识专项学习与竞答”

答题结果页
image.png
微信小程序“防火安全知识专项学习与竞答”

那么问题来了,这几个页面是独立开来的,如何将所搭建的页面串联起来呢?也就是如何实现页面间的跳转?答案是,两个字,路由。

路由的API

首先,让我们来查阅一下微信小程序官方文档提供了5种路由的API,分别是:

1、wx.switchTab(Object object),跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;

2、wx.reLaunch(Object object),关闭所有页面,打开到应用内的某个页面;

3、wx.redirectTo(Object object),关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面;

4、wx.navigateTo(Object object),保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层;

5、wx.navigateBack(Object object),关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages获取当前的页面栈,决定需要返回几层。

我们可以清晰的看到,它们的异同点,我们根据需求来选择使用即可。

项目示例代码

首页的.wxml文件

首页的.js文件
goToTest: function() { wx.navigateTo({ url: '../test/test' }) }
答题页的.wxml文件

答题页的.js文件
nextSubmit: function(){ wx.redirectTo({ url: '../results/results' }) }
答题结果页的.wxml文件

答题结果页的.js文件
toDoWrong(){ wx.redirectTo({ url: '../test/test' }) },
toIndex: function(){ wx.redirectTo({ url: '../index/index' }) },
好了,这样就实现了页面间的跳转功能。是不是很简单。

相关文章
|
27天前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
10天前
|
小程序 开发工具
app跳转微信小程序,使用明文scheme拉起
app跳转微信小程序,使用明文scheme拉起
36 4
|
12天前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
29 5
|
27天前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
|
1月前
|
小程序 前端开发 开发者
|
1月前
|
小程序 开发者
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示,包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码,允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
|
1月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
|
21天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
45 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
21天前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
45 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
1月前
|
存储 小程序 JavaScript