前端大挑战 - 单页面应用上的多页导航
发布于 3 年前 作者 hezedu 2061 次浏览 来自 分享

首先说一下什么是导航: iOS 开发文档是这么描述的:

人们往往不知道应用程序的导航,直到它不符合他们的期望。你的工作是以一种支持你的应用程序的结构和目的的方式来实现导航,而不需要引起人们的注意。

安卓文档里这么描述的:

Navigation 是一个框架,用于在 Android 应用中的“目标位置”之间导航。

越听越迷糊不是? 主要是 Web 端没这个,总的来说导航是一个栈结构,里面可以包含很多页面,但只会显示一个。由一个控制器来集中控制。iOS 有UINavigationController, 安卓中有 NavController

而 web 端有什么 ?一些框架实现了一些路由器,比如 react-router, vue-router。但跟原生应用中的导航有本质区别。这些路由器都是单页面的,切换时当前页会替换掉上一个页面,而原生的导航是多页面的,可以顺滑的返回上一页。

强行用 web 单页面开发原生一样的应用会有什么后果? 后果很严重。基本不出两步就跌倒了。令人崩溃。典型的例子就是: 从一个无限滚动的列表,滚到第二页, 点击进某个详情,再返回,结果列表又从第一页开始加载了。看看某东手机 web 端商城就知道了。

现在 webApp 越来越像原生应用了怎么办? 是的,尤其是还有个叫 HybridApp 的完全是按原生设计的,你或许能用遮罩糊弄过去,但是要继续往下跳呢?要知道微信小程序都能跳十层的。 我们该怎么办?做一个导航出来呗。

架构的要求是什么? 我在坛子里上也看到有人发过这面的解决方案了。看来不是我一个被 Hybrid app 坑过。我也点进去看了 DEMO。但看到URL上那一串参数就知道怎么回事了。跟我的要求相差甚远。我的要求具体如下:

  1. 像原生一样的多页面栈结构。
  2. URL 必须保持干净。
  3. 浏览器刷新后能还原,点回退键仍能准确返回之前页。
  4. 必须和浏览器或手机系统回退键完美结合。
  5. 实现原生 tabbar 模式(小程序有的功能必须有)。
  6. 页面跳转时能跟据不同行为作出不同过渡效果,比如跳进一个页面过渡效果是从右到左,返回时是从左到右(小程序都没这功能)
  7. 页面过渡效果必须是随时可配置的(小程序也没这功能)。

实现 最终我挑选了 Vue 作为单页面框架来实现,由一开始从 vue-router 源码中寻找改进方案,到后来完全放弃 vue-router,一步步峰回路转,历时 5 个月,竞让我全都实现了。它就是:

history-navigation-vue

如果大家用 Web 来开发原生界面应用,搞手脚不赢的时候,就点进去瞧一下吧。

1 回复

看起来还不错

回到顶部