一、概念
用来指定如何在app内部实现页面跳转
二、使用场景
端外拉起app后,跳转到指定页面
端内跳转到指定页面
h5、native、rn不同的页面之间都可以互相跳转、传递参数
三、目标
一个UI页面与一个uri关联,用Uri替代我们的页面。
跳转的时候就不需要强依赖UI页面去做匹配,而只需要通过一段字符串去匹配就行
实现页面之间的解耦、跳转、传参
四、优缺点分析
和传统native路由跳转相比较:
简单易读。通过字符串实现跳转页面并传参
页面解耦。实现页面间完全解耦
灵活性强。可通过动态下发不同的字符串,动态控制跳转的逻辑
参数有限制。不支持复杂的数据格式
依赖客户端路由模块的实现
五、技术调研
动态路由方案
- android
https://juejin.cn/post/7169017197442891806
- iOS
https://juejin.cn/post/7087875341460439071
六、方案内容
6.1、Uri格式
整体参考uri的格式
基本格式 = protocol://hostname/path = 协议://主机地址/路径
protocal: 协议头,对应吊起app的协议scheme,用于端外,吊起app
hostname/path: 域名和路径,用来指定页面形态,native、hrn、h5
-
query: 参数。注意:只支持字符串格式。不包含端口号
pName: 页面名称
容器参数:设置容器的初始化参数
rcName: rn中指定页面的入口组件
业务参数: 页面内部使用的参数
示例:
app外
protocol://protal/containerType?pName=pageA&query=1
-
端外打开native页面:
-
端外打开rn页面:
-
端外打开h5页面:
app内
- rn跳rn, h5跳rn
- rn跳native,h5跳native
- rn跳h5
6.2、参数
query信息分为三部分:
pName:页面名称【必填】
给容器使用的参数:指定容器的一些行为. 所有字段使用rnc开头
业务参数: 业务内部使用
protal/hrn?pName=pageA&rncDegradeUrl=www.baidu.com
protal/hrn?pName=pageA&rncDegradeUrl=www.baidu.com&rncDegradeVersion=1.0.0&rncTransparent=1&rcName=index&id=123&name=zhangsan
6.2.1、容器参数
query参数预留字段,指容器使用的字段:
预留字段命名规范:尽量避免和业务参数重名,推荐添加rn前缀 rnc react-native-container 和 react-native-config的简写
qurey字段名 | 含义 | 数据格式 | 默认值 | 示例 | |
---|---|---|---|---|---|
pName | 页面名称。rn里也指bundle的名称 | 字符串 | 必填 | pName=pageA | |
rncDegradeUrl | 降级的url | urldecode以后得url链接 | undefined: 默认没有值 | https://www.baidu.com | |
rncDegradeVersion | 在某个版本以上降级,更低的版本不允许降级 | 字符串 | undefined:默认没有值,不指定版本 | “1.0.0” | |
是否允许页面降级 | 字符串, '0' 或者 ‘1’ | “0”:不降级 | 1 | ||
容器类型 | "screen" | "view" | “screen” | ||
rncTransparent | 容器是否透明 | 字符串 “0” ~ “1” | “0”: 不透明,可以设置其他0-1之间的值。1:全透明 | 0 | |
rncHeight | 50% 400px | ||||
rncRouterType | 路由跳转的类型,用来控制是否走全页面触达的逻辑 | 字符串 | base | rncRouterType=base;rncRouterType=allPage,当值为allPage的时候,相关参数需要按照全页面触达的要求传参 | |
rncIsTranslucentBar | 是否沉浸式导航栏, | 字符串 | true | rncIsTranslucentBar=true | |
rncBarMode | 状态栏文字的颜色 | 字符串 | dark | rncBarMode=dark | light |
hasTitleBar | 是否为原始的头部(Android 专用) | 字符串 | false | hasTitleBar=false;hasTitleBar=true;一般情况下不需要传,只有一些特殊页面需要传 |
字段名 | 含义 | 数据格式 | 默认值 | 示例 |
---|---|---|---|---|
rcName | 加载的入口组件名称,registerComponentName | 字符串 | index | name="demo" |
其他初始化参数 | rn页面初始化的时候,传递的业务参数 | 字符串 | undefined |
native需要的参数(技术文档:
<colgroup><col width="176"><col width="176"><col width="176"><col width="176"><col width="176"></colgroup>
参数名 | 含义 | 数据格式 | ||
---|---|---|---|---|
redirectType | native跳转的类型 | 字符串 | ||
redirectValue | 具体的内容 | json字符串 |
6.2.2、参数的数据格式
下表为支持的数据格式,以及对应的简写,
只支持基本数据格式,不支持数组、字典等复杂的结构
数据格式 | iOS的类 | Android的类 | 简写前缀 |
---|---|---|---|
字符串 | NSString | String | S_ |
boolean | BOOL | boolean | B_ |
数字 int | NSInteger | int | I_ |
数字 float | float | float | F_ |
数字double | double | double | D_ |
示例:
比如需要往目标页面pageA传递三个参数:
id:数字类型,1234535
name:字符串类型,zhangsan
最终的跳转链接如下:
protal/native?pName=pageA&id=I_1234535&name=S_zhangsan
6.2.3、参数处理逻辑
除pName、rcName、rnc开头的参数,其它参数传递到rn页面内
6.2.4、当前app的现状
暂无通用路由模块,主要以硬编码实现跳转为主。
-
有全页面触达逻辑,
- 需要提前配置好,只支持配置好的页面
6.2.5、rn中页面跳转逻辑
Android现在的架构设计,对路由跳转有何影响
-
Android实现页面跳转逻辑的实现是怎么样的,和通用路由协议是否有冲突的地方
是否必须使用全页面触达,如果不通过全页面触达是否有影响
除了全页面触达的逻辑,还有没有实现页面跳转的写法
全页面触达对通用路由协议的影响和相互之间的关系应该是怎么样的
七、风险
- 安全性
八、收益
页面解耦
跳转逻辑更灵活可控,可动态配置
能力拓展:开关系统开关系统设计方案