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

2021年11月22日 阅读数:3
这篇文章主要向大家介绍手把手教你搭建消防安全答题小程序-实现页面间跳转功能,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

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

版本持续迭代中...安全


项目效果图微信

首页架构

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


答题页ide

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


答题结果页ui

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


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


路由的APIspa

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

一、wx.switchTab(Object object),跳转到 tabBar 页面,并关闭其余全部非 tabBar 页面;

二、wx.reLaunch(Object object),关闭全部页面,打开到应用内的某个页面;

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

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

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


咱们能够清晰的看到,它们的异同点,咱们根据需求来选择使用便可。


项目示例代码

首页的.wxml文件
<view catchtap="goToTest">
<button class='cu-btn bg-red round block lg'>开始答题</button>
</view>

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


答题页的.wxml文件
<button bindtap='nextSubmit' class="cu-btn bg-red round lg">下一题</button>

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


答题结果页的.wxml文件
<button bindtap="toDoWrong" hover-class="other-button-hover" class="cu-btn bg-red round lg"> 再答一次 </button>


<button bindtap="toIndex" hover-class="other-button-hover" class="cu-btn line-red round lg margin-top"> 返回首页 </button>


答题结果页的.js文件
toDoWrong(){
wx.redirectTo({
url: '../test/test'
})
},
toIndex: function(){
wx.redirectTo({
url: '../index/index'
})
},


好了,这样就实现了页面间的跳转功能。是否是很简单。