更多博客 https://70kg.info
最近公司的项目要进行页面间跳转的重构,首先项目是单 Activity
+ 多 Fragment
的结构,因为是电商的项目,所以涉及到很多 H5 , Native
和 React Native
页面之间的交互与跳转,这篇不是介绍两者之间是如何进行通信的,而是当 H5 或者外部分享的链接打开后传递过来 Uri
要解析跳转到 Native
的页面的处理。当然各个页面的 Host
是提前统一定义好的,具体的做法这里也不说了,也没什么难点。原来的写法是都放到一个 Util
类里面,各种 Switch
Case
来进行分支判断,当项目越来越大维护起来十分的困难,而且本身 Native
的页面之间还有一套跳转的逻辑,同时维护两套的代价是很大的,所有希望将项目重构一下,统一两端的处理逻辑,就产生了下面的这个路由结构。
在开始重构之前,也是去搜索了一下网上的一些开源例子,绝大多数都是基于 Activity
的跳转,写的功能虽然很多,但是对于我们的项目却是很冗余并且也不怎么合适,所以要去定制一套适合自己的路由,目标就是统一 H5 , Native
和 React Native
这三端之间的跳转逻辑,同时做到简单易用,容易维护和容易拓展。去写人人都能很容易看的懂的代码,而不是写那么花里胡哨的各种”炫技”的代码。
先放一下这个项目的类图,不怎么熟悉 UML
,里面有些关系表示的不正确,大概的意思还是可以表达出来的。首先要去统一两端的逻辑,肯定需要在跳转直接转换成统一的 Uri
进行跳转,从 H5 过来的就很简单就是个 Uri
,而 Native
的跳转则要去进行处理拼接,然后通过统一的路由进行处理,最后跳转到具体的页面。
先说一下设计的思想,一个页面对应一个 Uri
,并且使用不同的 Host
或者 Path
进行区分和信息的传递,这里先建立了一个全局的”路由表”,让 Url
和一个具体页面的切换器进行对应,当路由获取到一个 Uri
的时候,在路由表中找到对应的切换器,切换到具体的页面。当然在切换之前还需要一些其他的处理,这里加入了拦截器的机制,默认实现了两种拦截器,LoginInterceptor
和 LogInterceptor
分别进行需要登录页面的 Uri
的拦截使其跳转到登录页面和打印 Uri
和其他跳转参数。当然也可以去实现其他的拦截器,这样就使得整个路由十分的灵活。
说一下怎么使用,首先在 Application
中初始化路由表,这个路由表是个 pageMap : Map<String, Switcher>
,这里的 Key
就是每个页面对应的 Host
,Value
的 Switcher
就是处理每个页面切换逻辑的地方,类似这样:
pageMap.put(REACT_NATIVE, new RnSwitcher());
pageMap.put(SCHEMA_HTTP, new H5Switcher());
pageMap.put(HOST_CATALOG, new CatalogDetailSwitcher());
这样就初始化了全局的路由表。因为是单 Activity
+多 Fragment
的结构,几乎所有的页面都是 Fragment
,不像切换 Activity
那么简单,这里要去处理相对复杂的 Fragment
的切换逻辑和维护回退栈的操作,所以封装了一个 NavigationManager
用来处理这些操作。看一下初始化的过程:
Router.install(mNavigationManager)
.addInterceptor(new LoginInterceptor())
.addInterceptor(new LogInterceptor());
因为要持有 Activiry
所以要在 onDestroy
的时候及时释放引用 :
Router.unInstall();
然后看一下具体的跳转:
Router.config().setUri(uri).start()
这样就可以跳转到具体的页面了,当然只是简单的示例一下,实际使用的时候肯定还有其他的配置。因为使用者不可能记得每个页面的 Uri
是怎么拼接的,所以还可以在写个工具类来封装一下,这个就不说了。
说一下这个路由的优点:
- 简单易懂,几乎人人都读得懂,基本不需要学习成本。更没有任何的注解反射之类的。
- 方便统一进行跳转管理,使用了拦截器,可以打印出跳转中的
Uri
和其他参数,调试十分方便。加入了登录拦截器,使得跳转可以无脑跳转,无需关心页面是否需要登录,路由帮你做好了判断和后续登录成功跳转到目标页面。 - 容易拓展,无论是新增页面还是修改维护旧页面。将每个页面切换逻辑封装到对应的
Switcher
里面,快速定位。 - 统一
H5
,Native
和React Native
三端的跳转,更加方便维护。 - 啦啦啦啦。。。
以后甚至可以将路由表让服务端去控制,无论是灵活性还是稳定性都大大提高,只是目前还没有这样的需求,但是改造起来将十分的简单。这个路由从设计到项目的改造大概花了一周的时间,也算是独立设计开发的完整的重要模块,现在还处于比较初级的阶段,肯定有提升空间。目前用在 波罗蜜全球购 的 Android
客户端中,欢迎大家支持。