手把手教你搭建消防安全答题小程序-实现页面间跳转功能
手把手教你搭建知识答题小程序,系列文章前面的三章,分别描写了如何去搭建答题小程序的首页、答题页以及答题结果页。然而,界面设计篇将告一段落了,接下来将过渡到交互功能篇。
软件架构:微信原生小程序+云开发
戳源码地址,获取源码,版本持续迭代中...
项目效果图
首页
文章图片
答题页
文章图片
答题结果页
文章图片
那么问题来了,这几个页面是独立开来的,如何将所搭建的页面串联起来呢?也就是如何实现页面间的跳转?答案是,两个字,路由。
路由的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'
})
},
【手把手教你搭建消防安全答题小程序-实现页面间跳转功能】好了,这样就实现了页面间的跳转功能。是不是很简单。
推荐阅读
- 六步搭建ES6语法环境
- 社会教你顽强,而不是教你失望
- 碎片化阅读,四步教你建立自己的知识体系
- 8种搭配,教你将铅笔裤穿的更有型!
- (1)redis集群原理及搭建与使用(1)
- 桁架搭建有什么价值()
- VM|VM ware 的 harbor 私有仓库搭建 (Ubuntu16.04)
- PHP开发-Mac搭建ThinkPHP5.0
- Python|Win10下 Python开发环境搭建(PyCharm + Anaconda) && 环境变量配置 && 常用工具安装配置
- sentry搭建错误监控系统(二)