百亿补贴通用H5导航栏方案
京
大前端组 张松超约 9 分钟
大前端组 张松超约 9 分钟ssr预渲染时，无法对原生导航条进行预加载。对于百亿，便宜包邮等使用ssr预渲染的频道，因为原生导航栏无法进行预加载，导致上屏较慢等问题。
原生导航条生命周期耦合。原生导航条作为webviewController的根容器，一旦操作时机不当，很可能影响到线上页面，而且最大的问题在于这种场景测试很难覆盖。比如：window.href.url使用这种方式更新当前页面时，由于不同频道操作同一根导航条，会引发不可预知的问题； 场景有限。站外场景无法使用原生导航条，一些业务方往往需要单独处理站内外，造成开发资源浪费。
webview初始化时会预置一个默认的导航条，然后根据前端配置，再去设置导航条的不同样式，无法避免的存在一个过渡期，体验较差。 window.location.reload()刷新当前页面的时候，即便是在js中隐藏了导航条，webview为了兼容一个线上问题，执行reload时此时会先展示原生导航条，直到执行了js的隐藏逻辑，才会被隐藏，体验较差。
无法扩展交互动效。得益于移动端页面中，导航条得天独厚的位置，产品往往希望有更生动的交互性，来提高曝光、粘性、活动触达率等。比如导航栏上挂载搜索框、以及吸顶、延伸动画、沉浸式、炫酷的营销icon等等。遗憾的是原生系统导航条不能全部支持，其实无论从视图层级上来说，还是从导航条职责上来说，apple并不希望过多操作导航栏上的元素。也就造成了高曝光位置的资源浪费。
因为要依赖原生JS桥，就一定会存在版本限制问题。造成需求迭代慢，甚至随着时间的推移，版本卡口原因无迹可寻，代码调整战战兢兢，版本审核慢、周期长等问题。
支持ssr预渲染，上屏较快。
人力节省百分之90%以上，以plus 95折为例，对接只需0.5/人日。 无场景限制。可用于站内外，ssr以及csr场景，无需站内外多次开发。 可配置。@pango/navigation-bar使用config的形式配置item，这么做的好处是一旦业务需求改动，只需调整配置，无需调整组件逻辑，极大降低开发和测试成本。另外如果你使用主站的webview并且配置了config，那么只需要简单的改动config，代码迁移成本低。 该组件发布在JNPM上，大小只有4.1K，接入简单。 导航条在频道内和其他普通楼层无异，生命周期隔离清晰，不会影响别的页面，测试成本低。 单向数据流设计，外部数据变化，组件UI及时响应，不存在原生的操作窗口问题，开发体验佳；
生命周期和其他楼层保持同步，规避了原生容器和H5页面天然的生命周期无法同步的问题，也就不存在两者之间的过渡问题，体验佳。
采用左、中、右、状态栏、导航栏分层设计的模式，支持传入React.ReactElement，比原生定制性更强，可灵活定制目前站内绝大部分导航条样式以及交互动画，合理高效利用导航条资源；
参考原生导航栏异形屏适配方案，参考原生绝对布局思路，完美适配折叠屏、异形屏。 iOS9 - 最新 、Android5 - 最新均兼容性良好，未发现线上兼容异常。
@pango/navigation-bar组件使用a标签渲染返回按钮，保证js执行异常时依然展示返回按钮，并且能正常响应返回事件。 业务展示兜底错误页时，会使用导航条兜底数据渲染导航条确保可返回上一级。
npm i @pango/navigation-bar --registry=http://registry.m.jd.comimport {BACK_ICON,FEEDBACK_ICON,FEEDBACK_URL,INavigationParams,MORE_ICON,RULE_ICON,SHARE_ICON,} from "@pango/navigation-bar";setH5NavigationButton = (headerData) => {const extend = headerData?.navigationBar?.extend;const followInfo = headerData?.navigationBar?.followInfo;const follow = {type: "follow",collectionId: String(followInfo?.themeId),gapWidth: 12,width: 55,height: 22,};const moreItem = {type: "more",menuBackgroundColor: "white",img: MORE_ICON,title: "更多",menuList: [],};moreItem.menuList.push({icon: RULE_ICON,title: "规则页",menuEventData: extend?.guideUrl,});moreItem.menuList.push({icon: SHARE_ICON,title: "分享",type: "share",menuEventData: extend?.share,});const backItem = {type: "back",img: BACK_ICON,canClick: !margicWindow,title: "返回",};const backLogo = {type: "logo",img: DEFAULT_LOGO,isAnimation: true,gapWidth: 5,width: 176,height: 34};const navBarParams: INavigationParams = {leftItems: [],rightItems: [],backgroundColor: "#FD4D00",navHeight: this.status.navHeight,};navBarParams.leftItems.push(backItem， backLogo);navBarParams.rightItems.push(moreItem, follow);navBarParams.titleImgItem = TitleSearch({});navBarParams.scrollCallBack = (scale) => {this.setStatus({navigationBarParams: Object.assign(this.status.navigationBarParams, {titleImgItem: TitleSearch({ isCollapse: scale === 1 })})});}return navBarParams;};
import { INavigationParams, NavigationBar } from "@pango/navigation-bar";import "@pango/navigation-bar/lib/navigation-bar.scss";css.nav-bar {width: 750px;z-index: 1;top: 0px;}<NavigationBarclassName="nav-bar"params={navBarParams} //！！！参考上一步的配置，自定义导航条参数barHeight={200} //！！！自定义导航栏高度event={do somethings}/>
@pango/navigation-bar组件使用a标签渲染返回按钮，保证js执行异常时依然展示该标签，并且能正常相应出栈事件。 业务展示兜底错误页时，会使用导航条兜底数据渲染导航条。
参考原生系统导航栏的绝对布局方案：@pango/navigation-bar把导航条拆分为状态栏和导航栏上下两部分， 导航条宽度屏幕自适应，导航条高度跟随设备变化，并采用大写的PX单位来固定元素尺寸。根据协议item宽高、间距仍可自定义，但是大写的PX保证了item不会随着屏幕宽度而异常变化。
navigation-bar {width: 750px; // 会转换成vwheight: 44PX; // 不会转换成vwdisplay: flex;position: absolute;.left-items-bg {margin-left: 16PX; // 不会转换成vwheight: 22PX;margin-top: 11PX;width: fit-content;display: flex;align-items: center;justify-content: center;}}
导航条在移动端页面中的重要性无需多言，我们最终的目的是面向全集团，和通天塔以及hybrid团队，一起打造一根规范通用的H5导航栏，如果你在使用过程中发现一些我们没有考虑到的异常场景或者设计规范，请与我联系，我们共同完善。 目前该组件下拉刷新还是要依赖原生的下拉刷新事件，后期会定制H5自己的下拉刷新。 一个规范的UI组件应该是一个有严格UI设计规范的，比如间距，字体大小、图片规范等。但是一期的设计中我们为了灵活，通过协议把UI把控留给了用户，也希望后面的迭代开发中融入更多规范的设计语言。