CN111459478A - 一种生成网页的方法及终端 - Google Patents
一种生成网页的方法及终端 Download PDFInfo
- Publication number
- CN111459478A CN111459478A CN202010139103.1A CN202010139103A CN111459478A CN 111459478 A CN111459478 A CN 111459478A CN 202010139103 A CN202010139103 A CN 202010139103A CN 111459478 A CN111459478 A CN 111459478A
- Authority
- CN
- China
- Prior art keywords
- component
- target
- webpage
- terminal
- information
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 40
- 230000002452 interceptive effect Effects 0.000 claims abstract description 79
- 230000000007 visual effect Effects 0.000 claims abstract description 59
- 238000009877 rendering Methods 0.000 claims abstract description 27
- 238000003780 insertion Methods 0.000 claims abstract description 6
- 230000037431 insertion Effects 0.000 claims abstract description 6
- 238000013461 design Methods 0.000 claims description 37
- 238000001514 detection method Methods 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000000712 assembly Effects 0.000 description 3
- 238000000429 assembly Methods 0.000 description 3
- 238000005266 casting Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012946 outsourcing Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- 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/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请适用于计算机技术领域，提供了一种生成网页的方法及终端，包括：当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。上述方式，对可视化编辑器的交互界面中被拖拽的组件进行插入、渲染操作，并在获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页；这种开发网页的方法，提升了开发网页的效率，降低了开发网页的成本。
Description
技术领域
本申请属于计算机技术领域，尤其涉及一种生成网页的方法及终端。
背景技术
随着互联网的发展，网页的应用越来越广泛。例如，网页可以应用于移动设备、小程序、手机软件(Application，APP)、电脑等。为了契合时代的发展，网页也变得越来越丰富多样。然而，传统的网页开发需要开发人员经验丰富，并多次与客户沟通，花费大量的时间才可开发出客户满意的网页，导致网页开发效率低，开发成本高。
发明内容
有鉴于此，本申请实施例提供了一种生成网页的方法及终端，以解决传统的网页开发需要开发人员经验丰富，并多次与客户沟通，花费大量的时间才可开发出客户满意的网页，导致网页开发效率低，开发成本高的问题。
本申请实施例的第一方面提供了一种生成网页的方法，包括：
当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；
获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息；
当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
进一步地，当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域之后还包括：当获取到包含组件标识信息的调整请求时，基于所述调整请求中包含的调整内容，调整所述组件标识信息对应的组件；获取调整后的组件对应的目标组件信息，并基于所述目标组件信息在所述交互界面渲染所述调整后的组件。
进一步地，当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页之后还包括：生成与所述目标网页对应的预览信息；所述预览信息用于预览所述目标网页。
进一步地，当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页之后还包括：当获取到网页发布请求时，发布所述目标网页。
进一步地，所述网页发布请求包含所述目标网页所需发布的目标终端，所述当获取到网页发布请求时，发布所述目标网页包括：检测所述目标网页当前的运行环境与所述目标终端提供的运行环境是否相同；
当检测结果为相同时，将所述目标网页对应的代码发送至所述目标终端；所述代码用于在所述目标终端发布所述目标网页。
进一步地，检测所述目标网页当前的运行环境与所述目标终端提供的运行环境是否相同之后还包括：当检测结果为不同时，将所述目标网页对应的代码转译为目标终端代码，并将所述目标终端代码发送至所述目标终端；所述目标终端代码用于在所述目标终端发布所述目标网页。
进一步地，本申请还包括：获取网页设计稿；当检测到所述可视化编辑器中未存储与所述网页设计稿匹配的目标组件时，生成提示信息；所述提示信息用于提示开发人员开发与所述网页设计稿匹配的组件；或当检测到所述可视化编辑器中存储有与所述网页设计稿匹配的目标组件时，基于所述目标组件生成与所述网页设计稿对应的网页。
本发明实施例的第二方面提供了一种生成网页的终端，该终端包括：
插入单元，用于当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；
渲染单元，用于获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息；
生成单元，用于当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
进一步地，所述终端还包括：
调整单元，用于当获取到包含组件标识信息的调整请求时，基于所述调整请求中包含的调整内容，调整所述组件标识信息对应的组件；
所述生成单元具体用于：获取调整后的组件对应的目标组件信息，并基于所述目标组件信息在所述交互界面渲染所述调整后的组件。
进一步地，所述终端还包括：
预览信息生成单元，用于生成与所述目标网页对应的预览信息；所述预览信息用于预览所述目标网页。
进一步地，所述终端还包括：
发布单元，用于当获取到网页发布请求时，发布所述目标网页。
进一步地，所述网页发布请求包含所述目标网页所需发布的目标终端，所述发布单元包括：
检测单元，用于检测所述目标网页当前的运行环境与所述目标终端提供的运行环境是否相同；
第一发送单元，用于当检测结果为相同时，将所述目标网页对应的代码发送至所述目标终端；所述代码用于在所述目标终端发布所述目标网页。
第二发送单元，用于当检测结果为不同时，将所述目标网页对应的代码转译为目标终端代码，并将所述目标终端代码发送至所述目标终端；所述目标终端代码用于在所述目标终端发布所述目标网页。
进一步地，所述终端还包括：
获取单元，用于获取网页设计稿；
提示信息生成单元，用于当检测到所述可视化编辑器中未存储与所述网页设计稿匹配的目标组件时，生成提示信息；所述提示信息用于提示开发人员开发与所述网页设计稿匹配的组件；
网页生成单元，用于当检测到所述可视化编辑器中存储有与所述网页设计稿匹配的目标组件时，基于所述目标组件生成与所述网页设计稿对应的网页。
本发明实施例的第三方面提供了另一种终端，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储支持终端执行上述方法的计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行以下步骤：
当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；
获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息；
当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
本发明实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；
获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息；
当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
本申请实施例提供的一种生成网页的方法及终端具有以下有益效果：
本申请实施例，终端在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。上述方式，对可视化编辑器的交互界面中被拖拽的组件进行插入、渲染操作，并在获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页；这种开发网页的方法，无需与客户多次沟通，不需要花大量时间就可开发出满足客户需求的网页，提升了开发网页的效率，降低了开发网页的成本。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本申请一实施例提供的一种生成网页的方法的实现流程图；
图2是本申请另一实施例提供的一种生成网页的方法的实现流程图；
图3是本申请一实施例提供的一种生成网页的终端的示意图；
图4是本申请另一实施例提供的一种生成网页的终端的示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
请参见图1，图1是本发明实施例提供的一种生成网页的方法的示意流程图。本实施例中生成网页的方法的执行主体为终端，终端包括但不限于智能手机、平板电脑、计算机、个人数字助理(Personal Digital Assistant，PDA)等移动终端，还可以包括台式电脑等终端。如图1所示的生成网页的方法可包括：
S101：当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序。
针对现有的网页开发效率低，开发成本高的问题，我们开发制作了可视化编辑器，该可视化编辑器可以用于构建网页，也可理解为构建网页的页面；该可视化编辑器是一种应用程序，应用于本申请的终端中。可视化编辑器的交互界面可以由三个区域组成，分别为组件库区域、组件搭建区域以及组件详细配置区域，这三个区域的位置可以是可以分别是左中右、上中下等，对此不做限定。其中，组件库区域用于显示各个组件；例如基础组件、营销组件、外投组件等，基础组件可以包括图片、文字、按钮、辅助空白、辅助线等，可理解为基本组件是构建成网页的基本元素；营销组件以及外投组件由基础组件中的各个组件组合嵌套而成，可满足用户的不同需求，即根据用户的不同需求组合嵌套不同的营销组件以及外投组件。无论是基础组件还是嵌套组件都对其的命名、样式、功能等进行的规范约束，以保证配置样式、数据、事件的功能稳定性、方便性、多样性，以适应多方位的需求。组件搭建区域用于实现对各个组件的组装搭建、渲染，进而生成网页；例如，可将组件库区域中的组件拖拽至组件搭建区域进行组装搭建，对被拖拽至组件搭建区域中的组件进行渲染，进而根据该组件搭建区域中被渲染后的组件生成网页。组件详细配置区域用于对各个拖拽至组件搭建区域中的组件进行调整，例如调整组件的大小、颜色、样式、字体、线条等，以实际情况为准，对此不做限定。
当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将该任一组件插入第一位置对应的区域。其中，第一位置为该交互界面中组件搭建区域的任意位置；用户可根据自身需求将组件库区域中的任一组件通过鼠标拖拽至交互界面中组件搭建区域的任意位置；若是触摸屏，用户可通过手指或触屏笔等将组件库区域中的任一组件拖拽至交互界面中组件搭建区域的任意位置。当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将该任一组件插入第一位置对应的区域；可理解为当检测到任一组件被拖拽至该交互界面中的组件搭建区域的第一位置时，终端会寻找并确认与第一位置对应的区域，并将该任一组件放置于第一位置对应的区域。
S102：获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息。
终端获取该任一组件的组件信息，并基于该组件信息在可视化编辑器的交互界面渲染该任一组件。其中，组件信息包括该任一组件的属性信息，如组件大小、组件颜色、组件对应的字体、组件下划线、组件结构、组件图案等；组件信息还包括该任一组件的位置信息，该组件的位置信息由该任一组件在交互界面中的所处的第一位置对应的区域决定；对整个交互界面中组件搭建区域中的所有组件可采用同一定位方式进行标记，如相对定位或绝对定位，对此不做限定。终端采集该任一组件的组件信息，具体地，该任一组件被拖拽至交互界面中的组件搭建区域中时，生成了相应的代码，可通过分析这些代码数据得到该任一组件的属性信息以及位置信息。终端根据获取到的该任一组件的属性信息以及位置信息在当前交互界面中的组件搭建区域渲染该任一组件，可理解为根据该任一组件的属性信息以及位置信息在当前交互界面中的组件搭建区域中完全配置该任一组件，并以图像的形式显示该任一组件。
进一步地，交互界面中的组件库区域里还可包括网页模板，该网页模板由各个基础组件嵌套组装而成；在使用时，用户可直接将该网页模板拖拽至组件搭建区域，只需对应修改文字即可直接使用；这样讲加快了生成目标网页的速度，提升了效率。用户也可仿照该网页模板拖拽各个基础组件，在仿照该网页模板进行拖拽组件时，可根据实际需求实时调整各个组件，例如增加一些自己想要添加的组件，或者删除网页模板中某个对应的组件，或者对组件的属性、位置进行调整等，终端对各个组件进行渲染，从而得到与网页模板类似的目标网页。这样当有些用户一时想不到做什么样的网页更合适时，就可以参考网页模板，生成满足自身需求的网页。
S103：当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
当获取到拖拽组装完成指令时，终端基于当前交互界面中每个渲染后的组件生成目标网页。拖拽组装完成指令表示当前用户已经完成了其想要的网页中所需的所有组件的拖拽操作；拖拽组装完成指令可由用户点击设置在可视化编辑器交互界面中的保存按钮、完成按钮等触发。例如，用户觉得当前交互界面的组件搭建区域中被渲染的组件已经很达到要求了，这时可点击保存按钮或者点击完成按钮，终端检测到拖拽组装完成指令，根据当前交互界面的组件搭建区域中每个渲染后的组件生成目标网页。由于当前交互界面的组件搭建区域中的各个组件都是被渲染过的，则获取这些被渲染后的组件组成的页面即为获取到目标网页。
进一步地，在使用可视化编辑器之前，获取该可视化编辑器的操作权限。操作权限可包括超级管理员权限、管理员权限、开发者权限以及体验用户权限；超级管理员权限拥有最高权限，是网页的创建者，可以添加、删除管理员，可以给管理员添加网页的编辑操作权限，可将生成的目标网页退回至任意之前生成的版本，即拥有超级管理员权限可对可视化编辑器进行任何操作；管理员权限拥有编辑网页权限，可预览生成的目标网页；开发者权限可调试目标网页，对网页功能等进行设置，可编辑网页内容，可预览生成的目标网页；体验用户权限只可预览生成的目标网页。根据用户想要进行的操作获取不同的操作权限，进而对可视化编辑器进行不同的操作。
进一步地，为了满足不同用户的需求，在另一种实现方式中，也可以是获取网页设计稿；当检测到所述可视化编辑器中未存储与所述网页设计稿匹配的目标组件时，生成提示信息；所述提示信息用于提示开发人员开发与所述网页设计稿匹配的组件；或
当检测到所述可视化编辑器中存储有与所述网页设计稿匹配的目标组件时，基于所述目标组件生成与所述网页设计稿对应的网页。
具体地，当用户有提供网页设计稿时，需要设计出与该网页设计稿匹配的网页。此时，可先将网页设计稿上传至终端上的可视化编辑器中，终端检测可视化编辑器中是否有存储与网页设计稿匹配的目标组件。当检测到可视化编辑器中未存储与网页设计稿匹配的目标组件时，生成提示信息。该提示信息用于提示开发人员开发与该网页设计稿匹配的组件。可以理解为当前可视化编辑器中存储的组件并不能够做出与该网页设计稿匹配的网页，因此生成提示信息提示开发人员开发与网页设计稿匹配的相关组件。
当检测到可视化编辑器中存储有与网页设计稿匹配的目标组件时，根据这些目标组件生成与网页设计稿对应的网页。可以理解为当前可视化编辑器中存储有可生成该网页设计稿对应的网页所需的目标组件，通过这些目标组件生成与网页设计稿对应的网页的方法与S101-S103中的步骤相同，此处不做赘述。
本申请实施例，终端在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。上述方式，对可视化编辑器的交互界面中被拖拽的组件进行插入、渲染操作，并在获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页；这种开发网页的方法，无需与客户多次沟通，不需要花大量时间就可开发出满足客户需求的网页，提升了开发网页的效率，降低了开发网页的成本。
请参见图2，图2是本发明另一实施例提供的一种生成网页的方法的示意流程图。本实施例中生成网页的方法的执行主体为终端，终端包括但不限于智能手机、平板电脑、计算机、个人数字助理等移动终端，还可以包括台式电脑等终端。
本实施例与上一实施例的区别为S202-S203、S205-S206，本实施例中S201、S204与上一实施例中的S101、S103完全相同，具体请参阅上一实施例中S101、S103的相关描述，此处不赘述。
进一步地，为了使生成的网页丰富多样，满足用户的不同需求，可对各个组件的属性以及位置进行调整，在S201之后还可包括S202，具体如下：
S202：当获取到包含组件标识信息的调整请求时，基于所述调整请求中包含的调整内容，调整所述组件标识信息对应的组件。
交互界面的组件详细配置区域用于对每个组件的属性以及位置进行调整，当用户在组件详细配置区域点击关于某个组件的调整选项时，会触发包含组件标识信息的调整请求，终端获取到包含组件标识信息的调整请求时，获取该调整请求中包含的调整内容，例如调整组件的大小、颜色、下划线、字体、位置等，根据调整内容调整交互界面的组件搭建区域中该组件标识信息对应的组件。
S203：获取调整后的组件对应的目标组件信息，并基于所述目标组件信息在所述交互界面渲染所述调整后的组件。
当对交互界面的组件搭建区域中的组件的属性和/或位置进行调整后，获取调整后的组件对应的目标组件信息；目标组件信息包含调整后的组件的属性信息以及调整后的组件的位置信息。基于该目标组件信息在交互界面渲染调整后的组件。具体地，终端根据获取到的调整后的组件的属性信息以及调整后的组件的位置信息，在当前交互界面中的组件搭建区域渲染该调整后的组件，可理解为根据目标组件信息在当前交互界面中的组件搭建区域中完全配置该调整后的组件，并以图像的形式显示该调整后的组件。
进一步地，为了便于用户提前预览生成的网页是否满足要求，在S204之后还可包括S205，具体如下：
S205：生成与所述目标网页对应的预览信息；所述预览信息用于预览所述目标网页。
终端生成与目标网页对应的预览信息，该预览信息用于预览目标网页。预览信息可以是预览链接，也可以是预览二维码，用户可通过点击预览链接在线上预览该目标网页，也可以通过扫描预览二维码在线上预览该目标网页。具体地，终端获取目标网页对应的路径，将该路径添加到预设的路径模板中生成该目标网页对应的预览链接；进一步地，通过链接转二维码技术将该预览链接转为预览二维码。用户便可在目标网页发布之前通过预览链接或者预览二维码预览目标网页，当用户觉得目标网页还有哪里需要修改时，便可及时提出问题，以便开发人员及时通过可视化编辑器对目标网页进行修改，避免出现已经发布了网页，用户觉得不满意又重新调整，不仅浪费时间，还增加了网页开发成本。
进一步地，为了及时发布目标网页，在S204之后或S205之后还可包括S206，具体如下：
S206：当获取到网页发布请求时，发布所述目标网页。
用户可通过点击可视化编辑器中的发布网页按钮触发网页发布请求，终端在获取到该网页发布请求时，发布该目标网页。网页发布请求中包含该目标网页所需发布的目标终端。当目标终端为当前终端时，可直接发布该目标网页；当目标终端非当前终端时，检测目标网页当前的运行环境与目标终端提供的运行环境是否相同；当检测结果为相同时，将目标网页对应的代码发送至目标终端；该代码用于在目标终端发布目标网页。当检测结果为不同时，将目标网页对应的代码转译为目标终端代码，并将目标终端代码发送至目标终端；目标终端代码用于在目标终端发布目标网页。
进一步地，为了使目标网页可以在各个不同类型的终端上发布，S206可以包括S2061-S2062或S2061-S2063，具体如下：
S2061：检测所述目标网页当前的运行环境与所述目标终端提供的运行环境是否相同。
网页发布请求包含有目标网页所需发布的目标终端，检测目标网页当前的运行环境与目标终端提供的运行环境是否相同，可以理解为检测目标终端是否能提供可支持目标网页发布的运行环境。当目标网页当前的运行环境与目标终端提供的运行环境相同时执行S2062；当目标网页当前的运行环境与目标终端提供的运行环境不同时执行S2063。
S2062：当检测结果为相同时，将所述目标网页对应的代码发送至所述目标终端；所述代码用于在所述目标终端发布所述目标网页。
当检测结果为目标网页当前的运行环境与目标终端提供的运行环境相同时，说明目标终端可以提供可支持目标网页发布的运行环境；终端获取目标网页对应的代码，并将该代码发送至目标终端；目标终端接收到代码后，基于该代码在目标终端发布目标网页。
S2063：当检测结果为不同时，将所述目标网页对应的代码转译为目标终端代码，并将所述目标终端代码发送至所述目标终端；所述目标终端代码用于在所述目标终端发布所述目标网页。
当检测结果为目标网页当前的运行环境与目标终端提供的运行环境不同时，说明目标终端不能提供可支持目标网页发布的运行环境；终端获取目标网页对应的代码，将目标网页对应的代码转译为目标终端代码；例如可将目标网页对应的代码分析成一颗抽象语法树，通过语法转译器生成可在目标终端运行的目标终端代码。将该目标终端代码发送至目标终端；目标终端接收到目标终端代码后，基于该目标终端代码在目标终端发布目标网页。这样无论是在什么类型的终端发布该目标网页都可快速实现，可满足不同终端应用开发网页的需求，例如可通过该方法在移动端、小程序、原生APP、桌面端等发布目标网页，提升了开发网页的效率，降低了开发网页的成本。
本申请实施例，终端在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。上述方式，对可视化编辑器的交互界面中被拖拽的组件进行插入、渲染操作，并在获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页；这种开发网页的方法，无需与客户多次沟通，不需要花大量时间就可开发出满足客户需求的网页，提升了开发网页的效率，降低了开发网页的成本；进一步地，通过转译目标网页代码的方式可使目标网页在各种类型的终端均可发布，增强了网页的适应性。
请参见图3，图3是本申请一实施例提供的一种生成网页的终端的示意图。该终端包括的各单元用于执行图1、图2对应的实施例中的各步骤。具体请参阅图1、图2各自对应的实施例中的相关描述。为了便于说明，仅示出了与本实施例相关的部分。参见图3，包括：
插入单元310，用于当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；
渲染单元320，用于获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息；
生成单元330，用于当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
进一步地，所述终端还包括：
调整单元，用于当获取到包含组件标识信息的调整请求时，基于所述调整请求中包含的调整内容，调整所述组件标识信息对应的组件；
所述生成单元330具体用于：获取调整后的组件对应的目标组件信息，并基于所述目标组件信息在所述交互界面渲染所述调整后的组件。
进一步地，所述终端还包括：
预览信息生成单元，用于生成与所述目标网页对应的预览信息；所述预览信息用于预览所述目标网页。
进一步地，所述终端还包括：
发布单元，用于当获取到网页发布请求时，发布所述目标网页。
进一步地，所述网页发布请求包含所述目标网页所需发布的目标终端，所述发布单元包括：
检测单元，用于检测所述目标网页当前的运行环境与所述目标终端提供的运行环境是否相同；
第一发送单元，用于当检测结果为相同时，将所述目标网页对应的代码发送至所述目标终端；所述代码用于在所述目标终端发布所述目标网页。
第二发送单元，用于当检测结果为不同时，将所述目标网页对应的代码转译为目标终端代码，并将所述目标终端代码发送至所述目标终端；所述目标终端代码用于在所述目标终端发布所述目标网页。
进一步地，所述终端还包括：
获取单元，用于获取网页设计稿；
提示信息生成单元，用于当检测到所述可视化编辑器中未存储与所述网页设计稿匹配的目标组件时，生成提示信息；所述提示信息用于提示开发人员开发与所述网页设计稿匹配的组件；
网页生成单元，用于当检测到所述可视化编辑器中存储有与所述网页设计稿匹配的目标组件时，基于所述目标组件生成与所述网页设计稿对应的网页。
请参见图4，图4是本申请另一实施例提供的一种生成网页的终端的示意图。如图4所示，该实施例的终端4包括：处理器40、存储器41以及存储在所述存储器41中并可在所述处理器40上运行的计算机可读指令42。所述处理器40执行所述计算机可读指令42时实现上述各个生成网页的方法实施例中的步骤，例如图1所示的S101至S103。或者，所述处理器40执行所述计算机可读指令42时实现上述各实施例中各单元的功能，例如图3所示单元310至330功能。
示例性的，所述计算机可读指令42可以被分割成一个或多个单元，所述一个或者多个单元被存储在所述存储器41中，并由所述处理器40执行，以完成本申请。所述一个或多个单元可以是能够完成特定功能的一系列计算机可读指令段，该指令段用于描述所述计算机可读指令42在所述终端4中的执行过程。例如，所述计算机可读指令42可以被插入单元、渲染单元以及生成单元，各单元具体功能如上所述。
所述终端可包括，但不仅限于，处理器40、存储器41。本领域技术人员可以理解，图4仅仅是终端4的示例，并不构成对终端4的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端还可以包括输入输出终端、网络接入终端、总线等。
所称处理器40可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器41可以是所述终端4的内部存储单元，例如终端4的硬盘或内存。所述存储器41也可以是所述终端4的外部存储终端，例如所述终端4上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器41还可以既包括所述终端4的内部存储单元也包括外部存储终端。所述存储器41用于存储所述计算机可读指令以及所述终端所需的其他程序和数据。所述存储器41还可以用于暂时地存储已经输出或者将要输出的数据。
以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神范围，均应包含在本申请的保护范围之内。
Claims (10)
1.一种生成网页的方法，其特征在于，应用于终端，所述方法包括：
当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；
获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息；
当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
2.如权利要求1所述的方法，其特征在于，所述当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域之后，还包括：
当获取到包含组件标识信息的调整请求时，基于所述调整请求中包含的调整内容，调整所述组件标识信息对应的组件；
所述获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件包括：
获取调整后的组件对应的目标组件信息，并基于所述目标组件信息在所述交互界面渲染所述调整后的组件。
3.如权利要求1所述的方法，其特征在于，所述当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页之后，还包括：
生成与所述目标网页对应的预览信息；所述预览信息用于预览所述目标网页。
4.如权利要求1至3任一项所述的方法，其特征在于，所述当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页之后，还包括：
当获取到网页发布请求时，发布所述目标网页。
5.如权利要求4所述的方法，其特征在于，所述网页发布请求包含所述目标网页所需发布的目标终端，所述当获取到网页发布请求时，发布所述目标网页包括：
检测所述目标网页当前的运行环境与所述目标终端提供的运行环境是否相同；
当检测结果为相同时，将所述目标网页对应的代码发送至所述目标终端；所述代码用于在所述目标终端发布所述目标网页。
6.如权利要求5所述的方法，其特征在于，所述检测所述目标网页当前的运行环境与所述目标终端提供的运行环境是否相同之后，还包括：
当检测结果为不同时，将所述目标网页对应的代码转译为目标终端代码，并将所述目标终端代码发送至所述目标终端；所述目标终端代码用于在所述目标终端发布所述目标网页。
7.如权利要求1所述的方法，其特征在于，还包括：
获取网页设计稿；
当检测到所述可视化编辑器中未存储与所述网页设计稿匹配的目标组件时，生成提示信息；所述提示信息用于提示开发人员开发与所述网页设计稿匹配的组件；或
当检测到所述可视化编辑器中存储有与所述网页设计稿匹配的目标组件时，基于所述目标组件生成与所述网页设计稿对应的网页。
8.一种生成网页的终端，其特征在于，包括：
插入单元，用于当在可视化编辑器的交互界面检测到任一组件被拖拽至第一位置时，将所述任一组件插入所述第一位置对应的区域；所述可视化编辑器为应用于所述终端的应用程序；
渲染单元，用于获取所述任一组件的组件信息，并基于所述组件信息在所述交互界面渲染所述任一组件；所述组件信息包含所述任一组件的属性信息以及所述任一组件的位置信息；
生成单元，用于当获取到拖拽组装完成指令时，基于当前交互界面中每个渲染后的组件生成目标网页。
9.一种生成网页的终端，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的方法。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010139103.1A CN111459478A (zh) | 2020-03-03 | 2020-03-03 | 一种生成网页的方法及终端 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010139103.1A CN111459478A (zh) | 2020-03-03 | 2020-03-03 | 一种生成网页的方法及终端 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111459478A true CN111459478A (zh) | 2020-07-28 |
Family
ID=71676930
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010139103.1A Pending CN111459478A (zh) | 2020-03-03 | 2020-03-03 | 一种生成网页的方法及终端 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111459478A (zh) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112035117A (zh) * | 2020-08-27 | 2020-12-04 | 北京三快在线科技有限公司 | 页面展示系统、方法及装置 |
| CN112416328A (zh) * | 2020-12-11 | 2021-02-26 | 广州伊智信息科技有限公司 | 多平台小程序商城的构建方法、装置、设备及介质 |
| CN112596728A (zh) * | 2020-12-26 | 2021-04-02 | 中国农业银行股份有限公司 | 一种页面生成方法及装置 |
| CN112685677A (zh) * | 2021-01-06 | 2021-04-20 | 腾讯科技（深圳）有限公司 | 页面组件的处理方法、装置、电子设备及计算机存储介质 |
| CN112732254A (zh) * | 2020-12-29 | 2021-04-30 | 车巴达（苏州）网络科技有限公司 | 网页开发方法、装置、计算机设备和存储介质 |
| CN112947921A (zh) * | 2021-01-27 | 2021-06-11 | 长沙市到家悠享网络科技有限公司 | 快速搭建crud页面方法、装置、设备和存储介质 |
| CN113705177A (zh) * | 2021-08-23 | 2021-11-26 | 风变科技（深圳）有限公司 | 基于集成写稿环境的稿件录入方法、装置和计算机设备 |
| CN114625366A (zh) * | 2022-03-11 | 2022-06-14 | 北京金堤科技有限公司 | 一种页面编辑方法、装置、存储介质和电子设备 |
| CN116107557A (zh) * | 2023-01-17 | 2023-05-12 | 前海飞算云智软件科技(深圳)有限公司 | 页面的可视化开发方法、装置、存储介质及电子设备 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106445520A (zh) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | 一种可视化专题页面制作方法及装置 |
| CN107133035A (zh) * | 2017-04-25 | 2017-09-05 | 东莞中国科学院云计算产业技术创新与育成中心 | 响应式网页生成方法和装置 |
| CN107798084A (zh) * | 2017-10-17 | 2018-03-13 | 广东广业开元科技有限公司 | 一种web前端页面的可视化编辑生成系统及装置 |
| US20190238623A1 (en) * | 2015-03-27 | 2019-08-01 | Open Text Corporation | Mechanism for webpage composition |
| CN110795666A (zh) * | 2019-10-18 | 2020-02-14 | 腾讯科技（深圳）有限公司 | 一种网页生成方法、装置、终端及存储介质 |
-
2020
- 2020-03-03 CN CN202010139103.1A patent/CN111459478A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20190238623A1 (en) * | 2015-03-27 | 2019-08-01 | Open Text Corporation | Mechanism for webpage composition |
| CN106445520A (zh) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | 一种可视化专题页面制作方法及装置 |
| CN107133035A (zh) * | 2017-04-25 | 2017-09-05 | 东莞中国科学院云计算产业技术创新与育成中心 | 响应式网页生成方法和装置 |
| CN107798084A (zh) * | 2017-10-17 | 2018-03-13 | 广东广业开元科技有限公司 | 一种web前端页面的可视化编辑生成系统及装置 |
| CN110795666A (zh) * | 2019-10-18 | 2020-02-14 | 腾讯科技（深圳）有限公司 | 一种网页生成方法、装置、终端及存储介质 |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112035117A (zh) * | 2020-08-27 | 2020-12-04 | 北京三快在线科技有限公司 | 页面展示系统、方法及装置 |
| CN112416328A (zh) * | 2020-12-11 | 2021-02-26 | 广州伊智信息科技有限公司 | 多平台小程序商城的构建方法、装置、设备及介质 |
| CN112596728A (zh) * | 2020-12-26 | 2021-04-02 | 中国农业银行股份有限公司 | 一种页面生成方法及装置 |
| CN112732254A (zh) * | 2020-12-29 | 2021-04-30 | 车巴达（苏州）网络科技有限公司 | 网页开发方法、装置、计算机设备和存储介质 |
| CN112732254B (zh) * | 2020-12-29 | 2023-08-08 | 车巴达（苏州）网络科技有限公司 | 网页开发方法、装置、计算机设备和存储介质 |
| CN112685677A (zh) * | 2021-01-06 | 2021-04-20 | 腾讯科技（深圳）有限公司 | 页面组件的处理方法、装置、电子设备及计算机存储介质 |
| CN112947921A (zh) * | 2021-01-27 | 2021-06-11 | 长沙市到家悠享网络科技有限公司 | 快速搭建crud页面方法、装置、设备和存储介质 |
| CN113705177A (zh) * | 2021-08-23 | 2021-11-26 | 风变科技（深圳）有限公司 | 基于集成写稿环境的稿件录入方法、装置和计算机设备 |
| CN114625366A (zh) * | 2022-03-11 | 2022-06-14 | 北京金堤科技有限公司 | 一种页面编辑方法、装置、存储介质和电子设备 |
| CN116107557A (zh) * | 2023-01-17 | 2023-05-12 | 前海飞算云智软件科技(深圳)有限公司 | 页面的可视化开发方法、装置、存储介质及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111459478A (zh) | 一种生成网页的方法及终端 | |
| AU2021204770B2 (en) | System integrating a mobile device application creation, editing and distribution system with a website design system | |
| CN108182060B (zh) | 一种混合应用的埋点方法、移动终端及系统 | |
| EP2819035B1 (en) | Systems and methods for presentations with live application integration | |
| US7844898B2 (en) | Exporting a document in multiple formats | |
| US20140292753A1 (en) | Method of object customization by high-speed and realistic 3d rendering through web pages | |
| US20120323950A1 (en) | Embedded query formulation service | |
| US20230229406A1 (en) | Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product | |
| CN111177621B (zh) | 一种web页面开发方法、装置及系统 | |
| CN111881662A (zh) | 表单生成方法、装置、处理设备及存储介质 | |
| CN113032708A (zh) | 一种无代码Web开发系统 | |
| CN113407284A (zh) | 导航界面的生成方法、装置、存储介质及电子设备 | |
| CN113448569A (zh) | 一种站点页面的处理系统、方法、设备和存储介质 | |
| CN111324381A (zh) | 开发系统、方法、装置、计算机设备及存储介质 | |
| US11526578B2 (en) | System and method for producing transferable, modular web pages | |
| CN113868565A (zh) | 皮肤样式的文件编辑方法及装置 | |
| CN114168875A (zh) | 一种页面程序的生成方法、装置、计算机设备及存储介质 | |
| CN113296759A (zh) | 用户界面处理方法、用户界面处理系统、设备及存储介质 | |
| KR101987183B1 (ko) | 프론트-앤드 개발을 지원하는 앱 저작 장치, 앱 저작 도구를 사용한 앱 저작 방법 및 앱 개발 서버 | |
| CN112001157A (zh) | 一种网页数据表格在线设计方法及装置 | |
| CN117093386B (zh) | 页面截图方法、装置、计算机设备和存储介质 | |
| CN112988136B (zh) | 一种用户界面编辑方法及装置 | |
| CN111694723B (zh) | 产品在h5下运行时对节点及组件编辑的方法、存储介质 | |
| Jakubovic | Achieving Self-Sustainability in Interactive Graphical Programming Systems | |
| CN115373656A (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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 518000 Room 01, 20th Floor, Cuilin Building, No. 10, Kaifeng Road, Maling Community, Meilin Street, Futian District, Shenzhen, Guangdong Applicant after: Shenzhen Handhui Technology Group Co.,Ltd. Address before: 518000 2401e, 24 / F, Hainan Huanqing building, No. 24 Futian Road, Weizhen community, Futian street, Futian District, Shenzhen, Guangdong Applicant before: Shenzhen muchenglin Technology Co.,Ltd. |
|
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200728 |