一种页面导航栏的构建方法及装置、存储介质、设备制造方法及图纸

本发明专利技术提供了一种页面导航栏的构建方法及装置、存储介质、设备，其中方法包括H5开发端通过JSBridge建立与Native端的通信接口；获取在H5页面中配置页面导航栏的参数配置信息；页面导航栏至少包括一个导航键；基于通讯接口利用参数配置信息生成用于构建页面导航栏的setNavigationbarInfo执行代码；运行setNavigationbarInfo执行代码，得到目标页面导航栏。通过本发明专利技术实现H5便捷使用Native的功能，根据页面导航栏的参数配置信息生成执行代码，自由编辑导航栏，使H5页面导航栏的构建或更新不依赖于APP版本更新，提高了迭代速度；且执行代码具有通用性，适用于多种APP。适用于多种APP。适用于多种APP。

【技术实现步骤摘要】
一种页面导航栏的构建方法及装置、存储介质、设备


[0001]本专利技术涉及前端开发
，具体涉及一种页面导航栏的构建方法及装置、存储介质、设备。

技术介绍

[0002]移动App产品通常会采用H5承载业务服务，Native承载基础组件服务的混合方式进行开发，在开发过程中，往往每个H5页面的导航栏不仅按钮功能不一致，而且按钮布局也不一致，为满足上述要求就需要前端开发人员和移动端开发人员共同针对每个H5页面设置对应的导航栏样式和功能，如此，升级或修改每个H5页面的导航栏是极其复杂的事情，导致导航栏的代码可移植性、可扩展性和可维护性不强；在迭代开发中，如果有H5页面的导航栏需要定制按钮，则经常需要在H5功能界面上操作导航栏，上述方式存在以下缺陷：
[0003]1)迭代依赖性强，如果某一H5页面的导航栏需改动，会导致客户端发布新版本才能实现；
[0004]2)耦合性高，每次APP的H5界面导航栏设置返回按钮拦截方法，重置标题，设置右上角按钮点击事件方法都需前端开发人员和移动端开发人员共同配合；
[0005]3)页面布局单一，为了避免Native和H5强耦合，在UI设置上尽量避免导航栏右上角放置按钮，这样会导致界面按钮集中放置在页面下方，界面显示臃肿且容易误触。

技术实现思路

[0006]为此，本专利技术提供一种页面导航栏的构建方法及装置、存储介质、设备，旨在解决现有技术中混合开发构建H5页面导航栏时耦合性高、迭代依赖性强、页面布局单一的问题。
[0007]为实现以上目的，本专利技术采用如下技术方案：
[0008]依据本专利技术第一方面，本专利技术提供一种页面导航栏的构建方法，所述方法包括：
[0009]H5开发端通过JSBridge建立与Native端的通信接口；
[0010]获取在H5页面中配置页面导航栏的参数配置信息；所述页面导航栏至少包括一个导航键；
[0011]基于所述通讯接口利用所述参数配置信息生成用于构建页面导航栏的setNavigationbarInfo执行代码；
[0012]运行所述setNavigationbarInfo执行代码，得到目标页面导航栏。
[0013]进一步地，所述基于所述通讯接口利用所述目标配置参数生成用于构建页面导航栏的setNavigationbarInfo执行代码之前，所述方法还包括：
[0014]定义公共按键配置信息；其中，所述公共按键配置信息包括导航键位置对应的导航键数量、导航键尺寸、导航类型、显示内容、字符样式、图标样式、目标地址和拦截方式中至少之一；
[0015]对所述公共按键配置信息设置对应的JSON格式模板，得到公共按键配置参数。
[0016]进一步地，所述获取在H5页面中配置页面导航栏的参数配置信息，包括：
[0017]获取所述页面导航栏中的所述导航键的参数配置信息；
[0018]其中，所述参数配置信息包括导航键位置参数、导航键尺寸参数、导航类型参数、显示内容参数、字符样式参数、图标样式参数、目标地址参数和拦截方式参数中至少之一。
[0019]进一步地，所述获取在H5页面中配置页面导航栏的参数配置信息之后，所述方法还包括：
[0020]将所述参数配置信息转换为JSON格式，得到所述导航键的目标配置参数。
[0021]进一步地，所述基于所述通讯接口利用所述参数配置信息生成用于构建页面导航栏的setNavigationbarInfo执行代码，包括：
[0022]根据所述目标配置参数确定对应的目标公共按键配置参数；
[0023]基于所述通讯接口利用所述目标配置参数和所述目标公共按键配置参数生成所述setNavigationbarInfo执行代码。
[0024]进一步地，若所述页面导航栏的参数配置信息中包含返回导航键，所述方法还包括：
[0025]在所述setNavigationbarInfo执行代码中增加针对所述返回导航键的问询拦截规则。
[0026]进一步地，所述导航键位置包括左侧导航键、中间导航键以及右侧导航键中至少之一；和/或，
[0027]所述导航类型包括返回、关闭、标题、搜索、设置、分享、更多功能中至少之一；和/或，
[0028]所述显示内容包括文本字符、图形标志中至少之一。
[0029]依据本专利技术第二方面，本专利技术提供一种页面导航栏的构建装置，所述装置包括：
[0030]通信建立模块，用于H5开发端通过JSBridge建立与Native端的通信接口；
[0031]参数获取模块，用于获取在H5页面中配置页面导航栏的参数配置信息；所述页面导航栏至少包括一个导航键；
[0032]代码生成模块，用于基于所述通讯接口利用所述参数配置信息生成用于构建页面导航栏的setNavigationbarInfo执行代码；
[0033]代码执行模块，用于运行所述setNavigationbarInfo执行代码，得到目标页面导航栏。
[0034]依据本专利技术第三方面，本专利技术提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序当被处理器执行时使所述处理器执行如本专利技术第一方面中任一项所述的页面导航栏的构建方法。
[0035]依据本专利技术第四方面，本专利技术提供一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如本专利技术第一方面中任一项所述的页面导航栏的构建方法。
[0036]本专利技术采用以上技术方案，至少具备以下有益效果：
[0037]通过本专利技术方案，H5开发端通过JSBridge建立与Native端的通信接口；获取在H5页面中配置页面导航栏的参数配置信息；所述页面导航栏至少包括一个导航键；基于所述通讯接口利用所述参数配置信息生成用于构建页面导航栏的setNavigationbarInfo执行代码；运行所述setNavigationbarInfo执行代码，得到目标页面导航栏，由此，在建立H5端
和Native端通信连接的基础上自动根据页面导航栏的参数配置信息生成执行代码，实现不依赖APP版本更新的H5页面导航栏构建，提高了迭代速度；且执行代码具有通用性，本方案也适用于多种APP。
[0038]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本专利技术。
附图说明
[0039]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0040]图1示出了本专利技术一实施例提供的页面导航栏的构建方法的流程示意图；
[0041]图2a～2b示出了本专利技术一实施例提供的两种页面导航栏的简要示意图；
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面导航栏的构建方法，其特征在于，所述方法包括：H5开发端通过JSBridge建立与Native端的通信接口；获取在H5页面中配置页面导航栏的参数配置信息；所述页面导航栏至少包括一个导航键；基于所述通讯接口利用所述参数配置信息生成用于构建页面导航栏的setNavigationbarInfo执行代码；运行所述setNavigationbarInfo执行代码，得到目标页面导航栏。2.根据权利要求1所述的方法，其特征在于，所述基于所述通讯接口利用所述目标配置参数生成用于构建页面导航栏的setNavigationbarInfo执行代码之前，所述方法还包括：定义公共按键配置信息；其中，所述公共按键配置信息包括导航键位置对应的导航键数量、导航键尺寸、导航类型、显示内容、字符样式、图标样式、目标地址和拦截方式中至少之一；对所述公共按键配置信息设置对应的JSON格式模板，得到公共按键配置参数。3.根据权利要求2所述的方法，其特征在于，所述获取在H5页面中配置页面导航栏的参数配置信息，包括：获取所述页面导航栏中的所述导航键的参数配置信息；其中，所述参数配置信息包括导航键位置参数、导航键尺寸参数、导航类型参数、显示内容参数、字符样式参数、图标样式参数、目标地址参数和拦截方式参数中至少之一。4.根据权利要求3所述的方法，其特征在于，所述获取在H5页面中配置页面导航栏的参数配置信息之后，所述方法还包括：将所述参数配置信息转换为JSON格式，得到所述导航键的目标配置参数。5.根据权利要求4所述的方法，其特征在于，所述基于所述通讯接口利用所述参数配置信息生成用于构建页面导航栏的setNavigationbarInfo执行代码，包括：根据所述目标配置参数确...

【专利技术属性】
技术研发人员：贺俊欣，
申请(专利权)人：上海中通吉网络技术有限公司，
类型：发明
国别省市：