CN111736831A - 一种基于移动端html页面的自定义菜单组件开发方法 - Google Patents

一种基于移动端html页面的自定义菜单组件开发方法 Download PDF

Info

Publication number
CN111736831A
CN111736831A CN202010580445.7A CN202010580445A CN111736831A CN 111736831 A CN111736831 A CN 111736831A CN 202010580445 A CN202010580445 A CN 202010580445A CN 111736831 A CN111736831 A CN 111736831A
Authority
CN
China
Prior art keywords
menu
style
html page
mobile terminal
configuration
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010580445.7A
Other languages
English (en)
Inventor
刘晓
李铁军
徐兵兵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shandong Inspur Business System Co Ltd
Original Assignee
Shandong Inspur Business System Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shandong Inspur Business System Co Ltd filed Critical Shandong Inspur Business System Co Ltd
Priority to CN202010580445.7A priority Critical patent/CN111736831A/zh
Publication of CN111736831A publication Critical patent/CN111736831A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

Abstract

本发明特别涉及一种基于移动端HTML页面的自定义菜单组件开发方法。该基于移动端HTML页面的自定义菜单组件开发方法，基于HTML，JavaScript和CSS语言进行开发，先通过传入相关初始化参数对插件进行控制；然后在功能菜单完成配置初始化之后，以成型标签的形式嵌入到HTML页面；最后经浏览器编辑后生成功能菜单即可。该基于移动端HTML页面的自定义菜单组件开发方法，利用自定义菜单组件帮助开发人员在引入组建后，快速构建菜单功能页面，同时调整对外暴露的参数，从而实现了对每个移动应用的个性化设置，提高了代码的可读性和可维护性，节省了开发人员的时间成本。

Description

一种基于移动端HTML页面的自定义菜单组件开发方法
技术领域
本发明涉及组件开发技术领域，特别涉及一种基于移动端HTML页面的自定义菜单组件开发方法。
背景技术
现如今移动端Hybrid APP(混合模式移动应用)，公众号等应用需求量大，每个对应的产品或者系统几乎都会涵盖移动端的应用需求。当前移动端HTML页面的功能菜单形式多为自己开发的功能菜单样式，通过开发人员手动书写代码实现菜单功能。
但是每次开发都需要开发人员去单独定制新的首页功能菜单，重复劳动量大。同时，面对可编辑、收藏等用户需求，需要进行大量的代码编写和完善，大大延长了产品的开发周期。
基于上述问题，本发明提出了一种基于移动端HTML页面的自定义菜单组件开发方法。旨在利用自定义菜单组件帮助开发人员在引入组建后，快速构建菜单功能页面，同时调整对外暴露的参数实现对每个移动应用的个性化设置，提高代码的可维护性同时节省开发人员的时间成本。
发明内容
本发明为了弥补现有技术的缺陷，提供了一种简单高效的基于移动端HTML页面的自定义菜单组件开发方法。
本发明是通过如下技术方案实现的：
一种基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：基于HTML，JavaScript和CSS语言进行开发，包括以下步骤：
第一步，通过传入相关初始化参数对插件进行控制；
第二步，在功能菜单参数完成初始化配置之后，以成型标签的形式嵌入到HTML页面；
第三步，经浏览器编辑后生成功能菜单即可。
所述第一步中，通过对组件对外暴露的参数进行初始化配置，开发人员可以实现对功能菜单的个性化配置；初始化配置的参数包括功能菜单组成部分的数组，样式定制部分参数和全局控制部分参数。
所述功能菜单组成部分的数组中的每一个元素为一个功能菜单的子元素，包括对当前功能菜单元素的名称，图标，位置，点击事件，双击事件，长按事件以及是否必须项属性的具体配置。
所述样式定制部分参数包括系统样式配置和自定义样式配置两部分；
当前系统自带风格主题API(Application Program Interface，应用程序接口)，如扁平，圆润等等不同风格主题样式，所述系统样式配置用于对当前的系统进行简单的配置，通过调整主题的颜色以及字体大小，实现简单的样式修改；
当对当前系统进行简单配置无法满足用户需求时，使用自定义样式配置，通过声明新的样式文件对功能菜单实现样式重构。
所述全局控制部分参数包括当前菜单是否支持收藏，自定义删除以及位置调整等功能。
所述功能菜单组成部分的数组，样式定制部分参数和全局控制部分参数均为JSON(JavaScript Object Notation，轻量级的数据交换格式)格式。
所述第二步中，参数配置完成后，使用组建的初始化函数init将参数对象传入组件中工具类中进行菜单初始化；
利用组件中的JavaScript工具类对JSON参数对象进行数据解析，通过其中包含参数的对应条件规则对菜单标签进行拼接，如某一个菜单的名称，图标，点击事件等属性；
最后对加载全局参数配置生成最终的完整标签块。
所述第三步中，在用户指定的浏览器页面位置中加载已生成的标签块，即可生成最终的功能菜单。
本发明的有益效果是：该基于移动端HTML页面的自定义菜单组件开发方法，利用自定义菜单组件帮助开发人员在引入组建后，快速构建菜单功能页面，同时调整对外暴露的参数，从而实现了对每个移动应用的个性化设置，提高了代码的可读性和可维护性，节省了开发人员的时间成本。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
附图1为本发明基于移动端HTML页面的自定义菜单组件开发方法示意图。
具体实施方式
为了使本技术领域的人员更好的理解本发明中的技术方案，下面将结合本发明实施例，对本发明实施例中的技术方案进行清楚，完整的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
HTML(HyperText Markup Language)称为超文本标记语言，是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
CSS(Cascading Style Sheets)层叠样式表是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
该基于移动端HTML页面的自定义菜单组件开发方法，基于HTML，JavaScript和CSS语言进行开发，包括以下步骤：
第一步，通过传入相关初始化参数对插件进行控制；
第二步，在功能菜单参数完成初始化配置之后，以成型标签的形式嵌入到HTML页面；
第三步，经浏览器编辑后生成功能菜单即可。
所述第一步中，通过对组件对外暴露的参数进行初始化配置，开发人员可以实现对功能菜单的个性化配置；初始化配置的参数包括功能菜单组成部分的数组，样式定制部分参数和全局控制部分参数。
所述功能菜单组成部分的数组中的每一个元素为一个功能菜单的子元素，包括对当前功能菜单元素的名称，图标，位置，点击事件，双击事件，长按事件以及是否必须项属性的具体配置。
所述样式定制部分参数包括系统样式配置和自定义样式配置两部分；
当前系统自带风格主题API(Application Program Interface，应用程序接口)，如扁平，圆润等等不同风格主题样式，所述系统样式配置用于对当前的系统进行简单的配置，通过调整主题的颜色以及字体大小，实现简单的样式修改；
当对当前系统进行简单配置无法满足用户需求时，使用自定义样式配置，通过声明新的样式文件对功能菜单实现样式重构。
所述全局控制部分参数包括当前菜单是否支持收藏，自定义删除以及位置调整等功能。
所述功能菜单组成部分的数组，样式定制部分参数和全局控制部分参数均为JSON(JavaScript Object Notation，轻量级的数据交换格式)格式。
所述第二步中，参数配置完成后，使用组建的初始化函数init将参数对象传入组件中工具类中进行菜单初始化；
利用组件中的JavaScript工具类对JSON参数对象进行数据解析，通过其中包含参数的对应条件规则对菜单标签进行拼接，如某一个菜单的名称，图标，点击事件等属性；
最后对加载全局参数配置生成最终的完整标签块。
所述第三步中，在用户指定的浏览器页面位置中加载已生成的标签块，即可生成最终的功能菜单。
与目前的现有技术相比，该基于移动端HTML页面的自定义菜单组件开发方法，具有以下特点：
第一、基于HTML，JavaScript和CSS语言进行开发，利用自定义菜单组件帮助开发人员在引入组建后，快速构建菜单功能页面，提高了应用软件的开发效率；
第二、调整对外暴露的参数，从而实现了对每个移动应用的个性化设置，提高了代码的可读性和可维护性，节省了开发人员的时间成本。
以上所述的实施例，只是本发明具体实施方式的一种，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。

Claims (8)

1.一种基于移动端HTML页面的自定义菜单组件开发方法，其特征在于，基于HTML，JavaScript和CSS语言进行开发，具体实施步骤如下：
第一步，通过传入相关初始化参数对插件进行控制；
第二步，在功能菜单参数完成初始化配置之后，以成型标签的形式嵌入到HTML页面；
第三步，经浏览器编辑后生成功能菜单即可。
2.根据权利要求1所述的基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：所述第一步中，通过对组件对外暴露的参数进行初始化配置，开发人员可以实现对功能菜单的个性化配置；初始化配置的参数包括功能菜单组成部分的数组，样式定制部分参数和全局控制部分参数。
3.根据权利要求2所述的基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：所述功能菜单组成部分的数组中的每一个元素为一个功能菜单的子元素，包括对当前功能菜单元素的名称，图标，位置，点击事件，双击事件，长按事件以及是否必须项属性的具体配置。
4.根据权利要求2所述的基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：所述样式定制部分参数包括系统样式配置和自定义样式配置两部分；
当前系统自带风格主题API，所述系统样式配置用于对当前的系统进行简单的配置，通过调整主题的颜色以及字体大小，实现简单的样式修改；
当对当前系统进行简单配置无法满足用户需求时，使用自定义样式配置，通过声明新的样式文件对功能菜单实现样式重构。
5.根据权利要求2所述的基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：所述全局控制部分参数包括当前菜单是否支持收藏，自定义删除以及位置调整。
6.根据权利要求2～5任意一项所述的基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：所述功能菜单组成部分的数组，样式定制部分参数和全局控制部分参数均为JSON格式。
7.根据权利要求6所述的基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：所述第二步中，参数配置完成后，使用组建的初始化函数init将参数对象传入组件中工具类中进行菜单初始化，利用组件中的JavaScript工具类对JSON参数对象进行数据解析，通过其中包含参数的对应条件规则对菜单标签进行拼接，最后对加载全局参数配置生成最终的完整标签块。
8.根据权利要求7所述的基于移动端HTML页面的自定义菜单组件开发方法，其特征在于：所述第三步中，在用户指定的浏览器页面位置中加载已生成的标签块，即可生成最终的功能菜单。
CN202010580445.7A 2020-06-23 2020-06-23 一种基于移动端html页面的自定义菜单组件开发方法 Pending CN111736831A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010580445.7A CN111736831A (zh) 2020-06-23 2020-06-23 一种基于移动端html页面的自定义菜单组件开发方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010580445.7A CN111736831A (zh) 2020-06-23 2020-06-23 一种基于移动端html页面的自定义菜单组件开发方法

Publications (1)

Publication Number Publication Date
CN111736831A true CN111736831A (zh) 2020-10-02

Family

ID=72650633

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010580445.7A Pending CN111736831A (zh) 2020-06-23 2020-06-23 一种基于移动端html页面的自定义菜单组件开发方法

Country Status (1)

Country Link
CN (1) CN111736831A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112434236A (zh) * 2020-11-20 2021-03-02 山东浪潮商用系统有限公司 一种基于js语言的自定义表单方法
CN112559928A (zh) * 2020-12-24 2021-03-26 成都新希望金融信息有限公司 基于混合开发的页面处理方法、装置、电子设备及存储介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160026730A1 (en) * 2014-07-23 2016-01-28 Russell Hasan Html5-based document format with parts architecture
CN111178012A (zh) * 2019-12-03 2020-05-19 腾讯云计算（北京）有限责任公司 一种表单渲染方法、装置、设备及存储介质

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160026730A1 (en) * 2014-07-23 2016-01-28 Russell Hasan Html5-based document format with parts architecture
CN111178012A (zh) * 2019-12-03 2020-05-19 腾讯云计算（北京）有限责任公司 一种表单渲染方法、装置、设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
YANKY: "js控制json生成菜单——自制菜单（一）", pages 1 - 7, Retrieved from the Internet <URL:"https://www.cnblogs.com/yankyblogs/p/9494915.html"> *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112434236A (zh) * 2020-11-20 2021-03-02 山东浪潮商用系统有限公司 一种基于js语言的自定义表单方法
CN112559928A (zh) * 2020-12-24 2021-03-26 成都新希望金融信息有限公司 基于混合开发的页面处理方法、装置、电子设备及存储介质
CN112559928B (zh) * 2020-12-24 2023-09-26 成都新希望金融信息有限公司 基于混合开发的页面处理方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
US11182535B2 (en) Configuring a page for drag and drop arrangement of content artifacts in a page development tool
US7398472B2 (en) Defining the visual appearance of user-interface controls
US20080127133A1 (en) Aggregating portlets for use within a client environment without relying upon server resources
US8930824B2 (en) Facilitating propagation of user interface patterns or themes
KR20050039551A (ko) 컴퓨터 플랫폼용 프로그래밍 인터페이스
CN112882703B (zh) 一种自定义图表插件在线设计方法及装置
US11349902B2 (en) System and method to standardize and improve implementation efficiency of user interface content
WO2017107851A1 (zh) 一种桌面应用组件发布、更新方法及装置
CN111324390A (zh) 实现app内容可配置和实时更新的装置及方法
CN113655999A (zh) 一种页面控件的渲染方法、装置、设备及存储介质
CN111736831A (zh) 一种基于移动端html页面的自定义菜单组件开发方法
CN110941428B (zh) 一种网站创建方法和装置
WO2013109858A1 (en) Design canvas
CN113391808A (zh) 页面的配置方法、装置及电子设备
CN112214202B (zh) 一种无须写代码的手机程序开发系统
Cimino et al. An efficient model-based methodology for developing device-independent mobile applications
CN112015410A (zh) 网页编辑方法、装置、系统以及计算机存储介质
Freeman Pro react 16
CN112434236A (zh) 一种基于js语言的自定义表单方法
US11526578B2 (en) System and method for producing transferable, modular web pages
CN112001157B (zh) 一种网页数据表格在线设计方法及装置
CN114281335A (zh) 视图生成方法和相关设备
KR101228877B1 (ko) 웹 디자인을 이용한 동적 웹 사이트 개발 장치 및 방법
CN112486378B (zh) 图形生成方法、装置、终端及存储介质
CN114237593A (zh) 一种前端页面生成方法、计算机装置和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination