CN110543350A - 一种生成页面组件的方法及装置 - Google Patents

Abstract

本申请是关于一种生成页面组件的方法及装置，属于通信领域。所述方法包括：获取待生成页面组件的模板代码、样式代码、所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息；根据所述模板代码生成所述待生成页面组件的框架和所述待生成页面组件中的各元素的框架；根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观；以及，根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，形成页面组件。本申请能够生成页面组件，满足专题发布的需求。

Description

一种生成页面组件的方法及装置

技术领域

本申请涉及计算机技术领域，特别涉及一种生成页面组件的方法及装置。

背景技术

页面组件又叫web(网页)组件，页面组件包含各种常用界面组件，如表格、联动下拉框等，可以轻松构造出应用界面。目前使用页面组件可以轻松实现专题发布。例如，用户需要发布一个活动，生成一个页面组件，该页面组件中包括实现该活动所需要的各功能模块，然后在网络中发布该页面组件，以让其他用户通过该页面组件参与活动。

目前运营商可以预设一些专题组件，用户可以需要发布某个专题时，可以从运营端的预设专题组件中，获取该专题对应的专题组件，使用该专题组件来发布该专题。这种方式可以满足大部分常规需求，但是如果运营商预设的组件中没有要发布的专题对应的组件，则无法满足专题发布需求。

发明内容

本申请实施例提供了一种生成页面组件的方法及装置，以满足专题发布的需求。所述技术方案如下：

一方面，本申请提供了一种生成页面组件的方法，所述方法包括：

获取待生成页面组件的模板代码、样式代码、所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息；

根据所述模板代码生成所述待生成页面组件的框架和所述待生成页面组件中的各元素的框架；

根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观；以及，

根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，形成所述页面组件。

可选的，所述根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观，包括：

对所述页面组件的样式代码进行编译，生成可供浏览器解析执行的层叠样式表CSS脚本；

在所述待生成页面组件的架构中将所述CSS脚本编译成组件样式，以形成所述页面组件的外观形状。

可选的，所述根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，包括：

对所述元素的样式代码进行编译，生成可供浏览器解析执行的CSS脚本；

在所述元素的框架中将所述CSS脚本编译成元素样式，以形成所述元素的外观形状；

将所述元素的脚本代码以及所述元素的字段的配置信息传入所述元素的框架中。

可选的，所述将所述元素的脚本代码以及所述元素的字段的配置信息传入所述元素的框架中，包括：

将所述元素的脚本代码编译成可执行对象；

根据所述元素的字段的配置信息生成所述元素的字段；

将所述可执行对象和所述字段插入到所述元素的框架中。

可选的，所述将所述元素的脚本代码编译成可执行对象，包括：

将所述元素的脚本代码进行编译，生成可供浏览器解析执行的JavaScript脚本；

将所述JavaScript脚本转换成可供浏览器解析执行的JavaScript对象。

另一方面，本申请提供了一种生成页面组件的装置，所述装置包括：

获取模块，用于获取待生成页面组件的模板代码、样式代码、所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息；

第一生成模块，用于根据所述模板代码生成所述待生成页面组件的框架和所述待生成页面组件中的各元素的框架；

第二生成模块，用于根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观；以及，

第三生成模块，用于根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，形成所述页面组件。

可选的，所述第二生成模块包括：

第一编译单元，用于对所述页面组件的样式代码进行编译，生成可供浏览器解析执行的层叠样式表CSS脚本；

第二编译单元，用于在所述待生成页面组件的架构中将所述CSS脚本编译成组件样式，以形成所述页面组件的外观形状。

可选的，所述第四生成模块包括：

第三编译单元，用于对所述元素的样式代码进行编译，生成可供浏览器解析执行的CSS脚本；

第四编译单元，用于在所述元素的框架中将所述CSS脚本编译成元素样式，以形成所述元素的外观形状；

传入单元，用于将所述元素的脚本代码以及所述元素的字段的配置信息传入所述元素的框架中。

可选的，所述传入单元，用于：

将所述元素的脚本代码编译成可执行对象；

根据所述元素的字段的配置信息生成所述元素的字段；

将所述可执行对象和所述字段插入到所述元素的框架中。

可选的，所述传入单元，用于待：

将所述元素的脚本代码进行编译，生成可供浏览器解析执行的JavaScript脚本；

将所述JavaScript脚本转换成可供浏览器解析执行的JavaScript对象。

另一方面，本申请提供了一种电子设备，包括：

处理器和存储器，所述存储器用于存储至少一条指令，所述至少一条被所述处理器加载并执行，以实现上述的方法。

另一方面，本申请提供了一种计算机可存储介质，用于存储至少一条指令，当所述至少一条指令在计算机上执行时，使所述计算机实现上述的方法。

本申请实施例提供的技术方案可以包括以下有益效果：

通过获取待生成页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息。根据模板代码生成待生成页面组年的框架和待生成页面组件的各元素的框架，根据该样式代码在待生成页面组件的框架中生成待生成页面组件的外观；以及，根据待生成页面组件中的元素的样式代码和脚本代码以及元素的字段的配置信息在元素的框架中生成元素，形成待生成页面组件。这样可以生成页面组件，如此需要某个专题时，可以根据专题的需要配置页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息，然后再生成相应的页面组件，从而可以生成满足各种专题发布需求的页面组件。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1是本申请实施例提供的一种生成页面组件的方法流程图；

图2是本申请实施例提供的另一种生成页面组件的方法流程图；

图3是本申请实施例提供的一种字段管理列表示意图；

图4是本申请实施例提供的一种编辑弹窗示意图；

图5是本申请实施例提供的一种生成页面组件的装置结构示意图；

图6是本申请实施例提供的一种终端结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请中，将页面组件分成字段、模板、脚本和样式四部分，模板是页面组件承载的载体，是页面组件的骨络架构，模板决定了页面组件的尺寸、结构、以及页面组件内包括的各组件元素的位置等信息。样式是页面组件的外观以及页面组件内的各元素的外观，其定义了页面组件的背景颜色、背景图像、页面组件中的每个组件元素的背景图像、背景颜色和/或字体等信息。脚本与页面组件中的部分或全部组件元素相关联，是页面组件中用于处理人机交互的行为。字段也与页面组件中的部分组件元素相关联，字段用于帮助与其相关联的组件元素获取后台管理员设置的数据。在本申请中，在生成一个页面组件时，获取该页面组件的字段、模板、脚本和样式，将该页面组件的字段、模板、脚本和样式组装成页面组件。详细实现过程可以通过如下任意实施例来实现。

参见图1，本申请实施例提供了一种生成页面组件的方法，所述方法包括：

步骤101：获取待生成页面组件的模板代码、样式代码、待生成页面组件中的元素的样式代码和脚本代码以及该元素的字段的配置信息。

步骤102：根据模板代码生成待生成页面组件的框架和待生成页面组件中的各元素的框架。

步骤103：根据该样式代码在待生成页面组件的框架中生成待生成页面组件的外观，根据待生成页面组件中的元素的样式代码和脚本代码以及该元素的字段的配置信息在该元素的框架中生成元素，形成页面组件。

在本申请实施例中，可以获取待生成页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息。根据模板代码生成待生成页面组年的框架和待生成页面组件的各元素的框架，根据该样式代码在待生成页面组件的框架中生成待生成页面组件的外观；以及，根据待生成页面组件中的元素的样式代码和脚本代码以及元素的字段的配置信息在元素的框架中生成元素，形成待生成页面组件。这样可以生成页面组件，如此需要某个专题时，可以根据专题的需要配置页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息，然后再生成相应的页面组件，从而可以满足各种专题发布需求。

参见图2，本申请实施例提供了一种生成页面组件的方法，该方法包括：

步骤201：获取待生成页面组件的模板代码、样式代码和脚本代码，以及至少一个字段中的每个字段的配置信息。

待生成的页面组件中包括至少一个元素，该至少一个元素可以是该页面组件中的按钮、输入框等内容。

可选的，可以显示样式编辑窗。技术人员可以在该样式编辑窗中输入模板样式代码。该样式编辑窗支持语法高亮的功能，技术人员可以在写入样式代码时，可以以代码的形式编辑出待生成的页面组件的外观等信息。在技术人员在该样式编辑窗中输入完样式代码后，从该样式编辑窗中获取样式代码。该样式编辑窗中获取样式代码包括整个待生成的页面组件的样式代码和每个元素的样式代码。页面组件的样式代码包括待生成页面组件的背景图片、颜色、尺寸等信息。元素的样式代码包括该元素的背景图片、图形结构、位置、尺寸和颜色信息。

可选的，可以显示脚本编辑窗。技术人员可以在该模板脚本编辑窗中输入脚本代码。该脚本编辑窗支持语法高亮的功能，技术人员可以在写入待生成的页面组件中的每个元素对应的脚本代码。在技术人员在该脚本编辑窗中输入完每个元素对应的脚本代码后，从该脚本编辑窗中获取每个元素的脚本代码，元素的脚本代码用于实现该元素的交互行为。

可选的，对于该页面组件中的部分元素，该元素在运行时可能需要获取用户数据，该元素的字段便是用于实现获取用户数据的逻辑。对于任一个元素，可以显示字段列表，该字段列表包括多个字段。使技术人员可以选择该元素对应的一个字段。获取技术人员选择的一个字段，并显示一个字段管理列表，该字段管理列表中包括该字段，该字段管理列表中还中以包括该字段的编辑弹窗和用于删除字段的按钮。

例如，参见图3，图3为显示的字段管理列表，该字段管理列表中包括被选择的字段的类型、名称、提示语、以及字段对应的删除按钮和修改按钮。例如，对于图片字段，其字段的类型为“image”、字段名称为“PC侧图片”、提示语为上传图片、该字段对应的删除按钮和修改按钮。技术人员可以通过点击该删除按钮删除该字段，或者，通过点击该修改按钮来打开用于编辑该字段的配置信息的编辑弹窗。

参见图4，检测到某个字段的修改按钮被点击触发的修改命令时，显示该字段对应的编辑弹窗，在该字段的编辑弹窗中可以修改该字段的类型、字段名、提示语和该字段的图片等配置信息。

在技术人员在字段管理列表中编辑完每个字段的配置信息后，可以从该字段管理列表中获取该字段的配置信息。

可选的，可以显示模板编辑窗。技术人员可以在该模板编辑窗中输入模板代码。该模板编辑窗支持语法高亮的功能，技术人员可以在写入模板代码时，可以以代码的形式编辑出待生成的页面组件的骨络架构。在样本代码中包括待生成页面组件的尺寸、结构和样式代码的标识、以及页面组件内包括的各组件元素的位置、结构、脚本代码的标识、样式代码的标识和字段的标识等信息。在技术人员在该模板编辑窗中输入完模板代码后，从该模板编辑窗中获取模板代码。

在本步骤中，技术人员可以将该页面组件的模板代码、样式代码、脚本代码以及该页面组件中的元素的字段的配置信息之间的对应关系保存在数据库中。技术人员可以按上述方式，继续输入其他页面组件的模板代码、样式代码和脚本代码，以及设置其他页面组件中的元素的字段，然后将其他页面组件的模板代码、样式代码、脚本代码以及该其他页面组件中的元素的字段的配置信息之间的对应关系保存在数据库中。

这样在生成某个页面组件时，可以从该数据库中读取一个页面组件的模板代码、样式代码、脚本代码，以及该页面组件中的元素的字段的配置信息。

步骤202：将该页面组件中的各元素的脚本代码编译成可执行对象，即得到各元素的可执行对象。

在本步骤中，将该页面组件中的元素的脚本代码编译成可供浏览器解析执行的组件脚本，然后通过对该组件脚本进行编译，以将该组件脚本转换成可执行对象。

可选的，可以调用Babel模块，通过该Babel模块对该页面组件中的元素的脚本代码进行编译，生成可供浏览器解析执行的JavaScript脚本，利用new Function(新功能)语法将该JavaScript脚本编译成可执行的JavaScript对象，该JavaScript对象即为可执行对象。

步骤203：根据该页面组件的模板代码，在客户端模板中生成该页面组件的框架和该页面组件中的各元素的框架，将该各元素的可执行对象插入到该框架中。

在模板代码中包括该页面组件的尺寸、结构和样式代码的标识、以及页面组件内包括的各元素的位置、结构信息、脚本代码的标识、样式代码的标识和字段的标识等信息。

将该页面组件的模板代码和该可执行对象注册到可调用的Vue异步组件，利用Vue异步组件，在预设的客户端模板中生成该页面组件的框架以及在该框架中根据各元素的位置和结构信息生成该页面组件中的各元素的框架，并将各元素的可执行对象插入该框架中。

在本步骤中，可以利用Vue.component语法，将该页面组件的模板代码、可执行的JavaScript对象作为参数注册到一个可调用的Vue异步组件中。

步骤204：将该页面组件的样式代码和每个元素的样式代码插入到该页面组件的框架，生成该页面组件的外观形状和每个元素的外观形状。

在本步骤中，页面组件的样式代码包括待生成页面组件的背景图片、颜色、尺寸等信息。元素的样式代码包括该元素的背景图片、图形结构、位置、尺寸和颜色信息。

将页面组件的样式代码添加到该页面组件的框架中，再对该页面组件的样式代码进行编译，生成可供浏览器解析执行的层叠样式表(Cascading Style Sheets，CSS)脚本，将该CSS脚本进行编译后在该页面组件的框架上形成外观形状，该外观形状包括该组件的背景图像和颜色等内容。将页面组件中各元素的样式代码添加到该页面组件的框架中的各元素的框架中，在各元素的框架中对该各元素的样式代码进行编译，生成可供浏览器解析执行的CSS脚本。在该页面组件的框架中包括每个元素的样式代码的标识，对于该页面组件中的每个元素，在该元素的框架中将该元素的样式代码的标识对应的CSS脚本进行编译后形成该元素的外观形状，该外观形状包括该元素的背景图像和颜色等内容。

可选的，可以调用Sass-loader模块对该页面组件的样式代码进行编译，生成可供浏览器解析执行的CSS脚本，在页面组件的框架中利用v-html指令将编译后形成的组件样式。

步骤205：将该页面组件的元素的字段插入该页面组件，形成该页面组件。

在本步骤中，根据该页面组件中的各字段的配置信息生成各字段，以传参的方式将该页面组件中的各字段传递给该页面组件。在页面组件中生成的各元素与一个脚本代码的标识相对应和/或与一个字段的标识相对应。对于任一个元素，该元素可以通过与该元素相对应的脚本代码的标识对应的脚本代码实现与人机交互，该元素可以通过与该元素相对应的字段的标识对应的字段实现获取用户的数据。

在本申请实施例中，可以获取页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息。根据模板代码生成待生成页面组年的框架和待生成页面组件的各元素的框架，根据该样式代码在待生成页面组件的框架中生成待生成页面组件的外观；以及，根据待生成页面组件中的元素的样式代码和脚本代码以及元素的字段的配置信息在元素的框架中生成元素，形成待生成页面组件。这样可以生成页面组件，如此需要某个专题时，可以根据专题的需要配置页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息，然后再生成相应的页面组件，从而可以满足各种专题发布需求。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

参见图5，本申请实施例提供了一种生成页面组件的装置300，所述装置300包括：

获取模块301，用于获取待生成页面组件的模板代码、样式代码、所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息；

第一生成模块302，用于根据所述模板代码生成所述待生成页面组件的框架和所述待生成页面组件中的各元素的框架；

第二生成模块303，用于根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观；以及，

第三生成模块304，用于根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，形成所述页面组件。

可选的，所述第二生成模块303包括：

第一编译单元，用于对所述页面组件的样式代码进行编译，生成可供浏览器解析执行的层叠样式表CSS脚本；

第二编译单元，用于在所述待生成页面组件的架构中将所述CSS脚本编译成组件样式，以形成所述页面组件的外观形状。

可选的，所述第四生成模块304包括：

第三编译单元，用于对所述元素的样式代码进行编译，生成可供浏览器解析执行的CSS脚本；

第四编译单元，用于在所述元素的框架中将所述CSS脚本编译成元素样式，以形成所述元素的外观形状；

传入单元，用于将所述元素的脚本代码以及所述元素的字段的配置信息传入所述元素的框架中。

可选的，所述传入单元，用于：

将所述元素的脚本代码编译成可执行对象；

根据所述元素的字段的配置信息生成所述元素的字段；

将所述可执行对象和所述字段插入到所述元素的框架中。

可选的，所述传入单元，用于待：

将所述元素的脚本代码进行编译，生成可供浏览器解析执行的JavaScript脚本；

将所述JavaScript脚本转换成可供浏览器解析执行的JavaScript对象。

在本申请实施例中，获取模块可以获取页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息。根据模板代码生成待生成页面组年的框架和待生成页面组件的各元素的框架，根据该样式代码在待生成页面组件的框架中生成待生成页面组件的外观；以及，根据待生成页面组件中的元素的样式代码和脚本代码以及元素的字段的配置信息在元素的框架中生成元素，形成待生成页面组件。这样可以生成页面组件，如此需要某个专题时，可以根据专题的需要配置页面组件的模板代码、样式代码、脚本代码以及至少一个字段的配置信息，然后再生成相应的页面组件，从而可以满足各种专题发布需求。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图6示出了本发明一个示例性实施例提供的终端400的结构框图。该终端400可以是便携式移动终端，比如：平板电脑、笔记本电脑或台式电脑。终端400还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端400包括有：处理器401和存储器402。

处理器401可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器401可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器401也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器401可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器401还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器402可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器402还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器402中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器401所执行以实现本申请中方法实施例提供的生成页面组件的方法。

在一些实施例中，终端400还可选包括有：外围设备接口403和至少一个外围设备。处理器401、存储器402和外围设备接口403之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口403相连。具体地，外围设备包括：射频电路404、触摸显示屏405、摄像头406、音频电路407、定位组件408和电源409中的至少一种。

外围设备接口403可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器401和存储器402。在一些实施例中，处理器401、存储器402和外围设备接口403被集成在同一芯片或电路板上；在一些其他实施例中，处理器401、存储器402和外围设备接口403中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路404用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路404通过电磁信号与通信网络以及其他通信设备进行通信。射频电路404将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路404包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路404可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路404还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏405用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏405是触摸显示屏时，显示屏405还具有采集在显示屏405的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器401进行处理。此时，显示屏405还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏405可以为一个，设置终端400的前面板；在另一些实施例中，显示屏405可以为至少两个，分别设置在终端400的不同表面或呈折叠设计；在再一些实施例中，显示屏405可以是柔性显示屏，设置在终端400的弯曲表面上或折叠面上。甚至，显示屏405还可以设置成非矩形的不规则图形，也即异形屏。显示屏405可以采用LCD(LiquidCrystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件406用于采集图像或视频。可选地，摄像头组件406包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件406还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路407可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器401进行处理，或者输入至射频电路404以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端400的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器401或射频电路404的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路407还可以包括耳机插孔。

定位组件408用于定位终端400的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件408可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。

电源409用于为终端400中的各个组件进行供电。电源409可以是交流电、直流电、一次性电池或可充电电池。当电源409包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端400还包括有一个或多个传感器410。该一个或多个传感器410包括但不限于：加速度传感器411、陀螺仪传感器412、压力传感器413、指纹传感器414、光学传感器415以及接近传感器416。

加速度传感器411可以检测以终端400建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器411可以用于检测重力加速度在三个坐标轴上的分量。处理器401可以根据加速度传感器411采集的重力加速度信号，控制触摸显示屏405以横向视图或纵向视图进行用户界面的显示。加速度传感器411还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器412可以检测终端400的机体方向及转动角度，陀螺仪传感器412可以与加速度传感器411协同采集用户对终端400的3D动作。处理器401根据陀螺仪传感器412采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器413可以设置在终端400的侧边框和/或触摸显示屏405的下层。当压力传感器413设置在终端400的侧边框时，可以检测用户对终端400的握持信号，由处理器401根据压力传感器413采集的握持信号进行左右手识别或快捷操作。当压力传感器413设置在触摸显示屏405的下层时，由处理器401根据用户对触摸显示屏405的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器414用于采集用户的指纹，由处理器401根据指纹传感器414采集到的指纹识别用户的身份，或者，由指纹传感器414根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器401授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器414可以被设置终端400的正面、背面或侧面。当终端400上设置有物理按键或厂商Logo时，指纹传感器414可以与物理按键或厂商Logo集成在一起。

光学传感器415用于采集环境光强度。在一个实施例中，处理器401可以根据光学传感器415采集的环境光强度，控制触摸显示屏405的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏405的显示亮度；当环境光强度较低时，调低触摸显示屏405的显示亮度。在另一个实施例中，处理器401还可以根据光学传感器415采集的环境光强度，动态调整摄像头组件406的拍摄参数。

接近传感器416，也称距离传感器，通常设置在终端400的前面板。接近传感器416用于采集用户与终端400的正面之间的距离。在一个实施例中，当接近传感器416检测到用户与终端400的正面之间的距离逐渐变小时，由处理器401控制触摸显示屏405从亮屏状态切换为息屏状态；当接近传感器416检测到用户与终端400的正面之间的距离逐渐变大时，由处理器401控制触摸显示屏405从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图6中示出的结构并不构成对终端400的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

本领域技术人员在考虑说明书及实践这里公开的申请后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种生成页面组件的方法，其特征在于，所述方法包括：

获取待生成页面组件的模板代码、样式代码、所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息；

根据所述模板代码生成所述待生成页面组件的框架和所述待生成页面组件中的各元素的框架；

根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观；以及，

根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，形成页面组件。

2.如权利要求1所述的方法，其特征在于，所述根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观，包括：

对所述页面组件的样式代码进行编译，生成可供浏览器解析执行的层叠样式表CSS脚本；

在所述待生成页面组件的架构中将所述CSS脚本编译成组件样式，以形成所述页面组件的外观形状。

3.如权利要求1所述的方法，其特征在于，所述根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，包括：

对所述元素的样式代码进行编译，生成可供浏览器解析执行的CSS脚本；

在所述元素的框架中将所述CSS脚本编译成元素样式，以形成所述元素的外观形状；

将所述元素的脚本代码以及所述元素的字段的配置信息传入所述元素的框架中。

4.如权利要求3所述的方法，其特征在于，所述将所述元素的脚本代码以及所述元素的字段的配置信息传入所述元素的框架中，包括：

将所述元素的脚本代码编译成可执行对象；

根据所述元素的字段的配置信息生成所述元素的字段；

将所述可执行对象和所述字段插入到所述元素的框架中。

5.如权利要求4所述的方法，其特征在于，所述将所述元素的脚本代码编译成可执行对象，包括：

将所述元素的脚本代码进行编译，生成可供浏览器解析执行的JavaScript脚本；

将所述JavaScript脚本转换成可供浏览器解析执行的JavaScript对象。

6.一种生成页面组件的装置，其特征在于，所述装置包括：

获取模块，用于获取待生成页面组件的模板代码、样式代码、所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息；

第一生成模块，用于根据所述模板代码生成所述待生成页面组件的框架和所述待生成页面组件中的各元素的框架；

第二生成模块，用于根据所述样式代码在所述待生成页面组件的框架中生成所述待生成页面组件的外观；以及，

第三生成模块，用于根据所述待生成页面组件中的元素的样式代码和脚本代码以及所述元素的字段的配置信息在所述元素的框架中生成所述元素，形成页面组件。

7.如权利要求6所述的装置，其特征在于，所述第二生成模块包括：

第一编译单元，用于对所述页面组件的样式代码进行编译，生成可供浏览器解析执行的层叠样式表CSS脚本；

第二编译单元，用于在所述待生成页面组件的架构中将所述CSS脚本编译成组件样式，以形成所述页面组件的外观形状。

8.如权利要求6所述的装置，其特征在于，所述第四生成模块包括：

第三编译单元，用于对所述元素的样式代码进行编译，生成可供浏览器解析执行的CSS脚本；

第四编译单元，用于在所述元素的框架中将所述CSS脚本编译成元素样式，以形成所述元素的外观形状；

传入单元，用于将所述元素的脚本代码以及所述元素的字段的配置信息传入所述元素的框架中。

9.一种电子设备，其特征在于，包括：

处理器和存储器，所述存储器用于存储至少一条指令，所述至少一条被所述处理器加载并执行，以实现如权利要求1至5任一项所述的方法。

10.一种计算机可存储介质，其特征在于，用于存储至少一条指令，当所述至少一条指令在计算机上执行时，使所述计算机实现如权利要求1至5任一项所述的方法。