页面生成及发布方法、装置及可读存储介质与流程

1.本技术涉及视觉设计领域，尤其涉及一种页面生成及发布方法、装置及可读存储介质。


背景技术：

2.互联网产品业务中，无论是web端还是h5和app移动端，尤其是2c产品业务，包含了大量的营销活动，图文内容展示，企业门户宣传等，在此类产品研发支撑上，研发人员耗费大量时间进行重复开发，不仅仅体现在多样化的前端ui研发，也包括了后台服务端数据接口。
3.针对上述问题，现有平台系统往往只能够单独解决其中单个方面的痛点，比如ui转代码系统，解决了前端ui生成代码的场景，但是仅提供了前端代码，业务逻辑仍然需要研发人员二次开发和封装，导致产品研发成本较高。因此，如何降低互联网线上产品的研发成本，在零代码环境下完成产品配置和发布成为待解决的问题。


技术实现要素：

4.本技术提供一种页面生成及发布方法、装置及可读存储介质，能够对布局界面进行业务数据和业务逻辑的配置以及线上自动发布，实现业务数据和业务逻辑配置以及自动化线上生成及发布功能，极大降低互联网线上产品的研发成本。
5.为达到上述目的，本技术采用如下技术方案：
6.第一方面，本技术提供一种页面生成及发布方法，该方法包括：根据活动产品的用户界面ui视觉稿生成对应的布局界面；通过ui编辑器对上述布局界面进行编辑操作，并对上述布局界面进行业务数据配置；上述业务数据配置包括业务相关数据配置、业务组件配置和业务方法配置中的至少一项；基于配置后的布局界面生成目标页面代码，并根据上述目标页面代码执行上述活动产品的页面生成和发布。
7.基于上述技术方案，本技术实施例提供的页面生成及发布方法，页面生成及发布装置基于活动产品的ui视觉稿生成布局界面，通过ui编辑器对活动产品对应的布局界面进行编辑操作，并对该布局界面进行业务相关数据配置、业务组件配置和业务方法配置中的至少一项，最后基于配置后的布局界面生成目标页面代码。通过该方法，通过自主对布局界面进行业务数据和业务逻辑的配置以及发布功能，实现业务数据和业务逻辑的灵活高效配置以及自动化线上生成及发布，极大降低互联网线上产品的研发成本，有效实现快速上线，具有较高的灵活性和扩展性。
8.在第一方面的第一种可能的实现方式中，上述对上述布局界面进行业务数据配置，包括：获取业务数据，上述业务数据包括业务相关数据、业务组件和业务方法中的至少一项；将上述业务数据渲染到相应的业务组件中，或绑定在对应的界面按钮上提供调用。
9.在第一方面的第二种可能的实现方式中，上述基于配置后的布局界面生成目标页面代码，包括：根据上述配置后的布局界面生成初始页面代码；将上述业务数据与上述初始
页面代码中的ui组件元素进行关联调用，生成目标页面代码。
10.在第一方面的第三种可能的实现方式中，上述业务数据为针对上述活动产品预先配置的业务数据，或者，上述业务数据为系统内置的业务数据。
11.在第一方面的第四种可能的实现方式中，上述根据活动产品的用户界面ui视觉稿生成对应的布局界面，包括：根据活动产品的ui视觉稿的图层信息，将上述ui视觉稿的图层进行识别分类，并获取上述图层的图层属性；根据上述图层的图层属性和类别，将图层与代码元素块进行匹配，生成对应的布局界面。
12.在第一方面的第五种可能的实现方式中，上述根据上述目标页面代码执行上述活动产品的页面生成和发布，包括：将上述目标页面代码部署至线上环境的预发布目录中，生成目标页面并进行上述目标页面的预发布；在获取到确认发布指令的情况下，将上述目标页面代码部署至正式的生产环境中，生成目标页面并进行上述目标页面的正式发布。
13.第二方面，本技术提供一种页面生成及发布装置，该装置包括：生成模块和执行模块，其中：上述生成模块，用于根据活动产品的用户界面ui视觉稿生成对应的布局界面；上述执行模块，用于通过ui编辑器对上述布局界面进行编辑操作，并对上述布局界面进行业务数据配置；上述业务数据配置包括业务相关数据配置、业务组件配置和业务方法配置中的至少一项；上述执行模块，还用于基于配置后的布局界面生成目标页面代码，并根据上述目标页面代码执行上述活动产品的页面生成和发布。
14.在第二方面的第一种可能的实现方式中，上述执行模块，具体用于获取业务数据，上述业务数据包括业务相关数据、业务组件和业务方法中的至少一项；上述执行模块，具体用于将上述业务数据渲染到相应的业务组件中，或将上述业务数据绑定在对应的界面按钮上提供调用。
15.在第二方面的第二种可能的实现方式中，上述执行模块，具体用于根据上述配置后的布局界面生成初始页面代码；上述执行模块，具体用于对上述业务数据与上述初始页面代码中的ui组件元素进行关联调用，生成目标页面代码。
16.在第二方面的第三种可能的实现方式中，上述业务数据为针对上述活动产品预先配置的业务数据，或者，上述业务数据为系统内置的业务数据。
17.在第二方面的第四种可能的实现方式中，上述生成模块，具体用于根据活动产品的ui视觉稿的图层信息，将上述ui视觉稿的图层进行识别分类，并获取上述图层的图层属性；上述生成模块，具体用于根据上述图层的图层属性和类别，将上述图层与代码元素块进行匹配，生成对应的布局界面。
18.在第二方面的第五种可能的实现方式中，上述执行模块，具体用于将上述目标页面代码部署至线上环境的预发布目录中，生成目标页面并进行上述目标页面的预发布；上述执行模块，具体用于在获取到确认发布指令的情况下，将上述目标页面代码部署至正式的生产环境中，生成目标页面并进行上述目标页面的正式发布。
19.第三方面，本技术提供了一种页面生成及发布装置，该装置包括：处理器和通信接口；通信接口和处理器耦合，处理器用于运行计算机程序或指令，以实现如第一方面和第一方面的任一种可能的实现方式中所描述的页面生成及发布方法。
20.第四方面，本技术提供了一种计算机可读存储介质，计算机可读存储介质中存储有指令，当指令在终端上运行时，使得终端执行如第一方面和第一方面的任一种可能的实
现方式中描述的页面生成及发布方法。
21.第五方面，本技术实施例提供一种包含指令的计算机程序产品，当计算机程序产品在页面生成及发布装置上运行时，使得页面生成及发布装置执行如第一方面和第一方面的任一种可能的实现方式中所描述的页面生成及发布方法。
22.第六方面，本技术实施例提供一种芯片，芯片包括处理器和通信接口，通信接口和处理器耦合，处理器用于运行计算机程序或指令，以实现如第一方面和第一方面的任一种可能的实现方式中所描述的页面生成及发布方法。
23.具体的，本技术实施例中提供的芯片还包括存储器，用于存储计算机程序或指令。
附图说明
24.图1为本技术实施例提供的一种页面生成及发布方法的流程图；
25.图2为本技术实施例提供的另一种页面生成及发布方法的流程图；
26.图3为本技术实施例提供的另一种页面生成及发布方法的流程图；
27.图4为本技术实施例提供的一种页面生成及发布装置的结构示意图；
28.图5为本技术实施例提供的一种页面生成及发布装置的硬件结构示意图；
29.图6为本技术实施例提供的一种芯片的结构示意图。
具体实施方式
30.下面结合附图对本技术实施例提供的页面生成及发布方法及装置进行详细地描述。
31.本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。
32.本技术的说明书以及附图中的术语“第一”和“第二”等是用于区别不同的对象，或者用于区别对同一对象的不同处理，而不是用于描述对象的特定顺序。
33.此外，本技术的描述中所提到的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括其他没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
34.需要说明的是，本技术实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本技术实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
35.在本技术的描述中，除非另有说明，“多个”的含义是指两个或两个以上。
36.目前，互联网产品业务中，无论是web端还是h5和app移动端，尤其是2c产品业务，包含了大量的营销活动，图文内容展示，企业门户宣传等，在此类产品研发支撑上，研发人员耗费大量时间进行重复开发，不仅仅体现在多样化的前端ui研发，也包括了后台服务端数据接口。
37.针对上述问题，市面上现有平台系统往往只能够单独解决其中单个方面的痛点，比如ui转代码系统，解决了前端ui生成代码的场景，但是仅提供了前端代码，业务逻辑仍然
需要研发人员二次开发和封装。还有一类模版化配置系统，解决了产品页面和组件配置和发布，但是基本是固定模板形态，无法满足用户特定化、变化快、多样式的定制化ui。
38.因此，如何既能够找到产品形态的业务共性，形成通用的组件和方法进行复用，又能够满足多样化的用户个性ui需求成为待解决的问题。
39.本技术实施例提供了一种页面生成及发布方法，该方法包括产品创建，数据配置，ui配置和预览发布，具体可以分为四步：一、活动产品创建，包括活动类型等配置，如抽奖类活动，图文专题页等；二、业务数据配置，配置相关业务逻辑信息，如抽奖活动的奖品库，内容专题页的图文数据，同时也能将配置的数据方法提供给ui编辑器进行调用；三、ui配置，基于ui视觉稿，使用本系统可视化线上ui编辑工具，实现对ui元素组件拖拉拽等实时编辑，同时对业务逻辑、交互内容进行配置，最后自动生成包含业务流程和业务逻辑的的前端代码；四、预览发布，对配置好业务数据和ui界面的活动，可以通过预发布，在线上预览和调式，最后发布后生成实际有效的线上url域名地址和二维码图片地址。
40.本技术实施例提供的页面生成及发布方法适用于线上各类营销活动、内容频道、专题页面、企业宣传、招聘信息等消费互联网类的产品场景，使用对象包括互联网ui设计、产品经理、运营、活动策划及前后端研发等人员对象，适配端包括pcweb网页、大屏系统、h5及app移动端、ipad等平板等多种设备。本技术实施例提供的页面生成及发布方法可极大降低互联网线上产品的研发成本，完全借助平台系统，无需任何研发，零代码环境下完成产品配置和发布，有效实现快速上线，非常具有灵活性和扩展性。
41.如图1所示，为本技术实施例提供的一种页面生成及发布方法的流程图，该方法包括以下步骤：
42.s101、根据活动产品的用户界面ui视觉稿生成对应的布局界面。
43.可选地，在本技术实施例中，上述活动产品可以包括抽奖类活动、图文专题页等。
44.可选地，在本技术实施例中，页面生成及发布装置先进行活动产品的创建，可以包括活动类型等配置，如创建抽奖类活动，图文专题页等。
45.可选地，在本技术实施例中，ue视觉稿为高保真的静态设计图，通常来说，视觉稿就是视觉设计的草稿或终稿。ue视觉稿可以具备表达信息框架，静态演示内容和功能。
46.可选地，上述ui视觉稿可以为sketch设计稿。
47.可选地，在本技术实施例中，上述布局界面可以为一种定义了页面层次结构以及页面元素布局的界面，能够为网页内的导航提供了清晰的路径，引导访问者浏览网站。
48.可选地，在本技术实施例中，页面生成及发布装置可以获取ui视觉稿中的图层信息，并将图层信息与代码元素块进行匹配，生成对应的布局界面。
49.可选地，上述代码元素块可以为自定义的或者系统默认的。
50.s102、通过ui编辑器对上述布局界面进行编辑操作，并对该布局界面进行业务数据配置。
51.其中，上述业务数据配置包括业务相关数据配置、业务组件配置和业务方法配置中的至少一项。
52.可选地，在本技术实施例中，上述编辑操作可以包括以下至少一项：调整布局界面中的界面元素的位置、删除布局界面中的界面元素、在布局界面中增加界面元素。
53.可选地，用户可以通过对界面元素继进行拖拽来实现对页面元素的编辑操作。例
如，用户将界面中的组件a拖动到位置1，将组件b拖动到组件a的位置，实现组件a和组件b的位置的调整。
54.可选地，上述界面元素可以包括组件、多媒体文件(如，图片、视频、文本以及网格元素等。
55.可选地，在本技术实施例中，页面生成及发布装置可以为该布局界面配置业务相关数据、业务组件以及业务方法中的至少之一。
56.示例性地，上述业务相关数据可以包括抽奖活动的奖品库、营销活动的商品库、商品的图文信息、商品的库存、奖品的图文信息、抽奖时所用的大转盘、九宫格等，上述业务组件根据选择产品活动的类型，系统提供了不同的配置选项可以包括按钮、单元格、单选框、搜索框、滑动单元格、音频播放组件等，上述业务方法可以为用于实现业务流程和业务逻辑的方法。
57.可选地，在本技术实施例中，页面生成及发布装置根据选择产品活动的类型，提供不同的配置选项。
58.示例性地，针对抽奖类活动，提供奖品库的配置，包括奖品名称、库存数量、上下架、出入库、权重占比等字段信息；如企业门户类产品，提供图文信息配置，包括banner图片、产品logo、图标、标题、描述、内容、跳转url等字段信息。
59.可选地，用户可以自定义方法或数据列表的名称，以便在ui编辑器中进行绑定或调用。
60.可选地，在本技术实施例中，页面生成及发布装置可以自动选择相关的业务数据对布局界面进行配置；或者，页面生成及发布装置可以根据用户选择的业务数据对布局界面进行配置，从而提高对布局界面配置的灵活性。示例性地，在活动产品为抽奖类活动的情况下，用户可以从数据库中选择大转盘或者九宫格组件，页面生成及发布装置可以将用户选择的组件配置到布局界面。
61.s103、基于配置后的布局界面生成目标页面代码，并根据上述目标页面代码执行活动产品的页面生成和发布。
62.可选地，在本技术实施例中，页面生成及发布装置可以根据用户选择的终端类型，将配置后的布局界面转为相应前端代码，再把配置的业务数据与ui元素进行绑定，并在代码中实现调用，得到最终的目标页面代码。
63.可选地，在本技术实施例中，页面生成及发布装置自动可以将上述目标页面代码发布至线上环境的目录中进行发布。
64.本技术实施例提供的页面生成及发布方法，页面生成及发布装置基于活动产品的ui视觉稿生成布局界面，通过ui编辑器对活动产品对应的布局界面进行编辑操作，并对该布局界面进行业务相关数据配置、业务组件配置和业务方法配置中的至少一项，最后基于配置后的布局i二面生成目标页面代码。通过该方法，通过主对布局界面进行业务数据和业务逻辑的配置以及发布功能，实现业务数据和业务逻辑的灵活高效配置以及自动化线上生成及发布，极大降低互联网线上产品的研发成本，有效实现快速上线，具有较高的灵活性和扩展性。
65.可选地，在本技术实施例中，上述步骤s102中对该布局界面进行业务数据配置的过程可以包括以下步骤s102a和步骤s102b：
66.s102a、获取业务数据。
67.其中，上述业务数据包括业务相关数据、业务组件和业务方法中的至少一项。
68.s102b、将业务数据渲染到布局界面中相应的业务组件中，或将业务数据绑定在布局界面中对应的界面按钮上提供调用。
69.可选地，上述业务数据为针对上述活动产品预先配置的业务数据，或者，上述业务数据为系统内置的业务数据。
70.可选地，为了方便对ui布局的自定义手工调整，系统内部集成了多种基础组件和业务组件，包括按钮、单元格、复选框、模态窗、分割线(条)、浮动窗、宫格、图标、输入框、加载、导航栏、选择器、弹出层、单选框、搜索框、滑动单元格、轮播、开关、选项卡、标签栏、标签、toast轻提示等常见组件，供用户在前端ui编辑器上进行拖拉拽式的配置。
71.进一步地，针对页面组件，提供属性栏进行属性样式的调整，包括字体大小、颜色、边距、图片替换、行高、阴影、边框等常用样式的调整，为界面适配充分提供了灵活性。
72.可选地，根据选择产品活动的类型，系统提供了不同的配置选项。如抽奖类活动，提供奖品库的配置，包括奖品名称、库存数量、上下架、出入库、权重占比等字段信息；如企业门户类产品，提供图文信息配置，包括banner图片、产品logo、图标、标题、描述、内容、跳转url等字段信息。
73.可选地，页面生成及发布装置可以请求后端数据库，获取用户对应录入的配置信息(即业务数据)，并渲染到相应的业务组件中，或绑定在对应的界面按钮上提供调用。
74.需要说明的是，以上业务数据的配置，用户可以自定义方法或数据列表的名称，以便在ui编辑器中进行绑定或调用，此类会在系统内按照固定配置好的接口模板去生成对应的方法，请求后端数据库，将用户对应录入的相关内容取出，并渲染到相应的业务组件中，或绑定在对应的界面按钮上提供调用。
75.如此，页面生成及发布装置可以获取布局界面对应的配置数据，并基于该配置数据自动对布局界面进行配置，从而能够得到满足实际生产的页面，并且提高页面生成效率及灵活性。
76.可选地，在本技术实施例中，上述步骤s103中基于配置后的布局界面生成目标页面代码的过程可以包括以下步骤s103a1和步骤s103a2：
77.s103a1、根据上述配置后的布局界面生成初始页面代码。
78.s103a2、将上述业务数据与上述初始页面代码中的ui组件元素进行关联调用，生成目标页面代码。
79.可选地，页面生成及发布装置根据用户选择的终端类型，将布局界面转为相应的前端代码(即初始页面代码)。
80.可选地，页面生成及发布装置将配置的业务相关数据、业务组件以及业务方法中的至少之一与布局界面中的元素进行绑定，并再代码中实现调用，从而实现请求服务器内容，生成完整代码(即目标页面代码)。
81.以下以布局界面为基于sketch设计稿得到的布局界面为例，对生成前端代码的过程进行说明。
82.图2为本技术实施例提供的另一种页面生成及发布方法的流程图，如图2所示，先将sketch设计稿传入系统，通过分析sketch中的图层，将图层中相关元素的坐标、大小、颜
色、字体等信息，生成json格式数据，再将图层进行切割识别转化成对应的节点结构，形成视图树。接下来对视图树进行代码还原，主要是对视图树中所有节点结构数据加入队列中，先进行遍历，然后按照布局顺序把节点依次排列生成。获取的元素样式等属性，包括尺寸、颜色、大小等，布局属性包括边距、边框，行高等信息，同步绑定至对应元素上。h5、android和ios，甚至包括小程序、前端各类框架都可以按照此逻辑进行代码还原，对应到不同的前端上，端侧代码的适配可以进行扩展及不断改进完善，最终完成结构代码和样式属性的还原。
83.需要说明的是，由于设计师设计ui视图中，使用的sketch系统自带的视图等控件，因此数据源中包基于图层、元素等各类信息，可以先根据图层、元素等各类信息生成视图树，再基于视图树生成最终的目标页面代码。
84.如此，页面生成及发布装置可以先基于配置后得到的布局界面得到初始页面代码，然后将配置的业务数据与初始页面代码中的元素进行绑定，并再代码中实现调用，从而得到配置后的布局界面的完整的页面代码。
85.可选地，在本技术实施例中，上述步骤s101可以包括以下步骤s101a和步骤s101b：
86.s101a、根据活动产品的ui视觉稿的图层信息，将所述ui视觉稿的图层进行识别分类，并获取所述图层的图层属性。
87.s101b、根据图层的图层属性和类别，将该图层与代码元素块进行匹配，生成对应的布局界面。
88.可选地，上述图层信息可以包括图层中相关元素的坐标、大小、颜色、字体等信息。
89.可选地，上述图层属性可以包括获取的元素样式等属性，包括尺寸、颜色、大小等，布局属性包括边距、边框，行高等信息。
90.可选地，上述图层类别可以包括图层中的元素的类别或者图层中的元素样式的类别。
91.可选地，页面生成及发布装置可以根据图层属性和图层类型，获取或者自动生成与之匹配的代码元素块，并生成对应的布局界面。
92.如此，页面生成及发布装置可以基于ui视觉稿的图层信息直接生成对应的布局界面，从而能够快速生成相应的布局界面，并且降低开发成本。
93.可选地，在本技术实施例中，上述步骤s103中根据上述目标页面代码执行活动产品的页面生成和发布可以包括以下步骤s103b1和步骤s103b2：
94.s103b1、将上述目标页面代码部署至线上环境的预发布目录中，生成目标页面并进行目标页面的预发布。
95.s103b2、在获取到确认发布指令的情况下，将上述目标页面代码部署至正式的生产环境中，生成目标页面并进行目标页面的正式发布。
96.可选地，当配置好前端ui界面，绑定好业务数据、方法和组件后，可以选择预览，此时前端生成好的代码讲打包发布到预发布环境中配置的预发布目录中，同时将活动id等参数进行域名生成，活动状态为预发布，且设定有限期和访问限制，仅提供开发者在线上进行预览和调试。
97.可选地，待用户确认效果后，可以选择正式发布，此时将代码打包集中自动部署至正式的生产环境中。
98.如此，上述过程无需投入较大的研发和运维成本，实现零代码部署和发布。
99.结合上述实施例，图3为本技术实施例提供的一种页面生成及发布方法的流程图，如图3所示，页面生成及发布装置创建产品生成唯一活动id，然后对产品进行全局配置，包括产品名称、有效期、上下线状态及操作等，进行ui界面配置和业务数据配置，其中，ui界面配置的过程包括以下步骤11至步骤14：
100.步骤11：通过上传ui视觉稿，关联该活动id。
101.步骤12：获取ui视觉稿相关图层信息，将图层进行识别分类，并记录图层属性。
102.步骤13：根据图层分类和属性，与代码元素块进行匹配对应，并生成对应的布局界面。
103.步骤14：使用线上ui编辑器，对生成的布局界面进行拖拽式创作编辑，同时绑定业务组件和方法，进行业务数据渲染。
104.上述业务数据配置过程可以包括以下步骤21和步骤22：
105.步骤21：针对该活动进行产品业务逻辑配置。
106.步骤22：针对该活动进行业务数据配置，如奖品库、奖品数量、中奖概率、图文数据内容配置。
107.接着，将配置好的业务数据和方法，通过自定义名称暴露该ui界面进行绑定，并在为ui界面(即布局界面)绑定业务组件和方法，以及进行业务数据渲染后，根据用户选择的终端类型，将ui界面转为相应前端代码，再把业务方法组件，自定义业务数据，系统内置组件，与ui元素进行绑定，并在代码中实现调用，从而实现请求服务器内容，生成完整代码，之后，将该代码自动发布至线上环境的目录中，进行预发布，供开发者预览和调试，最后再开发者确认发布之后，完整产品的正式发布。
108.本技术实施例提供的页面生成及发布方法，通过线上ui编辑器对ui设计稿进行拖拉拽式的编辑和布局，并且能够与业务功能组件进行关联调用，然后自动生成h5、android或ios等前端代码，只需ui即可上线，实现一站式产品发布流程，本技术可极大降低互联网线上产品的研发成本,完全借助平台系统，零代码环境下完成产品配置和发布，有效实现快速上线，非常具有灵活性和扩展性。本发明方法包括产品创建，数据配置，ui配置和预览发布。
109.本技术实施例可以根据上述方法示例对页面生成及发布装置进行功能模块或者功能单元的划分，例如，可以对应各个功能划分各个功能模块或者功能单元，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块或者功能单元的形式实现。其中，本技术实施例中对模块或者单元的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
110.如图4所示，为本技术实施例提供的一种页面生成及发布装置的结构示意图，该装置包括：生成模块401和执行模块402，其中：上述生成模块401，用于根据活动产品的用户界面ui视觉稿生成对应的布局界面；上述执行模块402，用于通过ui编辑器对上述布局界面进行编辑操作，并对上述布局界面进行业务数据配置；上述业务数据配置包括业务相关数据配置、业务组件配置和业务方法配置中的至少一项；上述执行模块402，还用于基于配置后的布局界面生成目标页面代码，并根据上述目标页面代码执行上述活动产品的页面生成和发布。
111.可选地，在本技术实施例中，上述执行模块，具体用于获取业务数据，上述业务数据包括业务相关数据、业务组件和业务方法中的至少一项；上述执行模块，具体用于将上述业务数据渲染到相应的业务组件中，或将上述业务数据绑定在对应的界面按钮上提供调用。
112.可选地，在本技术实施例中，上述执行模块，具体用于根据上述配置后的布局界面生成初始页面代码；上述执行模块，具体用于对上述业务数据与上述初始页面代码中的ui组件元素进行关联调用，生成目标页面代码。
113.可选地，在本技术实施例中，上述业务数据为针对上述活动产品预先配置的业务数据，或者，上述业务数据为系统内置的业务数据。
114.可选地，在本技术实施例中，上述生成模块，具体用于根据活动产品的ui视觉稿的图层信息，将上述ui视觉稿的图层进行识别分类，并获取上述图层的图层属性；上述生成模块，具体用于根据上述图层的图层属性和类别，将上述图层与代码元素块进行匹配，生成对应的布局界面。
115.可选地，在本技术实施例中，上述执行模块，具体用于将上述目标页面代码部署至线上环境的预发布目录中，生成目标页面并进行上述目标页面的预发布；上述执行模块，具体用于在获取到确认发布指令的情况下，将上述目标页面代码部署至正式的生产环境中，生成目标页面并进行上述目标页面的正式发布。
116.本技术实施例提供的页面生成及发布装置，页面生成及发布装置基于活动产品的ui视觉稿生成布局界面，通过ui编辑器对活动产品对应的布局界面进行编辑操作，并对该布局界面进行业务相关数据配置、业务组件配置和业务方法配置中的至少一项，最后基于配置后的布局界面生成目标页面代码。通过该方法，自主对布局界面进行业务数据和业务逻辑的配置以及线上自动发布，实现业务数据和业务逻辑配置以及自动化线上生成及发布功能，极大降低互联网线上产品的研发成本，有效实现快速上线，具有较高的灵活性和扩展性。
117.在通过硬件实现时，本技术实施例中生成模块401和执行模块402可以集成在处理器上。具体实现方式如图5所示。
118.图5示出了上述实施例中所涉及的页面生成及发布装置的又一种可能的结构示意图。该页面生成及发布装置包括：处理器502和通信接口503。处理器502用于对页面生成及发布装置的动作进行控制管理，例如，执行上述生成模块401和执行模块402执行的步骤，和/或用于执行本文所描述的技术的其它过程。页面生成及发布装置还可以包括存储器501和总线504，存储器501用于存储页面生成及发布装置的程序代码和数据。
119.其中，存储器501可以是页面生成及发布装置中的存储器等，该存储器可以包括易失性存储器，例如随机存取存储器；该存储器也可以包括非易失性存储器，例如只读存储器，快闪存储器，硬盘或固态硬盘；该存储器还可以包括上述种类的存储器的组合。
120.上述处理器502可以是实现或执行结合本技术公开内容所描述的各种示例性的逻辑方框，模块和电路。该处理器可以是中央处理器，通用处理器，数字信号处理器，专用集成电路，现场可编程门阵列或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本技术公开内容所描述的各种示例性的逻辑方框，模块和电路。该处理器也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，dsp和微
处理器的组合等。
121.总线504可以是扩展工业标准结构(extendedindustrystandard architecture，eisa)总线等。总线504可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
122.图6是本技术实施例提供的芯片170的结构示意图。芯片170包括一个或两个以上(包括两个)处理器1710和通信接口1730。
123.可选的，该芯片170还包括存储器1740，存储器1740可以包括只读存储器和随机存取存储器，并向处理器1710提供操作指令和数据。存储器1740的一部分还可以包括非易失性随机存取存储器(non-volatilerandom accessmemory，nvram)。
124.在一些实施方式中，存储器1740存储了如下的元素，执行模块或者数据结构，或者他们的子集，或者他们的扩展集。
125.在本技术实施例中，通过调用存储器1740存储的操作指令(该操作指令可存储在操作系统中)，执行相应的操作。
126.其中，上述处理器1710可以实现或执行结合本技术公开内容所描述的各种示例性的逻辑方框，单元和电路。该处理器可以是中央处理器，通用处理器，数字信号处理器，专用集成电路，现场可编程门阵列或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本技术公开内容所描述的各种示例性的逻辑方框，单元和电路。所述处理器也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，dsp和微处理器的组合等。
127.存储器1740可以包括易失性存储器，例如随机存取存储器；该存储器也可以包括非易失性存储器，例如只读存储器，快闪存储器，硬盘或固态硬盘；该存储器还可以包括上述种类的存储器的组合。
128.总线1720可以是扩展工业标准结构(extendedindustrystandard architecture，eisa)总线等。总线1720可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条线表示，但并不表示仅有一根总线或一种类型的总线。
129.通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
130.本技术实施例提供一种包含指令的计算机程序产品，当该计算机程序产品在计算机上运行时，使得该计算机执行上述方法实施例中的页面生成及发布方法。
131.本技术实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有指令，当该指令在计算机上运行时，使得该计算机执行上述方法实施例所示的方法流程中的页面生成及发布方法。
132.其中，计算机可读存储介质，例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(randomaccess memory，ram)、只读存储器(read-onlymemory，rom)、可擦式可编程只读存
储器(erasableprogrammablereadonlymemory，eprom)、寄存器、硬盘、光纤、便携式紧凑磁盘只读存储器(compactdiscread-only memory，cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合、或者本领域熟知的任何其它形式的计算机可读存储介质。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于特定用途集成电路(applicationspecific integratedcircuit，asic)中。在本技术实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
133.本发明的实施例提供一种包含指令的计算机程序产品，当指令在计算机上运行时，使得计算机执行上述方法实施例中的页面生成及发布方法。
134.由于本发明的实施例中的页面生成及发布装置、计算机可读存储介质、计算机程序产品可以应用于上述方法，因此，其所能获得的技术效果也可参考上述方法实施例，本发明实施例在此不再赘述。
135.在本技术所提供的几个实施例中，应该理解到，所揭露的系统、设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
136.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
137.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
138.以上，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何在本技术揭露的技术范围内的变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应该以权利要求的保护范围为准。

技术特征：
1.一种页面生成及发布方法，其特征在于，所述方法包括：根据活动产品的用户界面ui视觉稿生成对应的布局界面；通过ui编辑器对所述布局界面进行编辑操作，并对所述布局界面进行业务数据配置；所述业务数据配置包括业务相关数据配置、业务组件配置和业务方法配置中的至少一项；基于配置后的布局界面生成目标页面代码，并根据所述目标页面代码执行所述活动产品的页面生成和发布。2.根据权利要求1所述的方法，其特征在于，所述对所述布局界面进行业务数据配置，包括：获取业务数据，所述业务数据包括业务相关数据、业务组件和业务方法中的至少一项；将所述业务数据渲染到所述布局界面中相应的业务组件中，或将所述业务数据绑定在所述布局界面中对应的界面按钮上提供调用。3.根据权利要求1所述的方法，其特征在于，所述基于配置后的布局界面生成目标页面代码，包括：根据所述配置后的布局界面生成初始页面代码；将所述业务数据与所述初始页面代码中的ui组件元素进行关联调用，生成目标页面代码。4.根据权利要求1至3任一项所述的方法，其特征在于，所述业务数据为针对所述活动产品预先配置的业务数据，或者，所述业务数据为系统内置的业务数据。5.根据权利要求1所述的方法，其特征在于，所述根据活动产品的用户界面ui视觉稿生成对应的布局界面，包括：根据活动产品的ui视觉稿的图层信息，将所述ui视觉稿的图层进行识别分类，并获取所述图层的图层属性；根据所述图层的图层属性和类别，将所述图层与代码元素块进行匹配，生成对应的布局界面。6.根据权利要求1所述的方法，其特征在于，所述根据所述目标页面代码执行所述活动产品的页面生成和发布，包括：将所述目标页面代码部署至线上环境的预发布目录中，生成目标页面并进行所述目标页面的预发布；在获取到确认发布指令的情况下，将所述目标页面代码部署至正式的生产环境中，生成目标页面并进行所述目标页面的正式发布。7.一种页面生成及发布装置，其特征在于，所述装置包括：生成模块和执行模块，其中：所述生成模块，用于根据活动产品的用户界面ui视觉稿生成对应的布局界面；所述执行模块，用于通过ui编辑器对所述布局界面进行编辑操作，并对所述布局界面进行业务数据配置；所述业务数据配置包括业务相关数据配置、业务组件配置和业务方法配置中的至少一项；所述执行模块，还用于基于配置后的布局界面生成目标页面代码，并根据所述目标页面代码执行所述活动产品的页面生成和发布。8.根据权利要求7所述的装置，其特征在于，所述执行模块，具体用于获取业务数据，所述业务数据包括业务相关数据、业务组件和
业务方法中的至少一项；所述执行模块，具体用于将所述业务数据渲染到相应的业务组件中，或将所述业务数据绑定在对应的界面按钮上提供调用。9.根据权利要求7所述的装置，其特征在于，所述执行模块，具体用于根据所述配置后的布局界面生成初始页面代码；所述执行模块，具体用于对所述业务数据与所述初始页面代码中的ui组件元素进行关联调用，生成目标页面代码。10.根据权利要求7至9任一项所述的装置，其特征在于，所述业务数据为针对所述活动产品预先配置的业务数据，或者，所述业务数据为系统内置的业务数据。11.根据权利要求7所述的装置，其特征在于，所述生成模块，具体用于根据活动产品的ui视觉稿的图层信息，将所述ui视觉稿的图层进行识别分类，并获取所述图层的图层属性；所述生成模块，具体用于根据所述图层的图层属性和类别，将所述图层与代码元素块进行匹配，生成对应的布局界面。12.根据权利要求7所述的装置，其特征在于，所述执行模块，具体用于将所述目标页面代码部署至线上环境的预发布目录中，生成目标页面并进行所述目标页面的预发布；所述执行模块，具体用于在获取到确认发布指令的情况下，将所述目标页面代码部署至正式的生产环境中，生成目标页面并进行所述目标页面的正式发布。13.一种页面生成及发布装置，其特征在于，包括：处理器和通信接口；所述通信接口和所述处理器耦合，所述处理器用于运行计算机程序或指令，以实现如权利要求1-6任一项中所述的页面生成及发布方法。14.一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，其特征在于，当计算机执行该指令时，该计算机执行上述权利要求1-6任一项中所述的页面生成及发布方法。

技术总结
本申请提供一种页面生成及发布方法、装置及可读存储介质，涉及视觉设计领域，能够对布局界面进行业务数据和业务逻辑的配置以及线上自动发布，实现业务数据和业务逻辑配置以及自动化线上生成及发布功能，极大降低互联网线上产品的研发成本。该方法包括：根据活动产品的用户界面UI视觉稿生成对应的布局界面；通过UI编辑器对所述布局界面进行编辑操作，并对布局界面进行业务数据配置；上述业务数据配置包括业务相关数据配置、业务组件配置和业务方法配置中的至少一项；基于配置后的布局界面生成目标页面代码，并根据上述目标页面代码所述活动产品的页面生成和发布。本申请实施例应用于活动产品的页面的生成及发布过程中。活动产品的页面的生成及发布过程中。活动产品的页面的生成及发布过程中。


技术研发人员：刘飞 马震 赵君 王亮
受保护的技术使用者：联通在线信息科技有限公司
技术研发日：2023.06.05
技术公布日：2023/9/12