CN108255485A - 页面搭建方法、设备及电子设备 - Google Patents

页面搭建方法、设备及电子设备 Download PDF

Info

Publication number
CN108255485A
CN108255485A CN201710865685.XA CN201710865685A CN108255485A CN 108255485 A CN108255485 A CN 108255485A CN 201710865685 A CN201710865685 A CN 201710865685A CN 108255485 A CN108255485 A CN 108255485A
Authority
CN
China
Prior art keywords
page
source code
configuration
component source
page assembly
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.)
Granted
Application number
CN201710865685.XA
Other languages
English (en)
Other versions
CN108255485B (zh
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.)
Alibaba China Co Ltd
Original Assignee
Ucweb Inc
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 Ucweb Inc filed Critical Ucweb Inc
Priority to CN201710865685.XA priority Critical patent/CN108255485B/zh
Publication of CN108255485A publication Critical patent/CN108255485A/zh
Application granted granted Critical
Publication of CN108255485B publication Critical patent/CN108255485B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种页面搭建方法、设备及电子设备。该方法包括:获取页面组件的组件源码;根据组件源码,生成对应的页面组件的配置界面,供用户通过配置界面配置对应的页面组件,实施页面搭建。根据本发明,可以根据包括配置信息的组件源码,直接生成对应的页面组件的配置界面。降低开发和维护成本。同时,还能降低生成页面时的数据读取成本。

Description

页面搭建方法、设备及电子设备
技术领域
本发明涉及互联网技术领域,更具体地,涉及一种页面搭建方法、设备及电子设备。
背景技术
随着互联网技术飞速发展,通过各类网站进行信息发布、产品推广的需求大量爆发,随之产生大量针对个性化需求搭建网页页面的需求,因此,一些可以提供在线页面搭建服务的在线页面搭建工具(例如页面搭建平台、站点)应运而生。在线页面搭建工具可以提供搭建页面的页面组件,用户可以通过可视化的拖拽页面组件、配置页面组件的方式达到设计、生成页面的效果。
但是,目前大多数在线页面搭建工具的页面组件以及对应的配置界面,都依赖于人工定制:
一种方式是为每个页面组件单独人工定制一套特定的配置界面,这样可以灵活地产生各种符合需求的页面组件的配置界面,但是,开发以及维护的成本较高,并且难以覆盖所有的需求;
另一种方式是为每个页面组件编写一个配置声明文件(通常是JSON或XML的文件格),在线页面搭建工具通过读取配置声明文件自动生成对应的页面组件的配置界面,通过约束限制,使页面组件的配置局限在有限的配置类型中,较前一种方式,可以免去了针对不同页面组件的配置界面开发,但是,因为配置声明文件本身和页面组件的组件源码分离并无直接关联,而页面组件的配置通常是遵循私有协议,开发对应的配置声明文件需要学习成本,此外在页面组件版本迭代时,配置声明文件也需要同步修改,因此,依然存在配置声明文件的开发和维护成本;
而上述两种方式在应用时,用户配置页面组件的配置界面生成的配置数据,与页面组件本身依旧是割离关系,需要通过数据读取机制才能将配置数据传递到页面组件的内部,才能对应生成的页面源码,用于生成搭建的页面,因此,存在数据读取成本。
因此,发明人认为,有必要对上述现有技术中存在的问题进行改进。
发明内容
本发明的一个目的是提供一种用于搭建页面的新技术方案。
根据本发明的第一方面,提供了一种页面搭建方法,包括:
获取页面组件的组件源码,
其中,所述页面组件用于搭建页面,所述组件源码包括配置信息,所述配置信息用于声明对应的所述页面组件中可被修改的配置项以及所述配置项的数据类型;
根据所述组件源码,生成对应的所述页面组件的配置界面,供用户通过所述配置界面配置对应的所述页面组件,实施页面搭建。
可选地,所述获取页面组件的组件源码的步骤包括:
获取所述页面组件的原始源码,在所述原始源码中添加所述配置信息,生成对应的所述组件源码。
可选地,所述根据所述组件源码,生成对应的所述页面组件的配置界面的步骤包括:
解析所述组件源码,得到对应的结构描述文件,
其中,所述结构描述文件用于描述对应的所述页面组件以及所述配置信息;
解析所述结构描述文件,渲染生成对应的所述配置界面。
可选地,所述解析所述组件源码,得到对应的结构描述文件的步骤包括:
解析所述组件源码,得到与所述组件源码对应的语法树;
解析所述语法树,生成所述结构描述文件。
可选地,所述结构描述文件是JSON格式文件。
可选地,所述方法还包括:
响应于用户对所述配置界面实施的配置操作,获取对应的所述页面组件的配置结果;
根据所述配置结果和所述组件源码,生成对应的页面源码,以用于生成所搭建的页面。
可选地,所述方法还包括:
获取所述配置结果之后,在检查确定所述配置结果符合所述配置信息中声明的所述数据类型时,执行所述生成页面源码的步骤。
可选地,
所述组件源码是基于JavaScript的class,所述配置信息通过所述class的PropTypes声明;
和/或
所述数据类型至少包括数字、字符串、时间、链接地址、邮箱地址、颜色值、自定义类型。
根据本发明的第二方面,提供一种页面搭建设备,包括:
组件源码获取单元,用于获取页面组件的组件源码,
其中,所述页面组件用于搭建页面,所述组件源码包括配置信息,所述配置信息用于声明对应的所述页面组件中可被修改的配置项以及所述配置项的数据类型;
配置界面生成单元,用于根据所述组件源码,生成对应的所述页面组件的配置界面,供用户通过所述配置界面配置对应的所述页面组件,实施页面搭建。
根据本发明的第三方面,提供一种电子设备,包括:
显示装置,用于显示人机交互界面;
存储器,用于存储可执行的指令;
处理器,用于根据所述指令的控制运行所述电子设备,以执行本发明的第一方面提供的任意一项所述的页面搭建方法。
本发明的发明人发现,在现有技术中,在线页面搭建工具在提供页面组件的配置界面时,通常需要人工定制开发或者编写对应的配置声明文件,开发和维护成本较高,并且,在生成页面源码时,需要通过数据读取机制获取用户在配置界面输入的配置数据,存在数据读取成本。因此,本发明所要实现的技术任务或者所要解决的技术问题是本领域技术人员从未想到的或者没有预期到的,故本发明是一种新的技术方案。
通过以下参照附图对本发明的示例性实施例的详细描述,本发明的其它特征及其优点将会变得清楚。
附图说明
被结合在说明书中并构成说明书的一部分的附图示出了本发明的实施例,并且连同其说明一起用于解释本发明的原理。
图1是显示可用于实现本发明的实施例的电子设备的硬件配置的例子的框图。
图2示出了本发明实施例的页面搭建方法的流程图。
图3示出了本发明实施例的生成配置界面的步骤流程图。
图4示出了本发明实施例的生成结构描述文件的步骤流程图。
图5示出了本发明实施例的页面搭建方法的又一流程图。
图6是本发明实施例的页面搭建方法的例子的示意图。
图7示出了本发明实施例的页面搭建设备的框图。
图8示出了本发明实施例的电子设备的框图。
具体实施方式
现在将参照附图来详细描述本发明的各种示例性实施例。应注意到:除非另外具体说明,否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。
以下对至少一个示例性实施例的描述实际上仅仅是说明性的,决不作为对本发明及其应用或使用的任何限制。
对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论,但在适当情况下,所述技术、方法和设备应当被视为说明书的一部分。
在这里示出和讨论的所有例子中,任何具体值应被解释为仅仅是示例性的,而不是作为限制。因此,示例性实施例的其它例子可以具有不同的值。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步讨论。
<硬件配置>
图1是示出可以实现本发明的实施例的电子设备1000的硬件配置的框图。
电子设备1000可以是便携式电脑、台式计算机、手机、平板电脑等。如图1所示,电子设备1000可以包括处理器1100、存储器1200、接口装置1300、通信装置1400、显示装置1500、输入装置1600、扬声器1700、麦克风1800等等。其中,处理器1100可以是中央处理器CPU、微处理器MCU等。存储器1200例如包括ROM(只读存储器)、RAM(随机存取存储器)、诸如硬盘的非易失性存储器等。接口装置1300例如包括USB接口、耳机接口等。通信装置1400例如能够进行有线或无线通信,具体地可以包括Wifi通信、蓝牙通信、2G/3G/4G/5G通信等。显示装置1500例如是液晶显示屏、触摸显示屏等。输入装置1600例如可以包括触摸屏、键盘、体感输入等。用户可以通过扬声器1700和麦克风1800输入/输出语音信息。
图1所示的电子设备仅仅是说明性的并且决不意味着对本发明、其应用或使用的任何限制。应用于本发明的实施例中,电子设备1000的所述存储器1200用于存储指令,所述指令用于控制所述处理器1100进行操作以执行本发明实施例提供的任意一项页面搭建方法,包括:
获取页面组件的组件源码,
其中,所述页面组件用于搭建页面,所述组件源码包括配置信息,所述配置信息用于声明对应的所述页面组件中可被修改的配置项以及所述配置项的数据类型;
根据所述组件源码,生成对应的所述页面组件的配置界面,供用户通过所述配置界面配置对应的所述页面组件,实施页面搭建。
本领域技术人员应当理解,尽管在图1中对电子设备1000示出了多个装置,但是,本发明可以仅涉及其中的部分装置,例如,电子设备1000只涉及处理器1100和存储装置1200。技术人员可以根据本发明所公开方案设计指令。指令如何控制处理器进行操作,这是本领域公知,故在此不再详细描述。
<实施例>
<方法>
在本实施例中,提供一种页面搭建方法,如图2所示,包括:
步骤S2100,获取页面组件的组件源码。
页面组件用于搭建页面。页面组件是搭建页面的最小元素,由一个或多个Web元素组成。常用的Web元素包括例如框架类元素(例如<div>、<table>等)、标签类元素(例如<p>、<h1>等)、表单类元素(例如<form>、<input>等)、外链类元素(例如icon、font等)。页面组件可以由提供页面搭建服务的在线页面搭建工具(例如页面搭建网站、页面搭建平台)提供、或者由页面组件开发者提供。具有页面搭建需求的用户,可以根据自身的需求,通过对拖拽、叠加页面组件来对应设计搭建页面。
页面组件通过组件源码实现。组件源码通常包括对应的页面组件的结构、样式、行为等。通常页面组件的组件源码基于JavaScript(直译式脚本语言)实现,或者还可以通过JavaScript、CSS(Cascading Style Sheets,层叠样式表)、HTML(Hyper Text MarkupLanguage,超文本标记语言)共同实现。
在本实施例中,获取的组件源码中包括配置信息,所述配置信息用于声明对应的所述页面组件中可被修改的配置项以及对应的可被修改的配置项的数据类型。可被修改的配置项可以是该页面组件中包括的数字、字符串、时间、链接地址等。具体地,可被修改的配置的数据类型至少包括数字、字符串、时间、链接地址、邮箱地址、颜色值、自定义类型。自定义类型可以页面组件的开发人员或者页面组件的应用对象的需求进行设置。
在本实施例中,组件源码中包括配置信息,使得在后续步骤S2200中,根据包括配置信息的组件源码,直接生成对应页面组件的配置界面,无需人工定制页面组件的配置界面或额外编写配置声明文件,省去对应的开发和维护成本。同时,配置信息声明在页面组件的组件源码中,在生成页面源码时,可以将用户通过页面组件的配置界面输入的配置结果直接注入组件内部,减少数据读取成本。
在本实施例中,获取包括配置信息的组件源码,可以页面组件开发过程中将配置信息声明在页面组件的组件源码中。例如,所述组件源码是基于JavaScript开发,组件源码是基于JavaScript的class(组件类),对应的配置信息通过该class的PropTypes声明。
或者,在本实施例中,所述获取页面组件的组件源码的步骤还可以包括:
获取所述页面组件的原始源码,在所述原始源码中添加所述配置信息,生成对应的所述组件源码。
页面组件的原始源码中不包含本实施例中的配置信息,例如,现有技术中需要通过配置声明文件进行限制约束的页面组件的组件源码。获取页面组件的原始源码后,可以根据具体地页面组件的开发需求,在所述原始源码中添加所述配置信息,生成对应的所述组件源码。例如,将原始源码封装为JavaScript的class,对应的配置信息通过该class的PropTypes声明。通过该获取页面组件的组件源码的步骤,可以对应现有技术中的页面组件进行优化,实现根据包括配置信息的组件源码,自动生成对应页面组件的配置界面的技术效果。
在本实施例中,组件源码包括的配置信息中,还可以包括可被修改的配置项的标题和描述。具体地,组件源码是基于JavaScript的class,对应的配置信息通过该class的PropTypes声明时,还可以通过JsDoc代码注释的方式注明对应的配置项的标题和描述。
步骤S2200,根据组件源码,生成对应的所述页面组件的配置界面,供用户通过所述配置界面配置对应的页面组件,实施页面搭建。
具体地,步骤S2200可以如图3所示,包括:
步骤S2210,解析组件源码,得到对应的结构描述文件,
其中,结构描述文件用于描述对应的页面组件以及配置信息;
步骤S2220,解析结构描述文件,渲染生成对应的配置界面。
基于组件源码所基于的代码语言对组件源码进行解析,通过解析组件源码可以得到对应的页面组件的结构、样式、行为以及对应的配置信息。根据解析得到的内容,可以对应得到描述页面组件以及配置信息的结构化数据,生成对应的符合预设文件格式的包括该结构化数据的结构描述文件。该预设文件格式可以根据具体应用场景进行设置,例如,JSON格式。JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式。在一个例子中,结构描述文件是JSON格式文件。
具体地,步骤S2210可以如图4所示,包括:
步骤S2211,解析组件源码,得到与组件源码对应的语法树;
步骤S2212,解析语法树,生成结构描述文件。
解析组件源码,可以基于组件源码的编码语言,以预设的解析规则进行解析,解析后可以得到对应的语法树。该语法树是组件源码的转换表达形式,具体内容包括组件源码对应的页面组件的结构、样式、行为以及对应的配置信息。在得到语法树后,可以解析该语法树,得到对应的结构化数据生成对应结构描述文件。
例如,假设组件源码为下述内容:
解析该组件源码,得到对应的语法树内容为:
解析该语法树,得到对应的对应结构描述文件,内容如下:
当用户实施操作选择页面组件进行页面搭建时,可以读取该页面组件对应的结构描述文件,根据该结构描述文件,调用例如渲染引擎或者渲染组件来渲染生成对应的页面组件的配置界面。渲染引擎或者渲染组件可以由实施本实施例的设备本地安装的浏览器或者类似浏览器应用提供。
该配置界面可以响应用户操作的人机交互界面。该配置界面是一个富交互的表单。用户可以在该配置界面中通过文本编辑框输入字符串、数字,通过颜色选择器挑选颜色值,甚至通过文件上传工具上一张图片等操作来实现对页面组件的配置,以使得页面组件符合自身的页面搭建需求,来实施页面搭建。
当用户页面组件的配置界面实施配置操作时,本实施例中提供的页面搭建方法,如图5所示,还包括:
步骤S2300,响应于用户对所述配置界面实施的配置操作,获取对应的所述页面组件的配置结果;
具体地,用户实施的配置操作可以包括通过文本编辑框输入字符串、数字,或者通过颜色选择器挑选颜色值,甚至通过文件上传工具上一张图片等操作;
该配置结果可以被保存Object对象中,可在步骤S2400中被调用;
步骤S2400,根据所述配置结果和所述组件源码,生成对应的页面源码,以用于生成所搭建的页面。
具体地,在本实施例中,组件源码中包括用于配置信息,该配置信息用于声明对应的页面组件可被修改的配置项,对应地,获取用户对页面组件的配置结果后,可以根据配置信息将配置结果直接注入组件源码中生成对应的页面源码,例如,配置结果保存成Object对象后,可以通过对组件源码初始化直接调用该Object实现页面源码。在得到与页面组件对应的页面源码后,可以生成该页面组件对应的页面元素,类似地,对用户选择或配置的多个页面组件通过本实施例的方法得到对应的页面元素,组合多个页面元素就可以生成用户所搭建的页面。
在实际应用中,用户配置页面组件时可能因为误操作等原因,输入的配置数据类型与页面组件本身可以支持的数据类型并不一致,出现配置错误。在本实施例中,提供的页面搭建方法还包括:
获取所述配置结果之后,在检查确定所述配置结果符合所述配置信息中声明的所述数据类型时,执行所述生成页面源码的步骤。
配置信息中声明的数据类型是对应的页面组件中可被修改的配置项支持的数据类型。通过在检查配置结果中用户配置的数据类型,确定该数据类型符合配置信息中的配置类型,可以确定用户输入的配置数据类型与页面组件本身可以支持的数据类型一致,例如配置项targetURL属于字符串类型,且应该是以“https://”或“http://”开头,用户配置的数据类型应该符合字符串类型并且以“https://”或“http://”开头。
在确定用户输入的配置数据类型与页面组件本身可以支持的数据类型一致时,才执行后续的步骤S2400生成页面源码,可以避免出现配置错误。
而当检查确定所述配置结果不符合所述配置信息中声明的所述数据类型时,还可以通过弹出提示框、发出报警音等提醒用户配置错误。
<例子>
以下将进一步结合图6举例本实施例中提供的页面搭建方法。
在本例中,以页面搭建中最常见的“点击跳转按钮”组件作为示例,对应获取的按钮组件的组件源码基于JavaScript实现,通过ProTypes声明对应的配置信息,并且以JsDoc代码注释注明配置项的标题和描述,具体如下:
根据如图2或图3或图4所示的方法,解析上述组件源码,得到对应的JSON格式的结构描述文件如下:
当用户选择对该按钮组件后,解析上述结构化文件,生成对应的按钮组件的配置界面向用户展示,如图6所示。
在本例中,用户对如图6所示的配置界面中,在按钮文字一栏输入文字内容、选择颜色以及在跳转地址一栏输入要配置的网址“XX.cn”并点击保存,得到对应的配置结果,并根据配置结果以及对应的组件源码,生成对应的页面源码如下:
在得到页面源码后,可以生成该按钮组件对应的按钮,类似地,对用户选择或配置的多个页面组件通过本例的方法得到对应的页面元素,组合多个页面元素就可以生成用户所搭建的页面。
以上已经结合附图和例子说明了本实施例中提供的页面搭建方法,根据包括配置信息的组件源码,直接生成对应的页面组件的配置界面,无需人工定制页面组件的配置界面或者额外编写对应的配置声明文件,省去对应的开发和维护成本。同时,配置信息声明在页面组件的组件源码中,在生成页面源码时,可以将用户通过页面组件的配置界面输入的配置结果直接注入组件内部,减少数据读取成本。
<页面搭建设备>
在本实施例中,还提供一种页面搭建设备3000,如图7所示,包括:组件源码获取单元3100以及配置界面生成单元3200,用于实施本实施例中提供的页面搭建方法,在此不再赘述。
页面搭建设备3000,包括:
组件源码获取单元3100,用于获取页面组件的组件源码,
其中,所述页面组件用于搭建页面,所述组件源码包括配置信息,所述配置信息用于声明对应的所述页面组件中可被修改的配置项以及所述配置项的数据类型;
配置界面生成单元3200,用于根据所述组件源码,生成对应的所述页面组件的配置界面,供用户通过所述配置界面配置对应的所述页面组件,实施页面搭建。
可选地,所述组件源码获取单元3100还包括:
用于获取所述页面组件的原始源码,在所述原始源码中添加所述配置信息,生成对应的所述组件源码的装置。
可选地,所述配置界面生成单元3200包括:
用于解析所述组件源码,得到对应的结构描述文件的装置,
其中,所述结构描述文件用于描述对应的所述页面组件以及所述配置信息;
用于解析所述结构描述文件,渲染生成对应的所述配置界面的装置。
可选地,所述用于解析所述组件源码,得到对应的结构描述文件的装置还用于
解析所述组件源码,得到与所述组件源码对应的语法树;
解析所述语法树,生成所述结构描述文件。
可选地,所述结构描述文件是JSON格式文件。
可选地,所述页面搭建设备3000还包括:
用于响应于用户对所述配置界面实施的配置操作,获取对应的所述页面组件的配置结果的装置;
用于根据所述配置结果和所述组件源码,生成对应的页面源码,以用于生成所搭建的页面的装置。
可选地,所述页面搭建设备3000还包括:
用于获取所述配置结果之后,在检查确定所述配置结果符合所述配置信息中声明的所述数据类型时,执行所述生成页面源码的步骤的装置。
可选地,
所述组件源码是基于JavaScript的class,所述配置信息通过所述class的PropTypes声明;
和/或
所述数据类型至少包括数字、字符串、时间、链接地址、邮箱地址、颜色值、自定义类型。
在本实施例中,页面搭建设备3000的实施形式可以是多样地,例如,可以是在线页面搭建工具(网站或者应用平台)的功能单元,或者是在线页面搭建工具(网站或者应用平台)本身,还可以是如图1所示的电子设备1000。
本领域技术人员应当明白,可以通过各种方式来实现页面搭建设备3000。例如,可以通过指令配置处理器来实现页面搭建设备3000。例如,可以将指令存储在ROM中,并且当启动设备时,将指令从ROM读取到可编程器件中来实现页面搭建设备3000。例如,可以将页面搭建设备3000固化到专用器件(例如ASIC)中。可以将页面搭建设备3000分成相互独立的单元,或者可以将它们合并在一起实现。页面搭建设备3000可以通过上述各种实现方式中的一种来实现,或者可以通过上述各种实现方式中的两种或更多种方式的组合来实现。
<电子设备>
在本实施例中,还提供一种电子设备4000,如图8所示,包括:
显示装置4100,用于显示人机交互界面;
存储器4200,用于存储可执行的指令;
处理器4300,用于根据所述指令的控制运行所述电子设备,以执行本实施例中提供的任意一项所述的页面搭建方法。
该电子设备4000可以是手机、掌上电脑、平板电脑、笔记本电脑、台式电脑等。具体的一个例子中,电子设备4000的硬件配置可以如图1所示的电子设备4000。
以上已经结合附图和例子描述了本发明的实施例,根据本实施例,提供一种页面搭建方法、设备及电子设备,可以根据包括配置信息的组件源码,直接生成对应的页面组件的配置界面,无需人工定制页面组件的配置界面或者额外编写对应的配置声明文件,省去对应的开发和维护成本。同时,配置信息声明在页面组件的组件源码中,在生成页面源码时,可以将用户通过页面组件的配置界面输入的配置结果直接注入组件内部,减少数据读取成本。
本领域技术人员公知的是,随着诸如大规模集成电路技术的电子信息技术的发展和软件硬件化的趋势,要明确划分计算机***软、硬件界限已经显得比较困难了。因为,任何操作可以软件来实现,也可以由硬件来实现。任何指令的执行可以由硬件完成,同样也可以由软件来完成。对于某一机器功能采用硬件实现方案还是软件实现方案,取决于价格、速度、可靠性、存储容量、变更周期等非技术性因素。因此,对于电子信息技术领域的普通技术人员来说,更为直接和清楚地描述一个技术方案的方式是描述该方案中的各个操作。在知道所要执行的操作的情况下,本领域技术人员可以基于对所述非技术性因素的考虑直接设计出期望的产品。
本发明可以是***、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质,其上载有用于使处理器实现本发明的各个方面的计算机可读程序指令。
计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身,诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如,通过光纤电缆的光脉冲)、或者通过电线传输的电信号。
这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备,或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令,并转发该计算机可读程序指令,以供存储在各个计算/处理设备中的计算机可读存储介质中。
用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码,所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等,以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中,通过利用计算机可读程序指令的状态信息来个性化定制电子电路,例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA),该电子电路可以执行计算机可读程序指令,从而实现本发明的各个方面。
这里参照根据本发明实施例的方法、装置(***)和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解,流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合,都可以由计算机可读程序指令实现。
这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器,从而生产出一种机器,使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时,产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中,这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作,从而,存储有指令的计算机可读介质则包括一个制造品,其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。
也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上,使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤,以产生计算机实现的过程,从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。
附图中的流程图和框图显示了根据本发明的多个实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分,所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的***来实现,或者可以用专用硬件与计算机指令的组合来实现。对于本领域技术人员来说公知的是,通过硬件方式实现、通过软件方式实现以及通过软件和硬件结合的方式实现都是等价的。
以上已经描述了本发明的各实施例,上述说明是示例性的,并非穷尽性的,并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下,对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择,旨在最好地解释各实施例的原理、实际应用或对市场中的技术改进,或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。本发明的范围由所附权利要求来限定。

Claims (10)

1.一种页面搭建方法,其特征在于,包括:
获取页面组件的组件源码,
其中,所述页面组件用于搭建页面,所述组件源码包括配置信息,所述配置信息用于声明对应的所述页面组件中可被修改的配置项以及所述配置项的数据类型;
根据所述组件源码,生成对应的所述页面组件的配置界面,供用户通过所述配置界面配置对应的所述页面组件,实施页面搭建。
2.根据权利要求1所述的方法,其特征在于,所述获取页面组件的组件源码的步骤包括:
获取所述页面组件的原始源码,在所述原始源码中添加所述配置信息,生成对应的所述组件源码。
3.根据权利要求1所述的方法,其特征在于,所述根据所述组件源码,生成对应的所述页面组件的配置界面的步骤包括:
解析所述组件源码,得到对应的结构描述文件,
其中,所述结构描述文件用于描述对应的所述页面组件以及所述配置信息;
解析所述结构描述文件,渲染生成对应的所述配置界面。
4.根据权利要求3所述的方法,其特征在于,所述解析所述组件源码,得到对应的结构描述文件的步骤包括:
解析所述组件源码,得到与所述组件源码对应的语法树;
解析所述语法树,生成所述结构描述文件。
5.根据权利要求3所述的方法,其特征在于,
所述结构描述文件是JSON格式文件。
6.根据权利要求1所述的方法,其特征在于,还包括:
响应于用户对所述配置界面实施的配置操作,获取对应的所述页面组件的配置结果;
根据所述配置结果和所述组件源码,生成对应的页面源码,以用于生成所搭建的页面。
7.根据权利要求6所述的方法,其特征在于,还包括:
获取所述配置结果之后,在检查确定所述配置结果符合所述配置信息中声明的所述数据类型时,执行所述生成页面源码的步骤。
8.根据权利要求1所述的方法,其特征在于,
所述组件源码是基于JavaScript的class,所述配置信息通过所述class的PropTypes声明;
和/或
所述数据类型至少包括数字、字符串、时间、链接地址、邮箱地址、颜色值、自定义类型。
9.一种页面搭建设备,包括:
组件源码获取单元,用于获取页面组件的组件源码,
其中,所述页面组件用于搭建页面,所述组件源码包括配置信息,所述配置信息用于声明对应的所述页面组件中可被修改的配置项以及所述配置项的数据类型;
配置界面生成单元,用于根据所述组件源码,生成对应的所述页面组件的配置界面,供用户通过所述配置界面配置对应的所述页面组件,实施页面搭建。
10.一种电子设备,包括:
显示装置,用于显示人机交互界面;
存储器,用于存储可执行的指令;
处理器,用于根据所述指令的控制运行所述电子设备,以执行如权利要求1-8任意一项所述的页面搭建方法。
CN201710865685.XA 2017-09-22 2017-09-22 页面搭建方法、设备及电子设备 Active CN108255485B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710865685.XA CN108255485B (zh) 2017-09-22 2017-09-22 页面搭建方法、设备及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710865685.XA CN108255485B (zh) 2017-09-22 2017-09-22 页面搭建方法、设备及电子设备

Publications (2)

Publication Number Publication Date
CN108255485A true CN108255485A (zh) 2018-07-06
CN108255485B CN108255485B (zh) 2021-10-29

Family

ID=62722224

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710865685.XA Active CN108255485B (zh) 2017-09-22 2017-09-22 页面搭建方法、设备及电子设备

Country Status (1)

Country Link
CN (1) CN108255485B (zh)

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109101351A (zh) * 2018-08-29 2018-12-28 郑州云海信息技术有限公司 一种解析基板管理控制器web返回值的方法、装置及设备
CN109814865A (zh) * 2019-01-18 2019-05-28 四川长虹电器股份有限公司 一种基于json数据格式的移动应用页面生成方法
CN109901832A (zh) * 2019-01-17 2019-06-18 平安城市建设科技(深圳)有限公司 可视化网页制作方法、装置、设备及存储介质
CN109918607A (zh) * 2019-03-20 2019-06-21 杭州网易再顾科技有限公司 页面搭建方法及装置、介质和计算设备
CN110704053A (zh) * 2019-09-03 2020-01-17 五八有限公司 一种样式信息的处理方法及装置
CN111736840A (zh) * 2019-09-19 2020-10-02 北京沃东天骏信息技术有限公司 小程序应用的编译方法、运行方法、存储介质及电子设备
CN112287266A (zh) * 2019-07-09 2021-01-29 腾讯科技(深圳)有限公司 一种网页配置的处理方法及其装置、设备及存储介质
CN112398963A (zh) * 2020-10-13 2021-02-23 易讯科技股份有限公司 一种智能识别并灵活翻译IPv4外链的实现方法
CN112783482A (zh) * 2021-01-21 2021-05-11 深圳乐信软件技术有限公司 一种可视化表单生成方法、装置、设备及存储介质
CN112988115A (zh) * 2019-12-13 2021-06-18 阿里巴巴集团控股有限公司 应用搭建方法、装置及计算机可读存储介质
CN113094046A (zh) * 2021-03-31 2021-07-09 青岛海尔科技有限公司 用于产品页面开发的方法、装置及终端
CN113791783A (zh) * 2021-09-14 2021-12-14 科东(广州)软件科技有限公司 控件生成方法、装置、设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104142826A (zh) * 2014-07-28 2014-11-12 百度在线网络技术(北京)有限公司 页面的构建方法、装置及***
CN105630902A (zh) * 2015-12-21 2016-06-01 明博教育科技股份有限公司 一种渲染和增量更新网页的方法
CN105824900A (zh) * 2016-03-14 2016-08-03 传线网络科技(上海)有限公司 一种基于react-native的页面展示***
CN106250156A (zh) * 2016-08-01 2016-12-21 腾讯科技(深圳)有限公司 组件构建方法和装置、组件调用方法和装置
CN106293669A (zh) * 2015-06-02 2017-01-04 阿里巴巴集团控股有限公司 一种网页组件的生成方法和装置
CN106469050A (zh) * 2015-08-19 2017-03-01 阿里巴巴集团控股有限公司 一种用例生成方法、页面生成方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104142826A (zh) * 2014-07-28 2014-11-12 百度在线网络技术(北京)有限公司 页面的构建方法、装置及***
CN106293669A (zh) * 2015-06-02 2017-01-04 阿里巴巴集团控股有限公司 一种网页组件的生成方法和装置
CN106469050A (zh) * 2015-08-19 2017-03-01 阿里巴巴集团控股有限公司 一种用例生成方法、页面生成方法及装置
CN105630902A (zh) * 2015-12-21 2016-06-01 明博教育科技股份有限公司 一种渲染和增量更新网页的方法
CN105824900A (zh) * 2016-03-14 2016-08-03 传线网络科技(上海)有限公司 一种基于react-native的页面展示***
CN106250156A (zh) * 2016-08-01 2016-12-21 腾讯科技(深圳)有限公司 组件构建方法和装置、组件调用方法和装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
MANDEEP K. CHAWLA 等: ""BugMarks: A tool for mapping bugs to source code components"", 《 2015 IEEE INTERNATIONAL CONFERENCE ON RESEARCH IN COMPUTATIONAL INTELLIGENCE AND COMMUNICATION NETWORKS (ICRCICN)》 *
WONYUN: ""React创建组件的三种方式及其区别"", 《HTTPS://WWW.CNBLOGS.COM/WONYUN/P/5930333.HTML》 *

Cited By (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109101351A (zh) * 2018-08-29 2018-12-28 郑州云海信息技术有限公司 一种解析基板管理控制器web返回值的方法、装置及设备
CN109901832A (zh) * 2019-01-17 2019-06-18 平安城市建设科技(深圳)有限公司 可视化网页制作方法、装置、设备及存储介质
CN109814865A (zh) * 2019-01-18 2019-05-28 四川长虹电器股份有限公司 一种基于json数据格式的移动应用页面生成方法
CN109918607B (zh) * 2019-03-20 2021-08-03 杭州网易再顾科技有限公司 页面搭建方法及装置、介质和计算设备
CN109918607A (zh) * 2019-03-20 2019-06-21 杭州网易再顾科技有限公司 页面搭建方法及装置、介质和计算设备
CN112287266A (zh) * 2019-07-09 2021-01-29 腾讯科技(深圳)有限公司 一种网页配置的处理方法及其装置、设备及存储介质
CN110704053A (zh) * 2019-09-03 2020-01-17 五八有限公司 一种样式信息的处理方法及装置
CN110704053B (zh) * 2019-09-03 2023-05-23 五八有限公司 一种样式信息的处理方法及装置
CN111736840A (zh) * 2019-09-19 2020-10-02 北京沃东天骏信息技术有限公司 小程序应用的编译方法、运行方法、存储介质及电子设备
CN112988115A (zh) * 2019-12-13 2021-06-18 阿里巴巴集团控股有限公司 应用搭建方法、装置及计算机可读存储介质
CN112398963A (zh) * 2020-10-13 2021-02-23 易讯科技股份有限公司 一种智能识别并灵活翻译IPv4外链的实现方法
CN112783482A (zh) * 2021-01-21 2021-05-11 深圳乐信软件技术有限公司 一种可视化表单生成方法、装置、设备及存储介质
CN112783482B (zh) * 2021-01-21 2024-03-19 深圳乐信软件技术有限公司 一种可视化表单生成方法、装置、设备及存储介质
CN113094046A (zh) * 2021-03-31 2021-07-09 青岛海尔科技有限公司 用于产品页面开发的方法、装置及终端
CN113094046B (zh) * 2021-03-31 2023-12-05 青岛海尔科技有限公司 用于产品页面开发的方法、装置及终端
CN113791783A (zh) * 2021-09-14 2021-12-14 科东(广州)软件科技有限公司 控件生成方法、装置、设备及存储介质
CN113791783B (zh) * 2021-09-14 2022-11-29 科东(广州)软件科技有限公司 控件生成方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN108255485B (zh) 2021-10-29

Similar Documents

Publication Publication Date Title
CN108255485A (zh) 页面搭建方法、设备及电子设备
CN104951099B (zh) 一种基于输入法的展示候选项的方法和装置
US11216253B2 (en) Application prototyping tool
CN104933142B (zh) 动画展示方法和装置
CN112416339A (zh) 页面开发方法、装置、计算机设备
CN107832045A (zh) 跨编程语言接口转换的方法和装置
CN107451162A (zh) 网络资源访问设备、混合设备及方法
US10839040B2 (en) Normalizing a page flow
CN107632833A (zh) 轻应用的生成方法、设备及电子设备
CN108255923A (zh) 图像展示方法、设备及电子设备
CN107122172A (zh) 轻应用的处理方法、运行方法、设备及应用设备
JP2021099798A (ja) 構造化処理方法、装置、コンピュータ機器及び媒体
CN110532488A (zh) 网页渲染方法、装置和电子设备
CN109284488A (zh) 基于本地存储修改前端表格列数据的方法、装置及介质
CN106776800A (zh) AngularJS框架的页面生成方法、装置及***
CN114564199A (zh) 一种生成使用页面的方法、装置、设备及可读存储介质
Halliday Vue. js 2 Design Patterns and Best Practices: Build enterprise-ready, modular Vue. js applications with Vuex and Nuxt
CN107133235A (zh) 页面重新排版方法、重新排版装置、浏览器及电子设备
CN104081347A (zh) 运算次序的图形表示
US9727537B2 (en) Application of a system font mapping to a design
WO2024066825A1 (zh) 页面项目开发方法、装置、设备、介质及产品
CN113778405A (zh) 一种跨平台app构建方法、装置、***及介质
CN108255916A (zh) 网页页面呈现的方法、设备、客户端装置和电子设备
US11126410B2 (en) Method and apparatus for building pages, apparatus and non-volatile computer storage medium
US20230176834A1 (en) Graphical programming environment

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
TA01 Transfer of patent application right

Effective date of registration: 20200526

Address after: 310051 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province

Applicant after: Alibaba (China) Co.,Ltd.

Address before: 100083, Beijing, Haidian District, Cheng Fu Road, No. 28, A building, block 12

Applicant before: UC MOBILE Ltd.

TA01 Transfer of patent application right
GR01 Patent grant
GR01 Patent grant