CN112068824A - 一种网页开发预览方法、装置及电子设备 - Google Patents
一种网页开发预览方法、装置及电子设备 Download PDFInfo
- Publication number
- CN112068824A CN112068824A CN202010974807.0A CN202010974807A CN112068824A CN 112068824 A CN112068824 A CN 112068824A CN 202010974807 A CN202010974807 A CN 202010974807A CN 112068824 A CN112068824 A CN 112068824A
- Authority
- CN
- China
- Prior art keywords
- webpage
- program
- information
- edited
- developed
- 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
- 238000011161 development Methods 0.000 title claims abstract description 81
- 238000000034 method Methods 0.000 title claims abstract description 69
- 238000012986 modification Methods 0.000 claims abstract description 96
- 230000004048 modification Effects 0.000 claims abstract description 95
- 238000009877 rendering Methods 0.000 claims abstract description 55
- 238000005516 engineering process Methods 0.000 claims description 31
- 238000004088 simulation Methods 0.000 claims description 23
- 230000000694 effects Effects 0.000 abstract description 27
- 230000018109 developmental process Effects 0.000 description 75
- 230000008569 process Effects 0.000 description 16
- 238000004590 computer program Methods 0.000 description 8
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 238000012790 confirmation Methods 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 4
- 238000012360 testing method Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 239000000463 material Substances 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000006378 damage Effects 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
- 230000008672 reprogramming Effects 0.000 description 1
- 230000000717 retained effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000001360 synchronised effect Effects 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/34—Graphical or visual programming
-
- 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/33—Intelligent editors
Abstract
本发明实施例提供了一种网页开发预览方法、装置及电子设备，获取针对待开发网页的修改位置信息和修改所用的组件数据、待开发网页的待编辑网页程序，从预设的组件库中，匹配得到组件数据对应的代码模板，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像，控制待显示网页图像预览显示。对待开发网页的待编辑网页程序进行修改，对修改后的待编辑网页程序进行图像渲染，控制图像渲染得到的待显示网页图像预览显示，无需技术人员对待编辑网页程序进行代码编程，即可实现对网页开发效果的及时预览。
Description
技术领域
本发明涉及互联网技术领域，特别是涉及一种网页开发预览方法、装置及电子设备。
背景技术
随着互联网的普及与发展，越来越多的用户在互联网上浏览网页。针对不同用户的需求，需要对网页进行开发，在当前的网页开发中，需要技术人员具备专业的代码编程能力，通过代码编程实现对网页的开发。
由于使用互联网的用户大多不具备代码编程能力，而不同的用户对网页有不同的开发需求，需要专业的技术人员收集用户需求，再根据用户需求进行相应的代码编程，以实现网页开发。然而，用户的需求可能随时变化，或者，网页开发效果并不能满足用户的实际需求，则需要技术人员重复地进行代码编程，使得网页开发效率极低。
如果用户在提出开发需求后，能够立即对网页开发效果进行预览，用户可及时观察到网页开发效果是否满足实际需求，从而能够极大程度地提高网页开发效率。因此，如何对网页开发效果进行及时预览，成为网页开发中亟待解决的技术问题。
发明内容
本发明实施例的目的在于提供一种网页开发预览方法、装置及电子设备，以实现对网页开发效果进行及时预览。具体技术方案如下：
第一方面，本发明实施例提供了一种网页开发预览方法，该方法包括：
获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序；
从预设的组件库中，匹配得到组件数据对应的代码模板；
控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板；
对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像；
控制待显示网页图像预览显示。
第二方面，本发明实施例提供了一种网页开发预览装置，该装置包括：
第一获取模块，用于获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序；
匹配模块，用于从预设的组件库中，匹配得到组件数据对应的代码模板；
控制替换模块，用于控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板；
渲染模块，用于对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像；
控制显示模块，用于控制待显示网页图像预览显示。
第三方面，本发明实施例提供了一种电子设备，包括处理器和存储器，其中，存储器存储有能够被处理器执行的机器可执行指令，机器可执行指令由处理器加载并执行，以实现本发明实施例第一方面所提供的方法。
第四方面，本发明实施例提供了一种机器可读存储介质，机器可读存储介质内存储有计算机程序，计算机程序被处理器执行时实现本发明实施例第一方面所提供的方法。
第五方面，本发明实施例提供了一种包含指令的计算机程序产品，当该计算机程序产品在电子设备上运行时，使得电子设备执行本发明实施例第一方面所提供的方法。
本发明实施例提供的一种网页开发预览方法、装置及电子设备，获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序，从预设的组件库中，匹配得到组件数据对应的代码模板，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像，控制待显示网页图像预览显示。
对待开发网页的待编辑网页程序进行修改(即将待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板)，对修改后的待编辑网页程序进行图像渲染，控制图像渲染得到的待显示网页图像预览显示，无需技术人员对待编辑网页程序进行代码编程，即可实现对网页开发效果的及时预览。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例的开发系统的开发环境结构示意图；
图2为本发明一实施例的网页开发预览方法的流程示意图；
图3为本发明实施例的在用户端设备对待开发网页的初始网页图像进行展示预览的流程示意图；
图4为本发明实施例的待开发网页的网页示意图；
图5为本发明实施例的网页程序的源代码示意图；
图6为本发明实施例的代码槽点替换后的预览截图；
图7为本发明实施例的工作区和效果区显示示意图；
图8为本发明实施例的组件区显示示意图；
图9为本发明实施例的修改代码槽点后的预览截图；
图10为本发明另一实施例的网页开发预览方法的流程示意图；
图11为本发明又一实施例的网页开发预览方法的流程示意图；
图12为本发明实施例的创建浏览器实例获取预览图像的流程示意图；
图13为本发明实施例的点击操作获取预览图像的流程示意图；
图14为本发明实施例的用户进行网页开发预览网页开发效果的流程示意图；
图15为本发明实施例的网页开发预览装置的结构示意图；
图16为本发明实施例的平台服务器的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
web(网页)具有良好的跨平台兼容性，web程序一般存放在web设备(例如web服务器、物联网设备等)的存储器中，web程序能够给用户提供复杂的功能配置操作。用户可以通过访问web设备的IP(Internet Protocol，网络协议)地址或者域名，通过web上显示的网页信息了解web设备的设备情况，配置设备参数。web设备根据用户定制需求、自身程序更新、维护修复缺陷等情况，需要投入大量的人力、时间、物力来更新web程序。
为了节省人力、时间、物力，节省需求、设计、开发等一系列中间环节，简化web程序的开发流程，加速程序更新效率，创建web开发自动化平台，通过该平台，可以让不具备代码编程能力的目标使用人群(例如项目经理、产品经理、技术支持人员、维护人员等)通过一种类似于PPT(PowerPoint，一种演示文稿软件)的所见即所得方式操作生成具有一定功能的web程序，这样花费很少的人力、时间、物力的代价就能够得到代码实现。
web开发自动化平台的目标使用人群是缺乏代码编程开发能力的项目经理、产品经理、技术支持人员、维护人员等，所以平台必须要能做到所见即所得，就是目标使用人群在平台上修改web网页后，要马上能够看到web网页效果，由于修改后的web程序并没有重新替换到web设备的存储器中，实际通过访问web设备的IP地址或域名是看不到最新网页效果的，这就为平台要达到的所见即所得的预览效果提出了一个严峻的挑战。本发明实施例就是为了解决目标使用人群的需求对网页开发的预览功能进行设计。
为了实现对网页开发效果进行实时预览，本发明实施例提供了一种网页开发预览方法、装置及电子设备。
下面，首先对本发明实施例所提供的网页开发预览方法进行介绍，该网页开发预览方法应用于能够实现web开发的电子设备，例如web开发的平台服务器，如图1所示，在传统的web开发系统中，包括用户端设备(也称为web开发自动化前台)、平台服务器和存储有被开发的web程序的web设备(以下简称设备)。平台服务器是web开发自动化平台运行的服务器环境，平台服务器使用预设浏览器模拟技术可以访问被开发的web程序所在的设备环境，为前端的用户端设备输送数据；被开发的web程序所在的设备，是已经发布或者将要发布的web程序所存放运行的服务器环境，等web程序发布后，普通用户直接远程访问这个设备环境的IP地址或者域名，浏览web，填写用户名、密码登录网页账号进行更多操作。在实际应用时，用户端设备和平台服务器也可以集成在一个电子设备中，也就是说，该电子设备既可以给用户提供交互页面，也可以与web设备交互。
如图2所示，本发明实施例提供的一种网页开发预览方法，可以包括如下步骤。
S201，获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序。
S202，从预设的组件库中，匹配得到组件数据对应的代码模板。
S203，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板。
S204，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像。
S205，控制待显示网页图像预览显示。
应用本发明实施例，通过获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序，从预设的组件库中，匹配得到组件数据对应的代码模板，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像，控制待显示网页图像预览显示。对待开发网页的待编辑网页程序进行修改(即将待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板)，对修改后的待编辑网页程序进行图像渲染，控制图像渲染得到的待显示网页图像预览显示，无需技术人员对待编辑网页程序进行代码编程，即可实现对网页开发效果的及时预览。
目标使用人群在有针对待开发网页的开发需求时，会输入针对待开发网页的修改位置信息和修改所用的组件数据，这些信息可以是目标使用人群通过用户端设备的界面输入的，也可以是目标使用人群在电子设备的界面上输入的，其中，修改位置信息是指需要对待开发网页上哪个位置的组件进行替换或修改、在哪个位置增加组件等相应的位置信息，修改所用的组件数据是指在修改位置信息对应位置处进行组件替换、增加、修改等操作所使用的具体组件数据，可以是组件的名称、属性等。
待开发网页的待编辑网页程序是指待开发网页所对应的网页程序，一般情况下，待编辑网页程序存储在后台的设备上，电子设备可以从相应的设备上获取待编辑网页程序，当然，电子设备本地也可以做数据存储，存储着不同网页的网页程序，这样，电子设备可以从本地获取待编辑网页程序。
在本发明实施例中，不对获取针对待开发网页的修改位置信息和修改所用的组件数据，和获取待开发网页的待编辑网页程序的先后顺序做限定。在本发明实施例的一种实现方式中，电子设备可以先获取到针对待开发网页的修改位置信息和修改所用的组件数据，电子设备知道要对哪一个待开发网页进行修改，然后去获取待开发网页的待编辑网页程序；在本发明实施例的另一种实现方式中，电子设备可以先获取到待开发网页的待编辑网页程序，将待开发网页给用户预览，用户再针对该待开发网页提出修改需求，电子设备获取针对待开发网页的修改位置信息和修改所用的组件数据。
在电子设备本地预先存储有一个组件库，该组件库中记录有组件数据和代码模板的对应关系，即不同的组件数据对应有固定的代码模板，则在接收到组件数据后，可以从预设的组件库中匹配得到该组件数据对应的代码模板。
在匹配得到修改所用的组件数据对应的代码模板后，可以控制待编辑网页程序中修改位置信息对应位置处的源代码替换为该代码模板，具体的，将待编辑网页程序中修改位置信息对应位置处的源代码替换为该代码模板的操作可以是电子设备本地执行的，也可以是电子设备给设备侧发送替换指令，触发该设备执行的。
在本发明实施例的一种实现方式中，具体执行代码模板替换的过程可以是：使用预设浏览器模拟技术访问被开发的web程序所在的设备环境，利用预设浏览器模拟技术提供的网页修改接口，将待开发网页的待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板。
预设浏览器模拟技术是一种能够模拟用户操作来进行UI Test(User InterfaceTest，用户界面测试)或者作为爬虫访问网页来收集数据的技术，例如Puppeteer技术。Puppeteer是一个通过DevTools(设备工具)协议控制无头Chrome(一种浏览器)的NodeJS(一种基于Chrome引擎的JavaScript运行环境)库，可以通过Puppeteer技术提供的API(Application Programming Interface，应用程序编程接口)直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问网页来收集数据。当然，Puppeteer技术只是预设浏览器模拟技术的一个具体例子，其他能够实现模拟用户操作来进行UI Test或者作为爬虫访问网页来收集数据功能的技术，也属于本发明实施例的保护范围。
采用预设浏览器模拟技术进行模拟操作和网络爬虫，能够有效地避免对待开发网页程序框架的复杂分析，就是说网页程序框架无论采用Angular、Vue、React、多网页应用、单网页应用等技术，由于最终都是要在浏览器上渲染展示，所以预设浏览器模拟技术其实都是对渲染后的网页数据进行操作，避免了对网页程序框架本身的分析。
预设浏览器模拟技术提供有网页修改接口，例如Puppeteer技术提供的page.evaluate()接口，利用网页修改接口可以实现对待编辑网页程序的修改，具体是将待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板，其中，待编辑网页程序可以是根据用户端设备发送的设备信息及网页信息，从设备信息对应的设备中获取到的。
在对待编辑网页程序进行代码模板替换的操作之后，对替换后的待编辑网页程序进行图像渲染，能够得到待显示网页图像。图像渲染的过程就是基于替换后的待编辑网页程序，利用传统的图像渲染技术，渲染出该网页程序所表示的待显示网页图像。
在本发明实施例的一种实现方式中，具体执行网页图像渲染的过程可以是：利用预先创建的浏览器实例，运行替换后的待编辑网页程序，并进行图像渲染，得到待显示网页图像，其中，浏览器实例为利用预设浏览器模拟技术创建的。由于利用网页修改接口对待编辑网页程序进行了修改，则待开发网页上的DOM(Document Object Model，文档对象模型)结构被修改，此时，可以利用预先创建的浏览器实例重新进行网页图像渲染，渲染完成后，即可得到待显示网页图像。
在得到待显示网页图像后，控制待显示网页图像预览显示。电子设备可以直接将图像渲染得到的待显示网页图像进行显示预览，也可以通过截图的方式，基于待显示网页图像，截取得到目标预览图像，控制目标预览图像预览显示。具体的，如果电子设备本地有显示界面，则可以直接在本地的显示界面上进行显示预览；如果电子设备本地没有显示界面，则可以将该图像发送给用户端设备，由用户端设备进行显示预览。
在本发明实施例的一种实现方式中，可以利用预设浏览器模拟技术提供的网页截图接口，例如Puppeteer技术提供的page.screenshot()接口，对渲染得到的待显示网页图像进行截图，得到目标预览图像，控制该目标预览图像预览显示。
在本发明实施例的一种实现方式中，本发明实施例应用于如图1所示的开发系统，该开发系统中包括用户端设备、平台服务器和后台的web设备。用户直接与用户端设备进行人机交互，因此，用户的修改需求是从用户端设备输入的。则相应的，S201中获取针对待开发网页的修改位置信息和修改所用的组件数据的步骤，具体可以为：获取用户端设备发送的针对待开发网页的修改位置信息和修改所用的组件数据。
并且，在得到待显示网页图像后，具体的显示预览操作也应该是用户端设备执行的，因此，S205具体可以为：对待显示网页图像进行截图操作，得到目标预览图像；将目标预览图像发送至用户端设备，以使用户端设备对目标预览图像进行预览。
综上述，在有网页修改需求时，本发明实施例的方法无需技术人员对待编辑网页程序进行手动的代码编程，实现了待编码网页程序的自动修改，对于后台web设备存储的原始网页程序并不会进行修改，目标使用人群能够根据网页开发的预览效果，决定是否接受本次修改，如果不接受，由于未对后台web设备存储的原始网页程序进行修改，后续还是可以直接基于原始网页程序进行网页开发，而不需要重新手动编程。
在进行网页开发之前，需要先对待开发网页的初始预览图像进行展示预览，相应的，本发明实施例提供的另一种网页开发预览方法，如图3所示，可以包括如下步骤。
S301，获取待开发网页的网页信息、待开发网页的原始网页程序所在设备的设备信息。
S302，根据设备信息及网页信息，获得待开发网页的待编辑网页程序，其中，待编辑网页程序包括原始网页程序，或者基于原始网页程序修改后的待编辑网页程序。
S303，对待编辑网页程序进行图像渲染，得到初始网页图像。
S304，控制初始网页图像预览显示。
S305，获取针对待开发网页的修改位置信息和修改所用的组件数据。
S306，从预设的组件库中，匹配得到组件数据对应的代码模板。
S307，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板。
S308，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像。
S309，控制待显示网页图像预览显示。
web开发自动化平台的用户，可以输入待开发网页的网页信息(例如网页链接地址、网页上的DOM信息等)、待开发网页的原始网页程序所在设备的设备信息(例如设备的IP地址、域名等)，这里所说的待开发网页可以是主网页，也可以是一个主网页下的某个子网页。用户可以在用户端上输入这些信息，由用户端设备将这些信息发送给电子设备，具体可以以POST请求的方式发送给电子设备；当然，用户也可以在电子设备的人机交互界面上输入这些信息。
电子设备在接收到上述信息后，可以根据设备信息和网页信息，获得待开发网页的待编辑网页程序。在本发明实施例的一种实现方式中，S302具体可以为：根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序，作为待开发网页的待编辑网页程序。也就是说，在获取到设备信息和网页信息后，电子设备根据设备信息知道存储待编辑网页程序的设备，再根据网页信息，即可从该设备中获取到原始网页程序作为待开发网页的待编辑网页程序。
在本发明实施例的另一种实现方式中，S302具体还可以为：根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序；识别原始网页程序中的代码槽点，其中，代码槽点为原始网页程序中预留的可开发代码；将代码槽点替换为预设显示代码，得到基于原始网页程序修改后的待编辑网页程序，其中，预设显示代码在初始网页图像中对应显示为预设形状，修改位置信息与任一预设形状对应，组件数据为选择在预设形状处修改所用的组件数据。由于原始网页程序中包括预留的可开发的代码槽点，则在从设备中获取到原始网页程序后，可以将代码槽点替换为能够显示为预设形状的预设显示代码。
作为web程序的初始开发人员，在待开发网页的原始网页程序源代码HTML(HyperText Markup Language，超文本标记语言)部分特意给以后维护修改工作留下有代码槽点，代码槽点是网页程序中预留的可开发代码段，在适宜后期修改更新的地方，在HTML代码中插入如下面一行代码：
<script class＝”template”type＝”text/html”></script>
由于<script>标签不会被浏览器渲染出来，所以对HTML网页上的DOM结构来说，是看不出一点变化的。
从图4可以看出，在待开发网页“设备编号”和“设备型号”两个配置项之间插入了<script>标签，但是DOM渲染完成后，两行输入配置项之间没有多余显示出来的东西。但是，如图5所示，HTML代码中的确有代码槽点存在。
由于<script>标签不被渲染和不可见特点，电子设备在网络爬虫过程中，需要处理一下代码槽点，否则如果直接截图，则无法向用户暴露出代码槽点的位置，就像图4一样看不出代码槽点在待开发网页中的位置，所以在从设备获取到待开发网页的原始网页程序后，爬取原始网页程序中全部<script class＝”template”type＝”text/html”></script>格式的代码槽点，将代码槽点替换为预设显示代码，得到替换后的网页程序，该网页程序即可作为待开发网页的待编辑网页程序。预设显示代码可以在初始网页图像中对应显示为预设形状(例如矩形、三角形等)，比如采用<div style＝”border:lpx solid blue”></div>这样的代码替换<script>标签代码。
在获得到待编辑网页程序后，对待编辑网页程序进行图像渲染，即可得到初始网页图像，控制初始网页图像预览显示。
如上述，待编辑网页程序可以包括从设备上获取到的原始网页程序或者基于原始网页程序修改后的待编码网页程序。如果是原始网页程序，则直接进行图像渲染，得到的就是原始网页程序所对应的初始网页图像；如果是基于原始网页程序修改后的待编码网页程序，则直接进行图像渲染，得到的就是在代码槽点对应位置显示预设形状的初始网页图像。
针对于待编辑网页程序是基于原始网页程序修改后的待编码网页程序的情况，由于DOM结构发生改变，在进行图像渲染时，能够暴露出了代码槽点的全部位置情况，效果如图6所示。
web开发自动化平台的用户通过类似于创建修改PPT的操作，从网页的组件区(如图7所示)拖曳输入框、下拉框、单选框、复选框等组件到工作区(如图8所示)中的预设形状处，预设形状指代了原始网页程序中代码槽点的位置，用户提交修改确认，电子设备即可获取到用户输入的修改位置信息和组件数据，这里所说的修改位置信息即所选择修改的预设形状所指代的原始网页程序中代码槽点的位置，组件数据即用户从网页的组件区中选择的组件的有关数据。用户在提交修改确认之前，电子设备不会频繁和后台web设备进行交互，只有在用户提交修改确认后，电子设备才会从后台web设备获取原始网页程序，减少了不需要的网络交互。
对待显示网页图像的预览可以在显示初始网页图像的界面中，另开辟一个效果区进行显示，即可以设置初始网页图像为底部的大图，该图像的内容不会更改，而待显示网页图像是在初始网页图像的某一个效果区(小于初始网页图像的显示区域)进行的显示，该效果区设置于初始网页图像的上一图层。具体的，如在图1所示的系统下，用户端设备通过截图在底部显示初始网页图像，并保持底部显示的初始网页图像不变，用户可以针对初始网页图像提出修改需求，用户端设备将用户端的修改需求发送至平台服务器，由平台服务器执行上述网页开发预览方法，然后将截图得到的待显示网页图像发送给用户端设备，用户端设备在显示界面的效果区内显示出该待显示网页图像。显示界面的效果区可以随意拖曳位置，双击可以放大观察细节效果，根据电子设备推送的显示数据刷新待显示网页图像，如图9所示，例如多添加一个“设备型号”配置项，但是和正常“设备型号”配置项对比，新增输入框中没有数据，因为这个是后来插入的HTML模板，没有从设备数据库上真的获取到设备型号数据信息。用户可以始终针对初始网页图像提出修改需求，及时地从显示界面的效果区内看到网页修改的效果，从而进一步调整对初始网页图像的修改策略。
在本发明实施例的一种实现方式中，电子设备按照获取到的待编辑网页程序能够模拟出初始预览图像布局，比如网页各级菜单，web开发自动化平台的用户进行网页选择，例如选择一个菜单网页，或者输入一个网页链接，可以将菜单选择项或者链接选择项等信息作为网页选择项信息给电子设备，电子设备可以利用预设浏览器模拟技术提供的网页选择接口，例如Puppeteer技术提供的page.click(selector[,options])接口模拟普通用户实际选择操作，那么会响应操作跳转到相应的界面，利用浏览器实例，根据跳转后的网页程序进行网页图像渲染，等渲染完成后进行截图，获取到普通用户某种选择操作下显示的界面截图(即初始网页图像)，控制预览截图操作得到的初始预览图像。
在本发明实施例的一种实现方式中，在有网页修改需求后，用户选择的组件可以完全替换掉预设形状，也可以保留预设形状的轮廓，也就是在预设形状内部显示出用户选择的组件。
需要说明的是，在开发系统包括用户端设备、平台服务器和后台的web设备的情况下，在得到初始网页图像后，控制初始网页图像预览显示可以是，对初始网页图像进行截图操作，得到初始预览图像；将初始预览图像发送至用户端设备，以使用户端设备对初始预览图像进行预览。
基于图3所示实施例，本发明实施例还提供了另一种网页开发预览方法，如图10所示，可以包括如下步骤。
S1001，获取待开发网页的网页信息、待开发网页的原始网页程序所在设备的设备信息、浏览器实例地址。
S1002，根据浏览器实例地址，获得浏览器实例当前运行网页的网页信息。
S1003，若浏览器实例当前运行网页的网页信息与待开发网页的网页信息不同，则根据设备信息及待开发网页的网页信息，获得待开发网页的待编辑网页程序。
需要说明的是，在本申请一个实施例中，若浏览器实例当前运行网页的网页信息与待开发网页的网页信息不同，则说明浏览器实例当前运行的网页与待开发网页的网页信息相符，即可以根据当前运行的网页的网页程序直接得到待开发网页的待编辑网页程序，例如，可以将当前运行的网页的网页程序作为待开发网页的待编辑网页程序。
S1004，对待编辑网页程序进行图像渲染，得到初始网页图像。
S1005，控制初始网页图像预览显示。
S1006，获取针对待开发网页的修改位置信息和修改所用的组件数据。
S1007，从预设的组件库中，匹配得到组件数据对应的代码模板。
S1008，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板。
S1009，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像。
S1010，控制待显示网页图像预览显示。
电子设备除了能够获取到待开发网页的网页信息、待开发网页的原始网页程序所在设备的设备信息这些跟修改需求相关的信息以外，还会获取一个浏览器实例地址(获取这些信息的先后顺序可以不做具体限定)，浏览器实例为首次接收到用户端设备发送的网页信息、设备信息时，利用预设浏览器模拟技术创建，浏览器实例地址为创建浏览器实例时生成，可以将该浏览器实例地址发送给用户端设备。
也就是说，电子设备在首次接收到用户端设备发送的针对某一待开发网页的网页信息、设备信息后，通过预设浏览器模拟技术创建浏览器实例，新建网页，在电子设备远程访问并且登录待开发网页的原始网页程序所在设备。
利用预设浏览器模拟技术创建浏览器实例后，可以通过指定接口，例如Puppeteer技术提供的browser.wsEndpoint()接口，获取该实例的DevTools协议信息，也就是该浏览器实例的地址。在一种实现方式中，电子设备直接将浏览器实例地址发送给用户端设备，电子设备本地不对浏览器实例地址进行存储，这样，以后步骤中无需反复创建和销毁浏览器实例，用户端设备仅需在需要进行网页开发时，将待开发网页对应的浏览器实例地址发送至电子设备，则可以通过DevTools协议信息重新连接上已经创建好的浏览器实例，从而减少电子设备的压力和资源消耗，尤其是当同时访问web开发自动化平台的用户数量较大的时候，可以缓解很大压力。
在获取到浏览器实例地址后，根据该浏览器实例地址，可以获得浏览器实例当前运行网页的网页信息，将浏览器实例当前运行网页的网页信息与待开发网页的网页信息进行比较，如果不同，则说明浏览器实例需运行的网页进行了变化，则需要根据设备信息及待开发网页的网页信息，获得待开发网页的待编辑网页程序。如果相同，则说明浏览器实例当前运行的网页与待开发网页的网页信息相符，即可以根据当前运行的网页的网页程序直接得到待开发网页的待编辑网页程序。具体根据设备信息及待开发网页的网页信息，获得待开发网页的待编辑网页程序这一步骤的实现，如图3所示实施例中所述可以包括两种方式。第一种方式是：根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序，作为待开发网页的待编辑网页程序。第二种方式是：根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序；识别原始网页程序中的代码槽点，其中，代码槽点为原始网页程序中预留的可开发代码；将代码槽点替换为预设显示代码，得到替换后的网页程序，作为待开发网页的待编辑网页程序。详细内容见图3所示实施例，这里不再赘述。
基于图3所示实施例，本发明实施例还提供了又一种网页开发预览方法，如图11所示，可以包括如下步骤。
S1101，获取待开发网页的网页信息、待开发网页的原始网页程序所在设备的设备信息、账号认证信息。
S1102，根据设备信息，向该设备信息对应的设备发送账号认证信息。
S1103，在设备对账号认证信息认证成功的情况下，根据设备信息及网页信息，获得待开发网页的待编辑网页程序。
S1104，对待编辑网页程序进行图像渲染，得到初始网页图像。
S1105，控制初始网页图像预览显示。
S1106，获取针对待开发网页的修改位置信息和修改所用的组件数据。
S1107，从预设的组件库中，匹配得到组件数据对应的代码模板。
S1108，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板。
S1109，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像。
S1110，控制待显示网页图像预览显示。
电子设备除了能够获取到待开发网页的网页信息、待开发网页的原始网页程序所在设备的设备信息这些跟修改需求相关的信息以外，还会获取账号认证信息(例如用户名、密码等)，获取这些信息的先后顺序可以不做具体限定。电子设备在接收到上述信息后，可以创建一个浏览器实例，模拟普通用户用账号认证信息访问设备的网页程序，账号登录成功后，用网页信息跳转到需要修改或者定制的网页，获取该网页的网页程序，利用预设浏览器模拟技术提供的网页截图接口，例如Puppeteer技术提供的page.screenshot()接口截图，获取待开发网页的网页图像，再把网页图像返回给用户端设备进行浏览显示。
在获取到账号认证信息后，电子设备可以根据设备信息，将账号认证信息发送到相应的设备进行认证，具体的认证过程就是判断用户名、密码等信息是否匹配，如果匹配则认证成功，设备在认证成功后，会给电子设备回复一个认证成功的消息，电子设备在确定认证成功的情况下，执行根据设备信息及待开发网页的网页信息，获得待开发网页的待编辑网页程序的步骤。
具体根据设备信息及待开发网页的网页信息，获得待开发网页的待编辑网页程序这一步骤的实现，如图3所示实施例中所述可以包括两种方式。第一种方式是：根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序，作为待开发网页的待编辑网页程序。第二种方式是：根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序；识别原始网页程序中的代码槽点，其中，代码槽点为原始网页程序中预留的可开发代码；将代码槽点替换为预设显示代码，得到替换后的网页程序，作为待开发网页的待编辑网页程序。详细内容见图3所示实施例，这里不再赘述。
在本发明实施例的一种实现方式中，电子设备不需存储用于访问待开发网页的原始网页程序的账号认证信息，也不用存储用于重连的浏览器实例地址(DevTools信息)。电子设备相当于一个中间层，起到桥梁的作用，待开发网页的账号认证信息和浏览器实例地址都交给用户端设备当做会话临时存储，比如利用HTML的sessionStorage对象。每当在用户端设备上操作需要同步操作待开发网页的原始网页程序所在设备的时候，就把账号认证信息和浏览器实例地址发送给电子设备，重新连接到浏览器实例发起模拟操作。减少了电子设备反复读写自身数据库的性能消耗，由于每个用户访问自动化平台的时候，都在自己的用户端设备上存储会话临时信息，减少了电子设备的数据块复杂度和体积。
在本发明实施例的再一种网页开发预览方法中，可以将图10所示实施例和图11所示实施例相融合，即获取到待开发网页的网页信息、待开发网页的原始网页程序所在设备的设备信息和账号认证信息，先进行账号认证，如果认证成功，则获得待编辑网页程序，进行图像渲染、截图操作得到初始预览图像进行预览显示，如果获取到浏览器实例地址，判断出浏览器实例当前运行网页的网页信息与待开发网页的网页信息不同，则重新获得待编辑网页程序，进行图像渲染、截图操作得到初始预览图像进行预览显示，后续在有用户修改需求时，再按照图2所示实施例的步骤进行预览。具体的过程可以参照上述实施例，这里不再赘述。
为了便于理解，下面结合具体实例，对本发明实施例所提供的网页开发预览方法进行介绍。
如图12所示，web开发自动化平台的用户，只需要输入设备的IP地址或者域名、用户名、密码、指定某个web程序子网页的信息，自动化平台的前端界面(用户端设备)发送这些信息至平台服务器，平台服务器利用Puppeteer技术创建Chrome实例或者Chromium实例，记录该实例的DevTools协议信息，新建网页，通过IP地址或域名访问网页程序所在设备，判断设备是否在线，如果在线则利用用户名、密码登录设备，并在登录成功后，根据子网页的信息，访问设备某个指定子网页，设备跳转指定子网页，平台服务器爬取指定子网页中所需数据、将指定子网页进行截图，整合爬虫数据、截图URL(Uniform Resource Locator，统一资源定位符)和DevTools协议信息成报文，推送报文至前端界面，前端界面接收报文，处理爬虫数据，存储DevTools协议信息，展示截图，用户即可在前端界面预览截图。
用户在进行菜单栏选择，跳转显示时，基本流程和图12类似，具体如图13所示，用户在前端界面上点击某个菜单项，前端界面整合菜单选择项信息、用户名、密码、DevTools协议信息成报文，并发送请求至平台服务器，平台服务器根据DevTools协议信息重连无头Chrome实例，判断当前Chrome实例的网页是否为指定子网页，如果否则根据用户名、密码，重新访问指定子网页，设备相应操作跳转到指定子网页，然后根据菜单选择项信息，利用Puppeteer技术模拟点击操作，使得设备响应于点击操作，切换到对应的菜单网页程序，等网页渲染完，爬取当前网页上的代码槽点，遍历替换代码槽点为可以显示在DOM上的矩形区域，等DOM上矩形区域重新渲染完成后进行截图，整合数据(包括DevTools协议信息、最新截图、代码槽点位置等)发送给前端界面，由前端界面进行数据分析，展示最新网页截图，用户即可在前端界面预览截图。
用户进行网页开发，预览网页开发效果的流程如图14所示，用户在前端界面上从组件区拖曳组件到工作区，配置组件数据，前端界面等用户确认组件添加完成后，整理组件数据，发送开发请求至平台服务器，平台服务器接收到开发请求后，通过组件库将组件数据转换成对应的HTML模板，利用Puppeteer技术的page.evaluate()接口将HTML模板插入到待开发网页中去，重新渲染展示网页，抓取DOM渲染完成后的截图，整合截图等信息，返回数据至前端界面，前端界面接收从平台服务器返回的最新截图数据，更新效果区预览的网页图像，用户在前端界面查看最新预览的网页图像，确认网页开发情况。
基于上述方法实施例，本发明实施例提供了一种网页开发预览装置，如图15所示，该装置包括：
第一获取模块1510，用于获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序；
匹配模块1520，用于从预设的组件库中，匹配得到组件数据对应的代码模板；
控制替换模块1530，用于控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板；
渲染模块1540，用于对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像；
控制显示模块1550，用于控制待显示网页图像预览显示。
可选的，第一获取模块1510，具体可以用于：获取用户端设备发送的针对待开发网页的修改位置信息和修改所用的组件数据；
控制显示模块1550，具体可以用于：对待显示网页图像进行截图操作，得到目标预览图像；将目标预览图像发送至用户端设备，以使用户端设备对目标预览图像进行预览。
可选的，第一获取模块1510，具体可以用于：获取待开发网页的网页信息、待开发网页的原始网页程序所在设备的设备信息；根据设备信息及网页信息，获得待开发网页的待编辑网页程序，其中，待编辑网页程序包括原始网页程序，或者基于原始网页程序修改后的待编辑网页程序；
渲染模块1540，还可以用于：对待编辑网页程序进行图像渲染，得到初始网页图像；
控制显示模块1550，还可以用于控制初始网页图像预览显示。
可选的，该装置还可以包括：第二获取模块；
第二获取模块，用于获取浏览器实例地址；根据浏览器实例地址，获得浏览器实例当前运行网页的网页信息；
第一获取模块1510，具体可以用于：若浏览器实例当前运行网页的网页信息与待开发网页的网页信息不同，则根据设备信息及待开发网页的网页信息，获得待开发网页的待编辑网页程序。
可选的，该装置还可以包括：第三获取模块和认证模块；
第三获取模块，用于获取账号认证信息；
认证模块，用于根据设备信息，向该设备信息对应的设备发送账号认证信息；
第一获取模块1510，具体可以用于：在设备对账号认证信息认证成功的情况下，根据设备信息及网页信息，获得待开发网页的待编辑网页程序。
可选的，第一获取模块1510，具体可以用于：根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序，作为待开发网页的待编辑网页程序；或者，根据设备信息及网页信息，从设备信息对应的设备中获取待开发网页的原始网页程序；识别原始网页程序中的代码槽点，其中，代码槽点为原始网页程序中预留的可开发代码；将代码槽点替换为预设显示代码，得到基于原始网页程序修改后的待编辑网页程序，其中，预设显示代码在初始网页图像中对应显示为预设形状，修改位置信息与任一预设形状对应，组件数据为选择在预设形状处修改所用的组件数据。
可选的，控制替换模块1530，具体可以用于：利用预设浏览器模拟技术提供的网页修改接口，将待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板；
控制显示模块1550，具体可以用于：利用预先创建的浏览器实例，运行替换后的待编辑网页程序，并进行图像渲染，得到待显示网页图像，其中，浏览器实例为利用预设浏览器模拟技术创建的。
应用本发明实施例，通过获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序，从预设的组件库中，匹配得到组件数据对应的代码模板，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像，控制待显示网页图像预览显示。对待开发网页的待编辑网页程序进行修改(即将待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板)，对修改后的待编辑网页程序进行图像渲染，控制图像渲染得到的待显示网页图像预览显示，无需技术人员对待编辑网页程序进行代码编程，即可实现对网页开发效果的及时预览。
本发明实施例提供了一种电子设备，如图16所示，包括处理器1601和存储器1602，其中，存储器1602存储有能够被处理器1601执行的机器可执行指令，机器可执行指令由处理器1601加载并执行，以实现上述网页开发预览方法。
上述存储器可以包括RAM(Random Access Memory，随机存取存储器)，也可以包括NVM(Non-volatile Memory，非易失性存储器)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。
上述处理器可以是通用处理器，包括CPU、NP(Network Processor，网络处理器)等；还可以是DSP(Digital Signal Processor，数字信号处理器)、ASIC(ApplicationSpecific Integrated Circuit，专用集成电路)、FPGA(Field-Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
存储器1602与处理器1601之间可以通过有线连接或者无线连接的方式进行数据传输，并且电子设备与其他设备(例如用户端设备、web设备等)之间可以通过有线通信接口或者无线通信接口进行通信。图16所示的仅为通过总线进行数据传输的示例，不作为具体连接方式的限定。
应用本发明实施例，通过获取针对待开发网页的修改位置信息和修改所用的组件数据，以及待开发网页的待编辑网页程序，从预设的组件库中，匹配得到组件数据对应的代码模板，控制待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板，对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像，控制待显示网页图像预览显示。对待开发网页的待编辑网页程序进行修改(即将待编辑网页程序中修改位置信息对应位置处的源代码替换为代码模板)，对修改后的待编辑网页程序进行图像渲染，控制图像渲染得到的待显示网页图像预览显示，无需技术人员对待编辑网页程序进行代码编程，即可实现对网页开发效果的及时预览。
在本发明提供的又一实施例中，还提供了一种机器可读存储介质，机器可读存储介质内存储有计算机程序，计算机程序被处理器执行时实现本发明实施例所提供的网页开发预览方法。
在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当该计算机程序产品在平台服务器上运行时，使得平台服务器执行本发明实施例所提供的网页开发预览方法。
对于装置、电子设备、机器可读存储介质及计算机程序产品实施例而言，由于其涉及的方法内容基本相似于前述的方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、机器可读存储介质及计算机程序产品实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。
Claims (10)
1.一种网页开发预览方法，其特征在于，所述方法包括：
获取针对待开发网页的修改位置信息和修改所用的组件数据，以及所述待开发网页的待编辑网页程序；
从预设的组件库中，匹配得到所述组件数据对应的代码模板；
控制所述待编辑网页程序中所述修改位置信息对应位置处的源代码替换为所述代码模板；
对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像；
控制所述待显示网页图像预览显示。
2.根据权利要求1所述的方法，其特征在于，所述获取针对待开发网页的修改位置信息和修改所用的组件数据的步骤，包括：
获取用户端设备发送的针对待开发网页的修改位置信息和修改所用的组件数据；
所述控制所述待显示网页图像预览显示的步骤，包括：
对所述待显示网页图像进行截图操作，得到目标预览图像；
将所述目标预览图像发送至用户端设备，以使所述用户端设备对所述目标预览图像进行预览。
3.根据权利要求1所述的方法，其特征在于，所述获取所述待开发网页的待编辑网页程序的步骤，包括：
获取待开发网页的网页信息、所述待开发网页的原始网页程序所在设备的设备信息；
根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序，其中，所述待编辑网页程序包括所述原始网页程序，或者基于所述原始网页程序修改后的待编辑网页程序；
在所述获取针对待开发网页的修改位置信息和修改所用的组件数据的步骤之前，所述方法还包括：
对所述待编辑网页程序进行图像渲染，得到初始网页图像；
控制所述初始网页图像预览显示。
4.根据权利要求3所述的方法，其特征在于，在所述根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序的步骤之前，所述方法还包括：
获取浏览器实例地址；
根据所述浏览器实例地址，获得浏览器实例当前运行网页的网页信息；
所述根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序的步骤，包括：
若所述浏览器实例当前运行网页的网页信息与所述待开发网页的网页信息不同，则根据所述设备信息及所述待开发网页的网页信息，获得所述待开发网页的待编辑网页程序。
5.根据权利要求3所述的方法，其特征在于，在所述根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序的步骤之前，所述方法还包括：
获取账号认证信息；
根据所述设备信息，向所述设备信息对应的设备发送所述账号认证信息；
所述根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序的步骤，包括：
在所述设备对所述账号认证信息认证成功的情况下，根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序。
6.根据权利要求3-5任一项所述的方法，其特征在于，所述根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序的步骤，包括：
根据所述设备信息及所述网页信息，从所述设备信息对应的设备中获取所述待开发网页的原始网页程序，作为所述待开发网页的待编辑网页程序；
或者，
根据所述设备信息及所述网页信息，从所述设备信息对应的设备中获取所述待开发网页的原始网页程序；识别所述原始网页程序中的代码槽点，其中，所述代码槽点为所述原始网页程序中预留的可开发代码；将所述代码槽点替换为预设显示代码，得到基于所述原始网页程序修改后的待编辑网页程序，其中，所述预设显示代码在所述初始网页图像中对应显示为预设形状，所述修改位置信息与任一所述预设形状对应，所述组件数据为选择在所述预设形状处修改所用的组件数据。
7.根据权利要求1所述的方法，其特征在于，所述控制所述待编辑网页程序中所述修改位置信息对应位置处的源代码替换为所述代码模板的步骤，包括：
利用预设浏览器模拟技术提供的网页修改接口，将所述待编辑网页程序中所述修改位置信息对应位置处的源代码替换为所述代码模板；
所述对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像的步骤，包括：
利用预先创建的浏览器实例，运行替换后的待编辑网页程序，并进行图像渲染，得到待显示网页图像，其中，所述浏览器实例为利用所述预设浏览器模拟技术创建的。
8.一种网页开发预览装置，其特征在于，所述装置包括：
第一获取模块，用于获取针对待开发网页的修改位置信息和修改所用的组件数据，以及所述待开发网页的待编辑网页程序；
匹配模块，用于从预设的组件库中，匹配得到所述组件数据对应的代码模板；
控制替换模块，用于控制所述待编辑网页程序中所述修改位置信息对应位置处的源代码替换为所述代码模板；
渲染模块，用于对替换后的待编辑网页程序进行图像渲染，得到待显示网页图像；
控制显示模块，用于控制所述待显示网页图像预览显示。
9.根据权利要求8所述的装置，其特征在于，所述第一获取模块，具体用于：获取用户端设备发送的针对待开发网页的修改位置信息和修改所用的组件数据；
所述控制显示模块，具体用于：对所述待显示网页图像进行截图操作，得到目标预览图像；将所述目标预览图像发送至用户端设备，以使所述用户端设备对所述目标预览图像进行预览；
所述第一获取模块，具体用于：获取待开发网页的网页信息、所述待开发网页的原始网页程序所在设备的设备信息；根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序，其中，所述待编辑网页程序包括所述原始网页程序，或者基于所述原始网页程序修改后的待编辑网页程序；
所述渲染模块，还用于：对所述待编辑网页程序进行图像渲染，得到初始网页图像；
所述控制显示模块，还用于：控制所述初始网页图像预览显示；
所述装置还包括：第二获取模块；
所述第二获取模块，用于获取浏览器实例地址；根据所述浏览器实例地址，获得浏览器实例当前运行网页的网页信息；
所述第一获取模块，具体用于：若所述浏览器实例当前运行网页的网页信息与所述待开发网页的网页信息不同，则根据所述设备信息及所述待开发网页的网页信息，获得所述待开发网页的待编辑网页程序；
所述装置还包括：第三获取模块及认证模块；
所述第三获取模块，用于获取账号认证信息；
所述认证模块，用于根据所述设备信息，向所述设备信息对应的设备发送所述账号认证信息；
所述第一获取模块，具体用于：在所述设备对所述账号认证信息认证成功的情况下，根据所述设备信息及所述网页信息，获得所述待开发网页的待编辑网页程序；
所述第一获取模块，具体用于：根据所述设备信息及所述网页信息，从所述设备信息对应的设备中获取所述待开发网页的原始网页程序，作为所述待开发网页的待编辑网页程序；或者，根据所述设备信息及所述网页信息，从所述设备信息对应的设备中获取所述待开发网页的原始网页程序；识别所述原始网页程序中的代码槽点，其中，所述代码槽点为所述原始网页程序中预留的可开发代码；将所述代码槽点替换为预设显示代码，得到基于所述原始网页程序修改后的待编辑网页程序，其中，所述预设显示代码在所述初始网页图像中对应显示为预设形状，所述修改位置信息与任一所述预设形状对应，所述组件数据为选择在所述预设形状处修改所用的组件数据；
所述控制替换模块，具体用于：利用预设浏览器模拟技术提供的网页修改接口，将所述待编辑网页程序中所述修改位置信息对应位置处的源代码替换为所述代码模板；
所述渲染模块，具体用于：利用预先创建的浏览器实例，运行替换后的待编辑网页程序，并进行图像渲染，得到待显示网页图像，其中，所述浏览器实例为利用所述预设浏览器模拟技术创建的。
10.一种电子设备，其特征在于，包括处理器和存储器，其中，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述机器可执行指令由所述处理器加载并执行，以实现权利要求1-7任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010974807.0A CN112068824A (zh) | 2020-09-16 | 2020-09-16 | 一种网页开发预览方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010974807.0A CN112068824A (zh) | 2020-09-16 | 2020-09-16 | 一种网页开发预览方法、装置及电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112068824A true CN112068824A (zh) | 2020-12-11 |
Family
ID=73696958
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010974807.0A Pending CN112068824A (zh) | 2020-09-16 | 2020-09-16 | 一种网页开发预览方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112068824A (zh) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113051512A (zh) * | 2021-03-09 | 2021-06-29 | 上海嵩恒网络科技股份有限公司 | 网页调整方法、系统、电子设备和存储介质 |
| CN113065055A (zh) * | 2021-04-21 | 2021-07-02 | 平安国际智慧城市科技股份有限公司 | 新闻资讯抓取方法、装置、电子设备及存储介质 |
| CN113343157A (zh) * | 2021-07-05 | 2021-09-03 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种基于领域专用语言的内容编辑方法和装置 |
| CN113434128A (zh) * | 2021-05-20 | 2021-09-24 | 深圳震有科技股份有限公司 | 基于web端的vue代码编辑方法、编辑器及终端设备 |
| CN113553525A (zh) * | 2021-07-20 | 2021-10-26 | 上海众源网络有限公司 | 一种界面控制请求处理方法及装置 |
| CN113934486A (zh) * | 2021-09-14 | 2022-01-14 | 南方电网深圳数字电网研究院有限公司 | 用户界面组件可实时编辑及渲染的方法及装置 |
| CN114491365A (zh) * | 2022-01-17 | 2022-05-13 | 广州市玄武无线科技股份有限公司 | 一种实时预览配置页面的方法、装置、设备及介质 |
| CN116186457A (zh) * | 2023-04-21 | 2023-05-30 | 京东科技信息技术有限公司 | 网页访问和网页开发的方法、装置、电子设备及介质 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104408155A (zh) * | 2014-12-04 | 2015-03-11 | 北京京东尚科信息技术有限公司 | 生成网页代码的方法和装置以及系统 |
| CN106096049A (zh) * | 2016-06-29 | 2016-11-09 | 江苏中威科技软件系统有限公司 | 一种可视化生成网页模板的方法及系统 |
| CN106156306A (zh) * | 2016-06-30 | 2016-11-23 | 乐视控股（北京）有限公司 | 一种模板渲染方法和装置 |
| CN109740096A (zh) * | 2018-12-28 | 2019-05-10 | 广州华多网络科技有限公司 | 一种实时预览的实现方法、装置、系统及存储介质 |
| CN110442336A (zh) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | 一种网页开发方法及装置、存储介质及电子设备 |
| CN111026638A (zh) * | 2019-10-29 | 2020-04-17 | 贝壳技术有限公司 | 一种网页自动化测试方法、装置、电子设备和存储介质 |
| CN111045645A (zh) * | 2019-11-08 | 2020-04-21 | 贝壳技术有限公司 | 页面编辑方法、装置、电子设备及存储介质 |
| CN111488148A (zh) * | 2020-03-09 | 2020-08-04 | 北京健康之家科技有限公司 | 网页源代码的生成方法及装置 |
-
2020
- 2020-09-16 CN CN202010974807.0A patent/CN112068824A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104408155A (zh) * | 2014-12-04 | 2015-03-11 | 北京京东尚科信息技术有限公司 | 生成网页代码的方法和装置以及系统 |
| CN106096049A (zh) * | 2016-06-29 | 2016-11-09 | 江苏中威科技软件系统有限公司 | 一种可视化生成网页模板的方法及系统 |
| CN106156306A (zh) * | 2016-06-30 | 2016-11-23 | 乐视控股（北京）有限公司 | 一种模板渲染方法和装置 |
| CN109740096A (zh) * | 2018-12-28 | 2019-05-10 | 广州华多网络科技有限公司 | 一种实时预览的实现方法、装置、系统及存储介质 |
| CN110442336A (zh) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | 一种网页开发方法及装置、存储介质及电子设备 |
| CN111026638A (zh) * | 2019-10-29 | 2020-04-17 | 贝壳技术有限公司 | 一种网页自动化测试方法、装置、电子设备和存储介质 |
| CN111045645A (zh) * | 2019-11-08 | 2020-04-21 | 贝壳技术有限公司 | 页面编辑方法、装置、电子设备及存储介质 |
| CN111488148A (zh) * | 2020-03-09 | 2020-08-04 | 北京健康之家科技有限公司 | 网页源代码的生成方法及装置 |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113051512A (zh) * | 2021-03-09 | 2021-06-29 | 上海嵩恒网络科技股份有限公司 | 网页调整方法、系统、电子设备和存储介质 |
| CN113065055A (zh) * | 2021-04-21 | 2021-07-02 | 平安国际智慧城市科技股份有限公司 | 新闻资讯抓取方法、装置、电子设备及存储介质 |
| CN113065055B (zh) * | 2021-04-21 | 2024-04-02 | 深圳赛安特技术服务有限公司 | 新闻资讯抓取方法、装置、电子设备及存储介质 |
| CN113434128A (zh) * | 2021-05-20 | 2021-09-24 | 深圳震有科技股份有限公司 | 基于web端的vue代码编辑方法、编辑器及终端设备 |
| CN113343157A (zh) * | 2021-07-05 | 2021-09-03 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种基于领域专用语言的内容编辑方法和装置 |
| CN113553525A (zh) * | 2021-07-20 | 2021-10-26 | 上海众源网络有限公司 | 一种界面控制请求处理方法及装置 |
| CN113934486A (zh) * | 2021-09-14 | 2022-01-14 | 南方电网深圳数字电网研究院有限公司 | 用户界面组件可实时编辑及渲染的方法及装置 |
| CN114491365A (zh) * | 2022-01-17 | 2022-05-13 | 广州市玄武无线科技股份有限公司 | 一种实时预览配置页面的方法、装置、设备及介质 |
| CN114491365B (zh) * | 2022-01-17 | 2022-12-09 | 广州市玄武无线科技股份有限公司 | 一种实时预览配置页面的方法、装置、设备及介质 |
| CN116186457A (zh) * | 2023-04-21 | 2023-05-30 | 京东科技信息技术有限公司 | 网页访问和网页开发的方法、装置、电子设备及介质 |
| CN116186457B (zh) * | 2023-04-21 | 2024-02-06 | 京东科技信息技术有限公司 | 网页访问和网页开发的方法、装置、电子设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112068824A (zh) | 一种网页开发预览方法、装置及电子设备 | |
| CN111930635B (zh) | 基于swagger快速自动化测试的方法及系统 | |
| US9135228B2 (en) | Presentation of document history in a web browsing application | |
| US9645977B2 (en) | Systems and methods for configuring a header and layout of a mobile version of a conventional website | |
| US9081463B2 (en) | Systems and methods for run-time editing of a web page | |
| US10831453B2 (en) | Connectors framework | |
| CN111061526B (zh) | 自动化测试方法、装置、计算机设备及存储介质 | |
| US7287229B2 (en) | Template-driven process system | |
| CN101697156B (zh) | 一种构造链式网页的方法及系统 | |
| EP1577752A2 (en) | Software development using visual interfaces | |
| CN102855142B (zh) | 一种基于ria的客户端框架结构及其实现方法 | |
| CN101192152A (zh) | 计算机辅助应用程序创建系统、方法和程序产品 | |
| US20090037801A1 (en) | Method and apparatus for automatic user manual generation | |
| US10417317B2 (en) | Web page profiler | |
| CN110795085A (zh) | 移动应用可视化编辑方法及工具 | |
| CN114706579A (zh) | 页面开发方法、装置、服务器及存储介质 | |
| CN104081347A (zh) | 运算次序的图形表示 | |
| US11836510B2 (en) | Snapshot capture of computing device user interfaces | |
| CN113849257A (zh) | 页面处理方法、装置、介质及电子设备 | |
| CN113971251A (zh) | 网页输出方法、系统及计算机可读存储介质 | |
| CN113934959A (zh) | 一种程序预览方法、装置、计算机设备和存储介质 | |
| EP1674991A2 (en) | System and method for creating web services from an existing web site | |
| CN103092575A (zh) | 生成小工具应用的方法和系统 | |
| CN113821202B (zh) | 一种管理软件文件生成方法、装置、设备及可读存储介质 | |
| US20030046319A1 (en) | Editing system and method for developing visual Web programs and recording medium stored with visual Web program editing software |
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 |