百亿补贴通用H5导航栏方案 | 京东云技术团队

原创

于 2023-08-28 12:03:31 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#京东云 #H5导航栏 #百亿补贴 #移动开发

背景

在移动端页面中，由于屏幕空间有限，导航条扮演着非常重要的角色，提供了快速导航到不同页面或功能的方式。用户也通常会在导航条中寻找他们感兴趣的内容，因此导航条的曝光率较高。在这样的背景下，提供一个动态灵活的导航条，为产品赋能，变得尤其重要。

使用原生导航栏现状

拿iOS原生导航条为例，导航条作为页面进出栈的根视图连接器，以及生命周期的管理器。尤其是在作为webView Controller的父容器的时候，面对webview中h5页面灵活的的路由属性，以及一些难料的异常情况，原生很难也不便于频繁操作根试图容器，因此也产生了一些性能差、体验差、开发成本高、测试场景难覆盖等问题。安卓也有类似情况。

1、性能问题

•ssr预渲染时，无法对原生导航条进行预加载。对于百亿，便宜包邮等使用ssr预渲染的频道，因为原生导航栏无法进行预加载，导致上屏较慢等问题。

2、开发/测试成本高

•原生导航条生命周期耦合。原生导航条作为webviewController的根容器，一旦操作时机不当，很可能影响到线上页面，而且最大的问题在于这种场景测试很难覆盖。比如：window.href.url使用这种方式更新当前页面时，由于不同频道操作同一根导航条，会引发不可预知的问题；

•场景有限。站外场景无法使用原生导航条，一些业务方往往需要单独处理站内外，造成开发资源浪费。

3、体验差

•webview初始化时会预置一个默认的导航条，然后根据前端配置，再去设置导航条的不同样式，无法避免的存在一个过渡期，体验较差。

•window.location.reload()刷新当前页面的时候，即便是在js中隐藏了导航条，webview为了兼容一个线上问题，执行reload时此时会先展示原生导航条，直到执行了js的隐藏逻辑，才会被隐藏，体验较差。

4、难扩展造成营销资源浪费

•无法扩展交互动效。得益于移动端页面中，导航条得天独厚的位置，产品往往希望有更生动的交互性，来提高曝光、粘性、活动触达率等。比如导航栏上挂载搜索框、以及吸顶、延伸动画、沉浸式、炫酷的营销icon等等。遗憾的是原生系统导航条不能全部支持，其实无论从视图层级上来说，还是从导航条职责上来说，apple并不希望过多操作导航栏上的元素。也就造成了高曝光位置的资源浪费。