一种基于制造技术

本发明专利技术提供一种基于

【技术实现步骤摘要】
一种基于H5页面沉浸式导航栏适配方法和系统


[0001]本专利技术涉及移动终端开发
，尤其涉及一种基于
H5
页面沉浸式导航栏适配方法和系统
。

技术介绍

[0002]在混合开发模式中，
H5
页面沉浸式导航适配过程关键因素是设备的状态栏高度，但是不同型号
、
不同尺寸
、
不同分辨率的设备对应状态栏高度值也不同，通常是
H5
通过交互方式获取设备状态栏高度，根据获取到设备的状态栏高度适配渲染导航栏；
H5
与原生
App
通信涉及现有如下3个技术方案：
JavaScript Bridge
方式
、URL Scheme
方式
、Native SDK
方式，上述3种通信方式获取状态栏高度是个有通信的时间消耗过程，在还未拿到状态栏高度时导航栏会显示默认高度，获取到设备状态栏高度之后渲染真实导航栏高度，这个短时间的过程中会出现一个抖动
、
闪烁的现象，影响用户体验
。

技术实现思路

[0003]基于上述问题，本专利技术提供一种基于
H5
页面沉浸式导航栏适配方法和系统，旨在解决
H5
导航栏适配过程渲染时出现的抖动
、
闪烁问题
。
[0004]一种基于
H5
页面沉浸式导航栏适配方法，包括：
[0005]步骤
A1<br/>，当位于设备上的原生应用模块在加载
H5
页面时将设备状态栏的高度添加到统一资源定位符中；
[0006]步骤
A2
，
H5
模块解析统一资源定位符，得到状态栏的高度；
[0007]步骤
A3
，
H5
模块根据状态栏的高度展示
H5
页面时渲染导航栏的实际高度
。
[0008]进一步的，在步骤
A1
中，原生应用模块将状态栏的高度作为参数添加到统一资源定位符的查询字符串中
。
[0009]进一步的，导航栏在状态栏的下方
。
[0010]进一步的，在步骤
A3
中，
H5
模块将状态栏的高度和导航栏的默认高度之和作为导航栏的实际高度进行渲染
。
[0011]一种基于
H5
页面沉浸式导航栏适配系统，其特征在于，用于执行前述的一种基于
H5
页面沉浸式导航栏适配方法，包括：
[0012]信息添加模块，用于当原生应用模块在加载
H5
页面时将设备状态栏的高度添加到统一资源定位符中；
[0013]H5
模块，用于：解析统一资源定位符，得到状态栏的高度，并根据状态栏的高度展示
H5
页面时渲染导航栏在设备中的实际高度
。
[0014]进一步的，在步骤
A1
中，原生应用模块将状态栏的高度作为参数添加到统一资源定位符的查询字符串中
。
[0015]进一步的，渲染后导航栏在状态栏的下方
。
[0016]进一步的，
H5
模块将状态栏的高度和导航栏的默认高度之和作为导航栏的实际高
度进行渲染
。
[0017]本专利技术的有益技术效果在于：相比于传统
H5
页面先显示默认导航栏高度然后通过交互方式获取设备状态栏高度之后进行渲染，本专利技术在加载
H5
页面时将状态栏高度参数添加到
URL
中，
H5
页面解析出
URL
中的状态栏高度，然后得到导航栏的实际高度，根据实际高度渲染导航栏，减少
H5
页面和设备的交互通信过程，避免渲染时出现抖动
、
闪烁，提升用户体验
。
附图说明
[0018]图1为本专利技术一种基于
H5
页面沉浸式导航栏适配方法的步骤流程图；
[0019]图2‑3为现有技术中导航栏适配过程的示意图；
[0020]图4为本专利技术计算的实际高度示意图
。
具体实施方式
[0021]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚
、
完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例
。
基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围
。
[0022]需要说明的是，在不冲突的情况下，本专利技术中的实施例及实施例中的特征可以相互组合
。
[0023]下面结合附图和具体实施例对本专利技术作进一步说明，但不作为本专利技术的限定
。
[0024]参见图1，本专利技术提供一种基于
H5
页面沉浸式导航栏适配方法，包括：
[0025]步骤
A1
，当位于设备上的原生应用模块在加载
H5
页面时将设备状态栏的高度添加到统一资源定位符
URL
中；
[0026]步骤
A2
，
H5
模块解析统一资源定位符，得到状态栏的高度；
[0027]步骤
A3
，
H5
模块根据状态栏的高度展示
H5
页面时渲染导航栏的实际高度
。
[0028]相比于传统
H5
页面先显示默认导航栏高度然后通过交互方式获取设备状态栏高度之后进行渲染，本专利技术在加载
H5
页面时将状态栏高度参数添加到
URL
中，
H5
页面解析出
URL
中的状态栏高度，然后得到导航栏的实际高度，根据实际高度渲染导航栏，减少
H5
页面和设备的交互通信过程，避免渲染时出现抖动
、
闪烁，提升用户体验
。
进一步的，在步骤
A1
中，原生应用模块将状态栏的高度作为参数添加到统一资源定位符的查询字符串中
。
[0029]将设备状态栏高度
statusBarHeight
作为参数拼接到
URL
的查询字符串中，例如可以在
URL
中的查询参数部分添加一个名为
"statusBarHeight"
的参数，其值为设备状态栏的高度
。
例如，
URL
的形式可以是：
http://example.com/h5page
？
statusBarHeight
＝
XXX
，其中...

【技术保护点】

【技术特征摘要】
1.
一种基于
H5
页面沉浸式导航栏适配方法，其特征在于，包括：步骤
A1
，当位于设备上的原生应用模块在加载
H5
页面时将设备状态栏的高度添加到统一资源定位符中；步骤
A2
，
H5
模块解析所述统一资源定位符，得到所述状态栏的高度；步骤
A3
，所述
H5
模块根据所述状态栏的高度展示
H5
页面时适配导航栏的实际高度
。2.
如权利要求1所述的一种基于
H5
页面沉浸式导航栏适配方法，其特征在于，在所述步骤
A1
中，所述原生应用模块将所述状态栏的高度作为参数添加到所述统一资源定位符的查询字符串中
。3.
如权利要求1所述的一种基于
H5
页面沉浸式导航栏适配方法，其特征在于，所述导航栏在所述状态栏的下方
。4.
如权利要求3所述的一种基于
H5
页面沉浸式导航栏适配方法，其特征在于，在所述步骤
A3
中，所述
H5
模块将所述状态栏的高度和所述导航栏的默认高度之和作为所述导航栏的实际高...

【专利技术属性】
技术研发人员：张燕龙，朱瑞星，
申请(专利权)人：上海深至信息科技有限公司，
类型：发明
国别省市：