当前位置: 首页 > Web前端 > HTML

一步步教你搭建消防小知识问答小程序-实现页面跳转功能

时间:2023-03-28 14:06:20 HTML

教你搭建知识问答小程序答题页。不过界面设计篇会告一段落,接下来会过渡到交互功能篇。软件架构:微信原生小程序+云开发戳源码地址,获取源码,版本不断迭代中……项目渲染首页的答题页和答题结果页那么问题来了,这些页面是独立的,如何整合构建的页面串联起来呢?即如何实现页面间的跳转?答案是,两个字,路由。路由API首先我们查看微信小程序官方文档,提供了5个路由API,分别是:1.wx.switchTab(Objectobject),跳转到tabBar页面,关闭所有其他非tabBar页面;2、wx.reLaunch(Objectobject),关闭所有页面,打开到应用中的某个页面;3、wx.redirectTo(Objectobject),关闭当前页面,跳转到应用中的某个页面。但是不允许跳转到tabbar页面;4.wx.navigateTo(Objectobject),保持当前页面,跳转到应用中的某个页面。但是不能跳转到tabbar页面。使用wx.navigateBack返回到原始页面。小程序中的页面栈最多可以有十层;5.wx.navigateBack(Objectobject),关闭当前页面并返回上一页或多级页面。可以通过getCurrentPages获取当前页面栈来判断需要返回多少层。我们可以清楚地看到它们的相同点和不同点,可以根据需要选择使用它们。项目示例代码首页.wxml文件开始答题首页的.js文件goToTest:function(){wx.navigateTo({url:'../test/test'})},答题页的.wxml文件NextQuestion答案页.js文件nextSubmit:function(){wx.redirectTo({url:'../results/results'})},答题结果页的.wxml文件"toIndex"hover-class="other-button-hover"class="cu-btnline-redroundlgmargin-top">返回首页.js文件toDoWrong(){wx.redirectTo({url:'../test/test'})},toIndex:function(){wx.redirectTo({url:'../index/index'})}好了,这样就实现了页面跳转的功能。是不是很简单。