必威官网手机版首页微信小程序之页面路由,30个创意十足的404页面设计欣赏

一个超赞的404错误页面,总是能够让您在网站里迷路的时候给予归属感,尽可能的减少挫败感。设计师会在这个页面花很多心思,以致于我们被那些创意打动、被那些设计细节感动。这篇文章收集了30个有趣的404页面,以便为您接下来可能遇到的工作汲取灵感。

小程序的路由可以理解为:根据路由规则(路径)从一个页面跳转到另一个页面的规则。

本章我们主要谈一谈页面之间的路由怎么使用

如果你有更优秀的页面推荐,可以直接在评论留言:)

一、微信小程序中页面跳转的方法:

(1)wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
示例代码:

wx.navigateTo({
    url:'test?id=1'//实际路径要写全
})

//test.js
Page({
  onload:function(option){
    console.log(option.query)
  }
})

(2)wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用的某个页面。
示例代码:

wx.redirectTo({
  url:'test?id=1'
})

(3)wx.switchTab(OBJECT)
跳转到tabBar页面,并关闭其他所有非tabBar页面
示例代码:

{
  'tabBar': {
      'list': [{
        'pagePath':'index',
        'test':'首页' 
      },{
        'pagePath':'other',
        'test':'其他'
      }]
  }
}

wx.switchTab({
  url:'/index'
})

(4)wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈,决定需要返回几层。
示例代码:

//注意:调用navigateTo跳转时,调用该方法的页面会被加入堆栈,而redirectTo方法则不会。
//此处是A页面
wx.navigateTo({
  url:'B?id=1'
})

//此处是B页面
wx.navigateTo({
    url:'C?id=1'
})

//在C页面内navigateBack,将返回A页面
wx.navigateBack({
    delta:2
}) 

(5)使用<navigator/>标签实现页面跳转
可以用open-type属性指定页面跳转方式,可选值‘navigate’、’redirect’、’switchTab’,对应于wx.navigateTo、wx.redirectTo、wx.switchTab功能
示例代码:

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="navigate?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
<navigator url="index" open-type="switchTab" hover-class="navigator-hover">切换</navigator>

路由方式

对于路由的触发方式以及页面生命周期函数如下:

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面 onLoad, onSHow
打开新页面 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/> onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/> onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮 onUnload onShow
Tab 切换 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab 各种情况请参考下表
重启动 调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/> onUnload onLoad, onShow

页面跳转触发的生命周期,其实还是存在问题的,并非官方所说的那样。

SwitchTab的跳转BUG首页跳转到子页面后,在子页面上使用:<navigator type='switchTab' url="/pages/index/index" > <view>跳转首页</button></navigator>这种方式有问题,解决的办法是通过JS来实现跳转,代码如下:<view > <button bindtap="backIndex" type="default">返回主页</button> </view>跳转成功后,重新调用onload方法,JS代码如下:backIndex:function(){ wx.switchTab({ url: '/pages/index/index', success: function  { var page = getCurrentPages; if (page == undefined || page == null) return; page.onLoad }友情提醒:页面路由的其他基础知识请看官方文档 :https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html

brandstack

二、如何正确使用页面跳转

官方规定小程序最多只能有五个页面同时存在,意思是在不关闭页面的情况下,最多新开五个页面,页面深度为5

  1. 对于可逆操作,使用wx.navigateTo,比如从首页跳转到二级页面,从二级页面返回是不需要重新渲染页面
  2. 对于不可逆操作,使用wx.redirectTo,比如用户登录成功后,关闭登录页面,不能返回到登录界面。
  3. 对于一些介绍性等不常用页面,使用wx.redirectTo或wx.navigateBack
  4. 对于类似九宫格、列表项,使用<navigator />跳转
  5. 不要在首页使用wx.redirectTo,这样会导致应用无法返回首页
  6. 简化需求、简化流程;核心功能在两三个页面完成便是张小龙追求【小而美】的体现

页面栈

页面栈以栈的形式维护页面与页面之间的关系;小程序提供了getCurrentPages()函数获取页面栈,第一个元素为首页,最后一个元素为当前页面。1、使用wx.navigateTo每新开一个页面,页面栈大小加1,直到页面栈大小为5为止;

必威官网手机版首页 11.png

2、使用wx.navigateTo重复打开界面

必威官网手机版首页 22.png上图中,假如使用wx.navigateTo从四级页面跳转到二级页面,此时会在页面栈顶添加一个与二级页面初始状态一样的界面,但两个页面状态是独立的。页面栈大小会加1,如果页面栈大小为5,则wx.navigateTo无效使用wx.redirectTo重定向必威官网手机版首页 33.png

上图中,假如使用wx.redirectTo从四级页面重定向到二级页面,此时会将关闭四级页面,并使用二级页面替换四级页面,但两个页面状态是独立的。此时的页面栈大小不变,请注意和使用wx.navigateTo的区别。使用wx.navigateBack返回

必威官网手机版首页 44.png

上图中,假如当前页面为五级页面,使用wx.navigateBack:

当delta为1,关闭五级页面,当前页面为四级页面,页面栈大小减1;当delta为2,关闭依次五级页面和四级页面,当前页面为三级页面,页面栈大小减2;以此类推,直到栈底为止,也就是首页。以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack页面出入栈操作对页面栈的影响,平时不一定用得上,但是还是有必要了解背后的原理。

通过学习页面栈,你至少可以知道:

小程序运行时你可以获取到已经初始化了的页面的属性和方法动态获取当前页面路径页面自动跳转你可以通过getCurrentPages()获取页面page对象,执行非当前页js里的方法

必威官网手机版首页 5

三、页面栈

页面栈以栈(先进后出)的形式维护页面与页面之间的关系;
小程序提供了getCurrentPages()函数获取页面栈,第一个元素为首页,最后一个元素为当前页面。

1、使用wx.navigateTo每新开一个页面,页面栈大小加1,直到页面栈大小为5为止;

必威官网手机版首页 6

2、使用wx.navigateTo重复打开页面

必威官网手机版首页 7

上图中,假如使用wx.navigateTo从四级页面跳转到二级页面,此时会在页面栈顶添加一个与二级页面初始状态一样的界面,但两个页面状态是独立的。页面栈大小会加1,如果页面栈大小为5,则wx.navigateTo无效
使用wx.redirectTo重定向

3、使用wx.redirectTo重定向

必威官网手机版首页 8

上图中,假如使用wx.redirectTo从四级页面重定向到二级页面,此时会将关闭四级页面,并使用二级页面替换四级页面,但两个页面状态是独立的。此时的页面栈大小不变,请注意和使用wx.navigateTo的区别。
使用wx.navigateBack返回

4、使用wx.navigateBack返回

必威官网手机版首页 9

上图中,假如当前页面为五级页面,使用wx.navigateBack:
当delta为1,关闭五级页面,当前页面为四级页面,页面栈大小减1;
当delta为2,关闭依次五级页面和四级页面,当前页面为三级页面,页面栈大小减2;
以此类推,直到栈底为止,也就是首页。

总结

  • wx.navigateTo会增加页面栈大小,直到页面栈大小为5
  • wx.redirectTo不会增加页面栈大小
  • wx.navigateBack会减少页面栈大小,直到页面栈大小为1

内容参考自:小程序基础之页面路由

总结

1、wx.navigateTo会增加页面栈大小,直到页面栈大小为52、wx.redirectTo不会增加页面栈大小3、wx.navigateBack会减少页面栈大小,直到页面栈大小为1

感兴趣的朋友可以去试试。为了更好的服务大家,请加入我们的技术交流群:(511387930),同时您也可以扫描下方的二维码关注我们的公众号,每天我们都会分享经验,谢谢大家。

必威官网手机版首页 10

hugsformonsters

必威官网手机版首页 11

inflicted

必威官网手机版首页 12

ipolecat

必威官网手机版首页 13

stereosuper

必威官网手机版首页 14

ngenworks

必威官网手机版首页 15

pixiapps

必威官网手机版首页 16

wireframeplus

必威官网手机版首页 17

pieoneers

必威官网手机版首页 18

jeandelbrel

This entry was posted in 摄影专区 and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用*标注