CN113535269A - 可视化动态页面配置方法 - Google Patents

可视化动态页面配置方法 Download PDF

Info

Publication number
CN113535269A
CN113535269A CN202110826786.2A CN202110826786A CN113535269A CN 113535269 A CN113535269 A CN 113535269A CN 202110826786 A CN202110826786 A CN 202110826786A CN 113535269 A CN113535269 A CN 113535269A
Authority
CN
China
Prior art keywords
page
component
display
configuration
development
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
CN202110826786.2A
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.)
Chongqing Fumin Bank Co Ltd
Original Assignee
Chongqing Fumin Bank 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 Chongqing Fumin Bank Co Ltd filed Critical Chongqing Fumin Bank Co Ltd
Priority to CN202110826786.2A priority Critical patent/CN113535269A/zh
Publication of CN113535269A publication Critical patent/CN113535269A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
    • G06F9/4451—User profiles; Roaming
    • 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/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • 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
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及软件开发技术领域，为了解决目前在需要更新手机软件版本的时候采用定制化开发的方式，从而拉长软件上线时间的问题提供了一种可视化动态页面配置方法，包括UI展示组件开发；H5组件开发：根据UI展示组件开发对应的H5组件，规范H5组件的id与出入参数；页面配置：在配置中心中，选择不同的H5组件进行搭配，得到配置页面，后台管理页面对配置页面进行实时展示；数据结构存储：根据配置页面对应的H5组件的id以及出入参数生成页面数据结构并保存；APP组件开发：根据UI展示组件开发APP组件，规范APP组件的id与出入参数；页面展示：解析页面数据结构，并根据解析结果调用对应的APP组件并进行组装渲染后得到展示页面。

Description

可视化动态页面配置方法
技术领域
本发明涉及软件开发技术领域，具体为一种可视化动态页面配置方法。
背景技术
随着智能手机的普及，人们在沟通、社交、娱乐等活动中越来越依赖于手机app软件(app，英文application的简称，即应用软件，通常是指iPhone、安卓等手机应用软件)。手机软件是通过分析，设计，编码，生成软件，而手机软件是一种特殊的软件。其中，手机UI设计是指手机软件的人机交互、操作逻辑、界面美观的整体设计。
由于手机软件的功能通常都是比较丰富的，而这些功能无法在一个页面中同时展示出来，因此现有的手机软件的页面通常都会划分出不同版块后，在对应版块内流动显示不同的内容。尽管流动展示的设计方式虽然能够在一个页面中展示出较多的内容，但是由于现在手机软件功能或内容更新极其频繁，也还是需要频繁更新软件页面。因此若每次更新都采用定制化开发的方式，一方面会拉长软件上线时间，不能及时响应业务的开展，另一方面，虽然功能和内容频繁变化，但是对于同一款软件来说，它的界面的风格、元素等这些并不需要频繁变化，所以采用定制化开发的方式也还会增加开发人员的工作量。
发明内容
本发明意在提供一种可视化动态页面配置方法，以解决目前在需要更新手机软件页面的时候采用定制化开发的方式，从而拉长页面更新时间的问题。
本发明提供基础方案是：可视化动态页面配置方法，包括UI展示组件开发：完成不同素材的UI展示组件的开发；
H5组件开发：根据UI展示组件开发出应用于后管开发页面中的H5组件，通过H5组件将UI展示组件映射到后管开发页面上，规范H5组件的id与出入参数；
页面配置：在配置中心中，选择不同的H5组件进行搭配，得到配置页面，后台管理页面对配置页面进行实时展示；
数据结构存储：当组装完成一个配置页面时，根据配置页面对应的H5组件的id以及出入参数生成页面数据结构并保存；
APP组件开发：根据UI展示组件开发出应用于APP端的APP组件，通过APP组件将UI展示组件映射到APP端，规范APP组件的id与出入参数；
页面展示：解析页面数据结构，并根据解析结果调用对应的APP组件并进行组装渲染后得到与配置页面对应的展示页面并进行展示。
说明：UI展示组件指的是呈现给用户看到的设计图；
H5组件指的是后台管理系统中，根据UI展示组件在B/S结构的开发页面中显示出的开发过程中的组件，为了配置时看效果展示使用；APP组件指的是前端开发中，根据UI展示组件在APP端显示出的组件；
id指的是组件命名的名称，出入参数则包括组件的设计参数，如高度、宽度、留白等设计参数；
数据结构指的是json数据结构，json即JavaScript Object Natation，它是一种轻量级的数据交换格式，适合服务器与JavaScript的交互，数据结构存储中，存储的也就是配置页面对应的配置数据，通过对配置数据的解析能够知道数据结构中各个部分的数据表示的组件是什么、展示的内容是什么，再通过渲染即可得到可视化的展示页面
基础方案的原理及有益效果是：本方案中，在UI展示组件开发中，不同素材的UI展示组件的设计，方便在后续需要使用相同功能或素材时，可以直接调用对应的，无需重新开发，实现了UI展示组件的可复用，与UI展示组件对应的H5组件的开发，通过H5组件实现UI展示组件在后管开发页面的映射后，方便开发人员在H5页面的配置中心中进行H5组件的搭配时，展示出的页面效果即为UI展示组件的展示效果，让开发人员所见即所得，从而方便开发人员能够更准确的根据展示效果进行H5组件的搭配组合；与UI展示组件对应的APP组件的开发，将在配置中心中配置好的配置页面经过对页面数据结构的解析以及对相应的APP组件调用后组装渲染后得到应用于APP端的展示页面进行展示，从而完成展示页面从后台开发到前端展示的整个开发流程。
而在这个过程中，当需要更新功能或内容时，只需要在页面配置的过程中，选择对应的H5组件在配置中心中进行组装后，通过对存储的配置页面对应的页面数据结构进行解析并调用对应的APP组件后得到最终的展示页面，一方面，由于功能或内容的更新只是对应的H5组件以及调用的APP组件进行了变化，而并不是整体的重新开发，因此提高了开发效率；另一方面，在前端展示时，由于只是配置数据发生变化，软件整体上并没有进行重新开发，也就无需进行版本更新，用户只需要刷新展示页面后即可加载更新后的展示页面，能够在第一时间看到更新后的内容，从而能够及时开展业务。
优选方案一：作为基础方案的优选，UI展示组件开发中，采用统一UI设计规范进行UI展示组件的设计。有益效果：本方案中，在设计UI展示组件时采用统一的UI设计规范进行设计，后续在进行新的页面设计和UI展示组件设计时，新设计出来的页面和UI展示组件也能够与以往的页面和UI展示组件组合使用，提高了页面和UI展示组件的可复用性。
优选方案二：作为基础方案的优选，H5组件和APP组件在规范id和出入参数时采用同一设计规范。有益效果：本方案中，当H5组件和APP组件采用同一设计规范对id和出入参进行规范时，当对配置页面的数据结构解析后，由于APP组件与H5组件的id以及出入参数采用同一设计规范，因此可以能够很快的调用出与相应H5组件对应的APP组件，从而加快了对应的展示页面的组装渲染速度。
优选方案三：作为基础方案的优选，页面配置和页面展示过程中约定一致的展示逻辑。有益效果：考虑到开发人员在配置页面时，看到的是后台管理系统的开发页面上展示出来的页面效果，而用户看到的则是前端展示出的页面效果，因此本方案中，将页面配置和页面展示过程中采用一致的展示逻辑后，页面配置过程中的呈现出的页面效果也就与页面展示中呈现出的页面效果一致，从而方便开发人员对展示在APP端的页面效果进行调整。
优选方案四：作为基础方案的优选，页面配置中，还包括权限分配管理。有益效果：考虑到对于不同类型的用户来说，需要展示的内容也可能不同，因此本方案中，权限分配管理的设置一方面方便对展示内容的权限进行管理，另一方面，针对不同类型的推送不同的展示内容，实现了精准内容，从而方便业务的准确开展。
优选方案五：权限分配管理中，对于白名单以外的人员不进行对应部分的展示。有益效果：考虑到现有技术中，一些软件在进行用户的权限管理时，对于不具备操作权限的用户来说，用户是能够看到展示出来的内容，而只是无法访问详细内容，可能会降低用户体验，而本方案中，采用白名单以外的用户不展示对应部分内容展示的方式，一方面，对于白名单以外的用户来说，自己无法访问的内容从一开始就不会看到，从而也就避免了因为能看而无法访问从而导致用户体验降低的情况，另一方面，由于减少了对应部分内容的展示受众，还能够降低由于对应部分内容流出而出现抄袭仿冒等情况。
附图说明
图1为本发明可视化动态页面配置方法实施例一的流程图。
具体实施方式
下面通过具体实施方式进一步详细说明：
实施例一基本如图1所示：
可视化动态页面配置方法，包括UI展示组件开发：采用统一UI设计规范完成不同素材的UI展示组件的开发；
H5组件开发：根据UI展示组件开发出应用于后管开发页面中的H5组件通过H5组件将UI展示组件映射到后管开发页面上，规范H5组件的id与出入参数；
页面配置：在配置中心中，选择不同的H5组件进行搭配，得到配置页面，后台管理页面对配置页面进行实时展示；还包括权限分配管理，根据预设的白名单选择H5组件的展示对象，对于白名单以外的人员，对应的H5组件则将不会进行解析展示。
数据结构存储：当组装完成一个配置页面时，根据配置页面对应的H5组件的id以及出入参数生成页面数据结构并保存；
APP组件开发：根据UI展示组件开发出应用于APP端的APP组件，通过APP组件将UI展示组件映射到APP端，规范APP组件的id与出入参数，APP组件的id与出入参数和对应的H5组件的id和出入参数采用同一设计规范并一一对应。
页面展示：解析页面数据结构，并根据解析结果调用对应的APP组件并进行组装渲染后得到与配置页面对应的展示页面并进行展示；页面配置和页面展示过程中约定一致的展示逻辑；在解析后，对于白名单以外的人员，对应H5组件解析出的APP组件所组装渲染出的展示内容则将不会进行展示。
具体实施过程：在进行页面配置前，需要先完成不同素材的UI展示组件的开发，在开发时采用统一UI设计规范进行开发，如UI展示组件的设计图怎么设计，设计图高度、宽度以及留白设计为多少等。
在完成UI展示组件的设计后，为了让UI组件能够在H5的后台管理的开发页面上进行展示，还会对应UI展示组件开发出能够在后台管理开发页面展示使用的H5组件，即根据UI展示组件开发出一套H5组件，并规范好H5组件的id和出入参数。
然后进行页面配置，在开发页面中，选择相应的H5组件进行搭配后得到配置页面，除了在开发页面中进行各个版块的H5组件的搭配，还能对版块内的内容进行增减的搭配，最终完成H5组件的搭配后得到配置页面。在完成配置页面后，根据配置页面对应的H5组件的id以及出入参数生成页面数据结构并保存。
同样的，为了保证UI展示组件可以在APP端进行展示，也就还需要开发出一套与UI展示组件对应且能够在APP端展示的APP组件，规范APP组件的id与出入参数，APP组件的id与出入参数和对应的H5组件的id和出入参数采用同一设计规范并一一对应。
在利用APP组件组装渲染得到展示页面的过程中，首先解析页面数据结构，然后根据解析结果调用对应的APP组件并进行组装渲染后得到与配置页面对应的展示页面并进行展示，解析过程中，根据解析结果可以解析出页面有哪些组件，组件展示什么内容，如解析出页面包括显示广告的组件，然后根据再对照解析结果去调用广告对应的APP组件，然后对调用出来的各个APP组件进行组装渲染后即可得到展示页面，从而完成最终完成页面的展示。
实施例二
与实施例一不同之处在于，本实施例中，还包括以下内容：在UI展示组件开发中，还对UI展示组件进行重要等级标记；
在页面展示中，根据UI展示组件的重要等级从预设的展示方式表中确定出对应APP组件的展示方式，并根据确定出的展示方式确定对应APP组件的展示方式。
现有技术中，当页面上的一个功能区需要对多个APP组件进行展示时，如页面中的广告区需要显示多个广告时，都是采用流动展示各个广告主题的方式，用户若想要详细了解对应的广告内容，则需要访问对应的广告主题后跳转到广告的详细页面。
而本方案中则摒弃采用这种方式，则是会根据不同的参考维度来确定不同的广告的展示方式。在开发UI展示组件时，还根据当前的需求评定UI展示组件的重要等级，设定本实施例中，重要等级分为高、中、低三类，UI展示组件重要等级的评定可以由前端业务人员在提出需求时由前端业务人员给出，开发人员在开发对应的UI展示组件时根据前端开发人员给出的重要等级进行标注，或者由UI展示组件的内容与当前公司发展方向匹配度进行评定，如公司当前首推A类活动时，则与A类活动相关的UI展示组件的重要等级即为高级，而在判定相关度时，则采用比较两者关键标签的方式，即在比较前先分别获取两者的关键标签，然后进行比较，若比较出两者关键标签相同，则判定两者匹配度高，对应的UI展示组件等级为高级，若两者关键标签完全不同，则判定两者匹配度低，对应的UI展示组件等级为低级，则若是两者关键标签有部分相似，则判定两者匹配度中，对应的UI展示组件等级为中级。
在根据APP组件组装渲染展示页面时，还会根据UI展示组件的重要等级从预设的展示方式表中确定出对应APP组件的展示方式，并根据确定出的展示方式确定对应APP组件的展示方式，设定本实施例中，重要等级与展示方式的对应关系如下表。
Figure BDA0003174033250000061
若UI展示组件的重要等级为高级，则对应的APP组件在展示时，会展示广告标语、活动内容、活动时间和活动方式，用户通过APP组件则能够很清楚的了解到活动内容，而若是UI展示组件的重要等级为低级，则对应的APP组件在展示时，只会展示活动标语，如“鲜花促销”，若用户需要了解关于该活动的更多内容，就需要进行进一步访问。
与现有技术相比，本实施例中，通过对UI展示组件进行重要等级评定的方式，针对重要的UI展示组件进行内容的重点展示，而针对不重要的UI展示组件则只进行内容的简单展示，一方面，通过展示方式的不同体现出UI展示组件的重要程度，另一方面，本方案中选择重要的UI展示组件进行重点展示的方式，与全部UI展示组件重点展示相比，页面会更简洁，而与全部UI展示组件简洁显示相比，会更突出重要的UI展示组件。
以上所述的仅是本发明的实施例，方案中公知的具体结构及特性等常识在此未作过多描述，所属领域普通技术人员知晓申请日或者优先权日之前发明所属技术领域所有的普通技术知识，能够获知该领域中所有的现有技术，并且具有应用该日期之前常规实验手段的能力，所属领域普通技术人员可以在本申请给出的启示下，结合自身能力完善并实施本方案，一些典型的公知结构或者公知方法不应当成为所属领域普通技术人员实施本申请的障碍。应当指出，对于本领域的技术人员来说，在不脱离本发明结构的前提下，还可以作出若干变形和改进，这些也应该视为本发明的保护范围，这些都不会影响本发明实施的效果和专利的实用性。本申请要求的保护范围应当以其权利要求的内容为准，说明书中的具体实施方式等记载可以用于解释权利要求的内容。

Claims (6)

1.可视化动态页面配置方法，其特征在于：包括UI展示组件开发：完成不同素材的UI展示组件的开发；
H5组件开发：开发出应用于后管开发页面中的H5组件，通过H5组件将UI展示组件映射到后管开发页面上，规范H5组件的id与出入参数；
页面配置：在配置中心中，选择不同的H5组件进行搭配，得到配置页面，后台管理页面对配置页面进行实时展示；
数据结构存储：当组装完成一个配置页面时，根据配置页面对应的H5组件的id以及出入参数生成页面数据结构并保存；
APP组件开发：开发出应用于APP端的APP组件，通过APP组件将UI展示组件映射到APP端，规范APP组件的id与出入参数；
页面展示：解析配置页面的数据结构，并根据解析结果调用对应的APP组件并进行组装渲染后得到与配置页面对应的展示页面并进行展示。
2.根据权利要求1所述的可视化动态页面配置方法，其特征在于：UI展示组件开发中，采用统一UI设计规范进行UI展示组件的设计。
3.根据权利要求1所述的可视化动态页面配置方法，其特征在于：在规范id和出入参数时，采用同一设计规范。
4.根据权利要求1所述的可视化动态页面配置方法，其特征在于：页面配置和页面展示过程中约定一致的展示逻辑。
5.根据权利要求1所述的可视化动态页面配置方法，其特征在于：页面配置中，还包括权限分配管理：根据预设的白名单选择H5组件的展示对象，在白名单以内的用户进行对应部分的内容展示。
6.根据权利要求5所述的可视化动态页面配置方法，其特征在于：权限分配管理中，对于白名单以外的用户不进行对应部分内容的展示。
CN202110826786.2A 2021-07-21 2021-07-21 可视化动态页面配置方法 Pending CN113535269A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110826786.2A CN113535269A (zh) 2021-07-21 2021-07-21 可视化动态页面配置方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110826786.2A CN113535269A (zh) 2021-07-21 2021-07-21 可视化动态页面配置方法

Publications (1)

Publication Number Publication Date
CN113535269A true CN113535269A (zh) 2021-10-22

Family

ID=78129188

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110826786.2A Pending CN113535269A (zh) 2021-07-21 2021-07-21 可视化动态页面配置方法

Country Status (1)

Country Link
CN (1) CN113535269A (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109614568A (zh) * 2018-12-07 2019-04-12 微梦创科网络科技（中国）有限公司 一种页面生成方法及装置
CN111324390A (zh) * 2020-02-20 2020-06-23 苏宁云计算有限公司 实现app内容可配置和实时更新的装置及方法
CN111538547A (zh) * 2020-04-29 2020-08-14 中国银行股份有限公司 应用程序的应用页面配置方法及装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109614568A (zh) * 2018-12-07 2019-04-12 微梦创科网络科技（中国）有限公司 一种页面生成方法及装置
CN111324390A (zh) * 2020-02-20 2020-06-23 苏宁云计算有限公司 实现app内容可配置和实时更新的装置及方法
CN111538547A (zh) * 2020-04-29 2020-08-14 中国银行股份有限公司 应用程序的应用页面配置方法及装置

Similar Documents

Publication Publication Date Title
CN113691853B (zh) 页面显示方法、装置及存储介质
US20170357487A1 (en) Generation of an application from data
CN109863527A (zh) 用于展现的本地内容的服务器侧渲染的方法和系统
CN107391134B (zh) 一种通用移动应用交互界面自动生成与动态变换方法与装置
CA2539130A1 (en) System and method for applying development patterns for component based applications
CN105190664A (zh) 报告移动应用的动作
US20130117719A1 (en) Context-Based Adaptation for Business Applications
US20170169474A1 (en) Internet-based display material system and internet-based display material producing method
CN108897541A (zh) 应用程序的视觉还原方法、装置、存储介质及终端
CN114238808A (zh) 页面展示方法、装置、计算机设备和存储介质
CN112711414A (zh) 一种表单界面适配展现方法、装置及存储介质
US20110191165A1 (en) Web-based system
CN109035623A (zh) 自助终端的界面显示方法、界面显示装置及电子设备
US20150012354A1 (en) Method and System for Placing and Presenting Advertisements
CN113535269A (zh) 可视化动态页面配置方法
US20200118176A1 (en) System and method for identifying members of a dynamic target segment
US20190250896A1 (en) System and method for developing software applications of wearable devices
CN113297258B (zh) 一种基于目标人群数据提取的定制化信息推送方法及装置
Noh et al. A Study on Improvement of Electronic Library Services Using User Review Data in Mobile App Market
CN114064169A (zh) 一种数据展示方法、装置及存储介质
CN113887185A (zh) 一种电子合同的生成方法及生成装置
US10990924B2 (en) System and method for variant content management
CN113312104A (zh) 一种基于小程序的广告转化方法和系统
CN111241089A (zh) Erp系统二次开发方法、系统、装置及可读存储介质
Sang BIBLIOMETRIC INSIGHTS INTO THE EVOLuTION OF DIGITAL MARKETING TRENDS

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20211022

RJ01 Rejection of invention patent application after publication