本发明涉及移动开发领域，特别是涉及一种基于reactnative的混合应用多级页面路由跳转方法。
背景技术：
多级页面是对网站页面的结构关系的描述，任何网站都是以这三级结构为基准的。
混合应用是原生应用和web应用的混合，其中原生应用是能直接运行于当前操作系
统应
用程序；web应用是需要在浏览器中运行的网页应用；两者的结合，通常是一个原生应用内嵌了浏览器。
reactnative是开发混合应用的优秀工具，它是facebook于2015年4月开源的跨平台移动应用开发框架，是facebook早先开源的js框架react在原生移动应用平台的衍生产物，目前支持ios和安卓两大平台。reactnative产出的并不是“网页应用”，或者说“html5应用”，又或者“混合应用”。最终产品是一个真正的移动应用，从使用感受上和用objective-c或java编写的应用相比几乎是无法区分的。reactnative所使用的基础ui组件和原生应用完全一致。
在日常reactnative混合应用开发中，页面跳转是基本的操作。由于业务的复杂性，很多跳转都涉及到跨多页面一次性定位跳转的业务场景。如果使用传统的跳转方式，会存在弊端：一个是代码冗余，会存在很多重复的代码，例如reactnative页面想要跳转原生页面，必须新建桥接，然后android和ios端都要实现这个桥接方法实现跳转原生页面的功能，每新跳转一个原生页面就要新建一个桥接！这无疑是致命的，而且也不利于项目的长期维护。另一个由于reactnative混合应用是reactnative技术和原生技术(原生移动应用平台)的混合，这二种技术之间没有一种直接的跳转定位的方式，如果涉及到直接跨多级页面跳转定位，基于现有的技术是很难做到的。例如，页面a是原生页面是一级页面，页面b是reactnative页面是二级页面，页面c是reactnative页面是三级页面。那么如果要实现页面a到页面c，则基于现有的技术方案只能通过逐级跳转实现，即先跳b再跳转页面c
针对上述所述问题，目前市面上还没有一种完美的公开的现有解决方案。
技术实现要素：
本发明所要解决的技术问题是克服现有技术的不足，提供一种基于reactnative的混合应用多级页面路由跳转方法，以路由短链唯一标识各级别原生页面和reactnative页面，原生页面和reactnative页面以路由短链注册在路由表中，通过验证页面跳转请求url中的路由短链，结合对页面类型的判定，在不增加甚至减少人工编写代码的基础上，实现页面的跨级定位和跳转，后期跳转规则改变仅需要维护路由表而无需考虑增加代码。
为解决上述技术问题，本发明技术方案是，一种基于reactnative混合应用多级别页面路由跳转方法，以路由短链唯一标识各级别原生页面和reactnative页面，原生页面和reactnative页面以路由短链注册在路由表中，通过验证页面跳转请求url中的路由短链，结合对页面类型的判定，在不增加甚至减少人工编写代码的基础上，实现页面的跨级定位和跳转，以后网页页面跳转规则改变仅需要维护路由表而无需考虑增加页面跳转代码，具体步骤包括：
步骤1：混合应用中各级别的网页页面以登记路由短链的形式完成在路由表中注册,所述网页页面包括原生页面和reactnative页面(以下简称：rn页面)，所述路由短链是网页页面的唯一地址标识；
基于路由表中已登记的路由短链,将各级别页面的路由短链间的映射关系存入(第三方)路由跳转系统中，所述映射关系为不同级别的原生页面和不同级别的rn页面之间的跳转关系；
所述路由表和所述路由跳转系统配置在原生移动应用平台(原生端)，所述原生端为android、ios原生技术开发的页面集合统称；所述路由跳转系统根据移动应用的操作系统选定为安卓端arouter、ios端mgjrouter。通过调用第三方路由跳转系统，执行跳转至原生页面的跳转动作；
特别地，在所述步骤1中，二维码(视为特殊网页)同样以路由短链形式注册在路由表中，通过扫码获取二维码的路由短链，二维码按照路由短链进行页面定位和跳转；
步骤2：reactnative端(简称：rn端)监听路由跳转系统rn页面跳转执行通知，待监听到rn页面跳转执行通知时，当前页面调用react-navigation导航器，根据从路由跳转系统的路由表中解析出的rn页面的跳转类型，通过在rn页面堆栈中执行页面操作并实施页面跳转操作；所述跳转类型根据react-navigation导航器提供的路由跳转方法定义；
特别地，所述跳转类型具体包括push跳转、replace跳转、navigate跳转，相对应的页面操作包括页面新增、页面替换及页面遍历；
所述页面新增：rn页面堆栈的栈顶新增一个目标rn页面；
所述页面替换：在rn页面堆栈中直接替换当前页面；
所述页面遍历：在rn页面堆栈中遍历目标页面，如果有目标页面则直接跳转目标页面并推出目标页面之上的所有rn页面，如果rn页面堆栈中不存在目标页面，则在栈顶新增一个目标rn页面并跳转；
特别地，将所述步骤2的监听事件编写成高阶组件，配置在rn端，所有rn页面继承高阶组件，高阶组件(high-ordercomponent)类似于高阶函数，让代码更具有复用性、逻辑性与抽象特征，能对render方法作劫持，也可以控制props与state。
步骤3：rn端通过调用桥接方法建立rn端和原生端之间的数据传递通道，在所述桥接方法中写入调用步骤4的接口；
步骤4：获取当前页面发起的跳转请求，解析出目标页面的跳转地址url，通过验证url合法性及页面是否登记注册，以及对当前页面和目标页面类型识别的这一跳转逻辑判定，根据目标页面类型进行页面定位和跳转；
如若是跳转至原生页面，直接调用所述步骤1的路由跳转系统，根据页面路由短链之间映射关系直接定位至目标页面，执行跳转；如若是跳转至rn页面，在当前页面是原生页面时，新增1个rn页面堆栈，在页面堆栈中添加目标页面；在当前页面是rn页面时，按照所述步骤2调用react-navigation导航器对当前页面所在的rn页面堆栈执行页面操作；
所述步骤4，具体为：
步骤4-1：获取由当前页面发起的页面跳转请求url，验证url的合法性，如若不合法直接拒绝跳转访问；如若合法转步骤4-2：
步骤4-2：解析url获取路由短链，根据路由短链在路由表中的匹配与否，判断页面是否在所述步骤1的路由表中注册，如若匹配失败，则创建新窗口加载url对应的html5页面；如匹配成功转步骤4-3；
步骤4-3：调用路由表，根据路由短链查询是否记录关于目标页面的跳转限制，如若有限制，则根据限制内容执行前序限制操作；如若不需要则执行步骤3-4；
步骤4-4：识别目标页面的类型，查询路由短链在路由表中记录的目标页面类型，如若是目标页面在路由表中记为原生页面，直接调用步骤1路由跳转系统直接跳转；如若目标页面在路由表中记为为rn页面，执行步骤4-5；
步骤4-5：识别当前页面的类型，如若当前页面是原生页面，创建rn页面堆栈，通过直接将目标rn页面置于rn页面堆栈中执行跳转；如若当前页面是rn页面，创建页面跳转执行通知，执行步骤2；
将所述步骤4的跳转逻辑编写全局类配置在原生端，当前页面是rn页面时，主动调用桥接方法，当每一次发生页面跳转时，直接调用跳转逻辑类执行跳转判定和页面跳转；
有益效果：
本发明以路由短链唯一标识多级别原生页面和rn页面，通过获取解析跳转请求url中的路由短链识别页面及页面类型，针对reactnative页面之间的多级跳转，所有reactnative页面待监听跳转执行通知，在不管页面级别的情况，直接调用导航器执行跳转动作，减少传统页面跳转中所需书写的代码总量，在不增加甚至减少人工编写代码的基础上，实现页面的跨级定位和跳转，后期跳转规则改变仅需要维护路由表而无需考虑增加代码；本发明还以路由短链标识二维码，实现通过扫码获取路由短链，进而实现快速定位目标页面。
附图说明
图1为本发明实施例中reactnative混合应用多级页面路由跳转的方法实现的流程图；
图2为本发明实施例中多级页面跳转中跳转逻辑判定的流程示图；
图3为本发明实施例reactnative混合应用多级别页面路由跳转的系统结构示意图。
具体实施方式
下面结合附图和示例性实施例对本发明作进一步的说明：
图1为本发明实施例中reactnative混合应用多级页面路由跳转的方法实现的流程图，具体步骤有:
步骤s1：混合应用中各级别页面以登记路由短链的形式完成在路由表中注册；基于路由表中已登记的路由短链,将各级别页面的路由短链间的跳转映射关系存入路由跳转系统中；
所述路由跳转系统根据移动应用的操作系统选定为安卓端arouter、ios端mgjrouter。通过调用第三方路由跳转系统，执行跳转至原生页面的跳转动作；
步骤s2：reactnative端(简称：rn端)监听rn页面跳转执行通知时，待监听到rn页面跳转执行通知时当前页面调用react-navigation导航器，根据从路由表中解析出的rn页面的跳转类型，通过在rn页面堆栈中执行页面操作实施页面跳转操作；所述跳转类型根据react-navigation导航器提供的路由跳转方法定义；
所述跳转类型具体包括push跳转、replace跳转、navigate跳转，相对应的页面操作包括页面新增、页面替换及页面遍历；所述页面新增：rn页面堆栈的栈顶新增一个目标rn页面；所述页面替换：在rn页面堆栈中直接替换当前页面；所述页面遍历：在rn页面堆栈中遍历目标页面，如果有目标页面则直接跳转目标页面并推出目标页面之上的所有rn页面，如果rn页面堆栈中不存在目标页面，则在栈顶新增一个目标rn页面并跳转；
步骤s3：rn端通过调用桥接方法建立rn端和原生端之间的数据传递通道，在所述桥接方法中写入调用步骤4的接口；本发明实施例中的桥接方法继承reactnative的reactcontextbasejavamodule基础桥接模块，并通过@reactmethod注解标注桥接中自定义的方法，区别于其他桥接的代码的关键地方就在于每个桥接方法的方法名都是唯一的，并且每个桥接方法里的代码也是唯一的。
主要代码如下：
步骤s4：获取当前页面发起的跳转请求，解析出目标页面的跳转地址url，通过验证url合法性及页面是否登记注册，以及对当前页面和目标页面类型识别的这一跳转逻辑判定，根据目标页面类型进行页面定位和跳转；
如若是跳转至原生页面，直接调用所述步骤1的路由跳转系统，根据页面路由短链之间映射关系直接定位至目标页面，执行跳转；如若是跳转至rn页面，在当前页面是原生页面时，新增1个rn页面堆栈，在页面堆栈中添加目标页面；在当前页面是rn页面时，按照所述步骤2调用react-navigation导航器对当前页面所在的rn页面堆栈执行页面操作；
所述步骤s4，参阅图2，具体为：
步骤s4-1：获取由当前页面发起的页面跳转请求url，验证url的合法性，如若不合法直接拒绝跳转访问；如若合法转步骤s4-2：
步骤s4-2：解析url获取路由短链，根据路由短链在路由表中的匹配与否，判断页面是否在所述步骤s1的路由表中注册，如若匹配失败，则创建新窗口加载url对应的html5页面；如匹配成功转步骤s4-3；
步骤s4-3：调用路由表，根据路由短链查询是否记录关于目标页面的跳转限制，如若有限制，则根据限制内容执行前序限制操作；如若不需要则执行步骤s3-4；
步骤s4-4：识别目标页面的类型，查询路由短链在路由表中记录的目标页面类型，如若是目标页面在路由表中记为原生页面，直接调用步骤1路由跳转系统直接跳转；如若目标页面在路由表中记为为rn页面，执行步骤4-5；
步骤s4-5：识别当前页面的类型，如若当前页面是原生页面，创建rn页面堆栈，通过直接将目标rn页面置于rn页面堆栈中执行跳转；如若当前页面是rn页面，创建页面跳转执行通知，执行步骤s2；
本发明也适用于基于二维码扫码的页面跳转，具体为，二维码以路由短链形式注册在路由表中，当二维码对应的页面是原生页面时，经步骤s4跳转逻辑判定后，按照步骤s1调用第三方路由跳转系统直接跳转；当二维码对应的页面是rn页面时，经步骤s4跳转逻辑判定后，按照步骤s2调用react-navigation导航器执行跳转；
图3为本发明实施例一种基于reactnative混合应用多级别页面路由跳转的系统结构示意图，包括原生端和reactnative端,所述原生端为android、ios原生技术开发的原生页面集合统称,所述reactnative端(简称：rn端)为利用reactnative技术开发的reactnative页面(简称rn页面)集合统称；
所述rn端配置react-navigation导航器、监听工具和桥接工具，所述监听工具用于监听rn页面发出的跳转目标rn页面的跳转执行通知，将所述步骤s2的监听事件编写成高阶组件形式的监听工具，所有rn页面继承高阶组件，高阶组件(high-ordercomponent)类似于高阶函数，让代码更具有复用性、逻辑性与抽象特征，能对render方法作劫持，也可以控制props与state；所述桥接工具用于rn端和原生端的数据通信连接及对跳转逻辑工具的调用；
所述原生端配置路由表、第三方路由跳转系统及跳转逻辑工具，所述路由表中记录各级别原生页面和rn页面的路由短链；所述第三方路由跳转系统中记录各级别页面之间的跳转映射关系；所述跳转逻辑工具是基于对页面跳转请求url处理控制多级页面的直接跳转，将所述步骤s4-1至步骤s4-5的跳转逻辑编写全局类作为跳转逻辑工具，当前页面是rn页面时，主动调用桥接工具，当每一次发生页面跳转时，直接调用跳转逻辑类执行跳转判定和页面跳转；
以上实施例不以任何方式限定本发明，凡是对以上实施例以等效变换方式做出的其它改进与应用，都属于本发明的保护范围。
1.一种基于reactnative混合应用多级别页面路由跳转方法，其特征在于，以路由短链唯一标识各级别原生页面和reactnative页面，原生页面和reactnative页面以路由短链注册在路由表中，通过验证页面跳转请求url中的路由短链，结合对页面类型的判定，在不增加甚至减少人工编写代码的基础上，实现页面的跨级定位和跳转，以后网页页面跳转规则改变仅需要维护路由表而无需考虑增加页面跳转代码，具体步骤包括：
步骤1：混合应用中各级别的网页页面以登记路由短链的形式完成在路由表中注册,所述网页页面包括原生页面和reactnative页面即rn页面，所述路由短链是网页页面的唯一地址标识；基于路由表中已登记的路由短链,将各级别页面的路由短链间的映射关系存入第三方路由跳转系统中，所述映射关系为不同级别的原生页面和不同级别的rn页面之间的跳转关系；
所述路由表和所述路由跳转系统配置在原生移动应用平台即原生端，所述原生端为android、ios原生技术开发的页面集合统称；所述路由跳转系统根据移动应用的操作系统选定为安卓端arouter、ios端mgjrouter；通过调用第三方路由跳转系统，执行跳转至原生页面的跳转动作或相反的跳转动作；
步骤2：reactnative端即rn端监听路由跳转系统rn页面跳转执行通知，待监听到rn页面跳转执行通知时，当前页面调用react-navigation导航器，根据从路由跳转系统的路由表中解析出的rn页面的跳转类型，通过在rn页面堆栈中执行页面操作并实施页面跳转操作；所述跳转类型根据react-navigation导航器提供的路由跳转方法定义；
步骤3：rn端通过调用桥接方法建立rn端和原生端之间的数据传递通道，在所述桥接方法中写入调用步骤4的接口；
步骤4：获取当前页面发起的跳转请求，解析出目标页面的跳转地址url，通过验证url合法性及页面是否登记注册，以及对当前页面和目标页面类型识别的这一跳转逻辑判定，根据目标页面类型进行页面定位和跳转；
如若是跳转至原生页面，直接调用所述步骤1的路由跳转系统，根据页面路由短链之间映射关系直接定位至目标页面，执行跳转；如若是跳转至rn页面，在当前页面是原生页面时，新增1个rn页面堆栈，在页面堆栈中添加目标页面；在当前页面是rn页面时，按照所述步骤2调用react-navigation导航器对当前页面所在的rn页面堆栈执行页面操作。
2.如权利要求1所述的一种基于reactnative的混合应用多级页面路由跳转方法，其特征在于：在所述步骤1中，二维码同样以路由短链形式注册在路由表中，通过扫码获取二维码的路由短链。
3.如权利要求2所述的一种基于reactnative的混合应用多级页面路由跳转方法，其特征在于：所述步骤2中的跳转类型具体包括push跳转、replace跳转、navigate跳转，相对应的页面操作包括页面新增、页面替换及页面遍历；
所述页面新增：rn页面堆栈的栈顶新增一个目标rn页面；
所述页面替换：在rn页面堆栈中直接替换当前页面；
所述页面遍历：在rn页面堆栈中遍历目标页面，如果有目标页面则直接跳转目标页面并推出目标页面之上的所有rn页面，如果rn页面堆栈中不存在目标页面，则在栈顶新增一个目标rn页面并跳转；
将所述步骤2的监听事件编写成高阶组件，配置在rn端，所有rn页面继承高阶组件。
4.如权利要求3所述的一种基于reactnative的混合应用多级页面路由跳转方法，其特征在于：所述步骤4具体包括，
步骤4-1：获取由当前页面发起的页面跳转请求url，验证url的合法性，如若不合法直接拒绝跳转访问；如若合法转步骤4-2：
步骤4-2：解析url获取路由短链，根据路由短链在路由表中的匹配与否，判断页面是否在所述步骤1的路由表中注册，如若匹配失败，则创建新窗口加载url对应的html5页面；如匹配成功转步骤4-3；
步骤4-3：调用路由表，根据路由短链查询是否记录关于目标页面的跳转限制，如若有限制，则根据限制内容执行前序限制操作；如若不需要则执行步骤3-4；
步骤4-4：识别目标页面的类型，查询路由短链在路由表中记录的目标页面类型，如若是目标页面在路由表中记为原生页面，直接调用步骤1路由跳转系统直接跳转；如若目标页面在路由表中记为为rn页面，执行步骤4-5；
步骤4-5：识别当前页面的类型，如若当前页面是原生页面，创建rn页面堆栈，通过直接将目标rn页面置于rn页面堆栈中执行跳转；如若当前页面是rn页面，创建页面跳转执行通知，执行步骤2。
5.如权利要求4所述的一种基于reactnative的混合应用多级页面路由跳转方法，其特征在于：将所述步骤4-1至步骤4-5的跳转逻辑编写全局类配置在原生端，当页面跳转时，直接调用跳转逻辑类执行跳转判定和页面跳转。
技术总结