微盟移动端多端跨平台虚拟路由交互设计与实践

本文首发自 微盟技术中心 微信公众平台~

一、前言

路由是现如今移动端开发中不可或缺的功能，尤其是对于跨平台的大型移动端应用，不同平台之间的页面跳转更为复杂，好的路由设计方案可以提升开发效率，降低代码维护成本，达到事半功倍的效果。

二、背景

基于移动端业务动态化发版，还有提高人效的诉求，微盟商户助手接入了跨平台技术方案，为了可以更好的管理各个平台之间的页面跳转，需要用到路由框架，而目前市面上主流的路由框架功能都比较单一，只能够满足原生页面之间的跳转，同时也无法动态下发路由 URL，无法满足当前交互跳转的诉求，还有不同版本需要支持不同页面跳转等复杂的业务场景，基于此我们自研了一套涉及到前后端一体化的路由交互框架。

三、需求分析

为了保持三端（Android，IOS，小程序）页面路由跳转的统一性，支持不同平台页面之间的跳转，提升页面跳转的自由度以及降低真实 URL 的维护成本，路由设计需要满足以下几个条件：
1.路由URL需要根据不同的平台隔离配置。2.应用不同版本单个触发事件可以支持路由到不同的页面。3.不可以暴漏真实的页面URL给业务开发人员。4.页面路由需要通过后端接口动态下发到移动端。5.三端页面路由配置保持一致。

四、技术方案

4.1  整体技术方案   
针对保持三端一致性以及复杂业务场景路由跳转的诉求，我们设计了虚拟路由的概念。虚拟路由是什么？

虚拟路由就是遵循一套规则定义的一个文本字符串，代表了设计者的理念和思想，单个页面对应一个虚拟路由，可以在虚拟路由下面设置不同系统的真实路由，目前支持Android, iOS, 小程序三端，每个端根据不同实现类型，不同版本设置不同的真实路由

虚拟路由的文本规范：

page://{bosId}/{key}/产品/模块/页面名称?参数=xxx

{bosId}

商户助手真实店铺的唯一标识

{key}

业务后端填充的一个字符串，通过字符串可以置换到业务相关的参数信息

产品

业务产品线标识      

模块

业务线里的模块

虚拟路由交互跳转设计分为PC端和移动端4.1.1  PC端PC端主要负责虚拟路由的配置，配置虚拟URL以及对应的真实URL等信息，真实信息包括：端类型，业务产品版本号，真实URL地址，实现类型。真实的配置表如下图：4.1.2  移动端移动端通过接口下发拿到整个虚拟路由的配置表，然后在触发点击事件的同时，通过接口拿到当前事件对应的虚拟路由，去虚拟路由配置表中匹配到真实的URL和对应的平台类型，执行不同平台的跳转逻辑，实现页面的跳转。   

4.2 具体实现

按照整体功能具体实现可以分为路由配置中心，路由管理类、路由配置表、路由跳转四部分。                      4.2.1 路由配置中心路由配置中心主要负责虚拟路由的配置管理工作，配置虚拟路由以及对应的真实路由等信息。新增路由配置页面包括虚拟URL和路由规则，规则就是各个端真实路由信息。

添加规则页面

添加各个端的真实URL，版本号，实现类型等信息。

1、端类型目前支持Android，iOS，小程序三端。2、组件标识版本号对应业务版本号。3、真实URL对应不同端真实Page路径。4、实现类型目前支持原生，H5，Donut等。添加后的完整信息4.2.2 初始化路由管理类路由管理类的作用是支持不同平台的页面路由跳转，应用初始化时期需要注册不同平台的实现类，比如：原生，H5等；每个平台实现类的跳转逻辑是不一样的，H5是通过 WebView 渲染打开页面，原生是通过原生的 API 打开页面，管理类最终以 Key 和 Value 的形式存储内容，Key 是实现平台的类型，Value 是具体实现的跳转类。4.2.3 初始化路由配置表路由配置表是路由跳转的核心，路由映射管理信息都存储于路由配置表中初始化路由配置表首先调用后端配置接口拉取路由配置，接口传参需要携带系统类型【比如：Android系统】和配置的版本号参数，接口会先通过系统类型筛选出当前系统下的所有路由配置信息，系统总共包括Android，iOS，小程序3端，以Android端为例，接口接收到请求，会立即匹配端类型为Android的所有配置信息，然后再根据版本号参数匹配版本信息，因为PC配置中心单个虚拟路由有可能会配置多个版本，需要筛选出符合当前版本的配置信息；版本的匹配逻辑是：首先匹配和当前传参版本一致的版本，如果匹配不到就向下兼容去匹配最新的一个版本，以此类推匹配完所有的路由；APP获取到匹配好的完整路由表后，循环整个路由配置表，以Key和Value的形式存储于内存中，Key是虚拟路由，Value是对应的真实URL，版本号，实现类型等信息，至此整个初始化流程就完成了。     4.2.4 路由跳转路由跳转的触发事件主要在应用主页的菜单上 。    所有菜单均有后端接口返回，菜单会携带对应的虚拟URL。触发点击菜单的同时获取到虚拟URL，首先校验虚拟URL是否规范，因为虚拟URL是我们定义的一套标准，只有符合规范才可以触发后续的流程，不符合会终止流程，校验成功后会解析虚拟URL上是否有携带参数，目标页面的虚拟URL和真实URL都支持在URL上配置业务参数，参数解析完成后，去内存中的路由映射表中匹配到真实URL，检查真实URL上是否携带了业务参数，解析完成后合并所有的参数，根据真实URL对应的实现类型匹配到具体的跳转实现类，携带参数，执行跳转交互逻辑。以下是匹配跳转类的核心代码：

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

   when (ImplType.valueOf(rb.implType)) {                ImplType.NATIVE -> {                    val pr = NativePageRouter(rb)                    pr.routeUrl = routeUrl                    pr.processRoute()                }                ImplType.H5 -> {                    val pr = H5PageRouter(rb)                    pr.routeUrl = routeUrl                    pr.processRoute()                }                ImplType.DONUT -> {                    val pr = DefaultPageRouter(rb)                    pr.routeUrl = routeUrl                    pr.processRoute()                } }  

     至此，整个交互流程已经完成，四个模块的职责依赖关系也清晰明了，如下图：    

五、优势

相较于传统路由框架功能更加强大，带来的优势包括：

动态化

传统的路由框架路由都是在本地配置，局限性太强，此方案支持路由配置动态下发到移动端，跳转更加灵活，能够支持更加复杂多变的用户使用场景。   统一性   目前各个端都是各自为政，没有统一的标准，不成体系，此方案通过虚拟路由的概念，统一各个端的路由标准，更加易于维护管理，单个虚拟路由支持不同端不同版本的不同配置。灵活性 传统的路由框架跳转修改需要强感知页面URL,  此方案跳转变动只需修改PC配置即可，业务开发人员无感知。

多平台

传统的路由框架仅支持原生页面之间的跳转，此方案可以支持不同平台页面的跳转，功能更加强大，新增业务平台只需实现对应的跳转类即可，易扩展。

容灾能力

如果新版本页面跳转有问题，可以降级到老版本页面，避免线上问题。

六、实践

微盟商户助手接入虚拟路由交互设计后，对业务迭代提供了很大的帮忙。
例如：企微小程序在接入虚拟路由之前，产品业务消息配置的页面都是小程序中的真实路径，由后端接口返回，但是如果单个业务消息跳转的页面需要变更，无法做到新老版本的兼容，老版本在点击消息触发跳转事件时就会提示找不到目标页面。    接入虚拟路由后所有消息只需配置一个通用的真实路径，目标页面的虚拟路由作为参数传递即可，点击消息触发跳转事件时，小程序会通过目标页面的虚拟路由匹配到当前小程序版本的真实路径，这样就可以实现消息页面的跳转，就解决了新老版本无法兼容的问题。

七、总结

移动端虚拟路由交互跳转设计运用到微盟助手商户中后发挥了极其重要的作用，业务开发人员无需关注真实的URL，只需要通过虚拟路由就可以跳转到不同平台的不同页面，跳转的页面可以通过服务端动态配置，单个页面支持不同版本跳转到不同的页面，业务功能遇到问题也可以降级处理，给业务提供了更多的灵活性和可能性。