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

2次阅读

共计 1313 个字符，预计需要花费 4 分钟才能阅读完成。

手把手教你搭建常识答题小程序，系列文章后面的三章，别离刻画了如何去搭建答题小程序的首页、答题页以及答题后果页。然而，界面设计篇将告一段落了，接下来将过渡到交互性能篇。

软件架构：微信原生小程序 + 云开发
戳源码地址，获取源码，版本继续迭代中 …

我的项目效果图
首页

答题页

答题后果页

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

路由的 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 文件
<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'})
 },

好了，这样就实现了页面间的跳转性能。是不是很简略。

正文完