CN112905944A

CN112905944A - 页面在线动态生成方法、装置、电子设备和可读存储介质

Info

Publication number: CN112905944A
Application number: CN202110368360.7A
Authority: CN
Inventors: 周俊涛; 梁钧
Original assignee: Chengdu New Hope Finance Information Co Ltd
Current assignee: Chengdu New Hope Finance Information Co Ltd
Priority date: 2021-04-06
Filing date: 2021-04-06
Publication date: 2021-06-04
Anticipated expiration: 2041-04-06
Also published as: CN112905944B

Abstract

本申请实施例提供一种页面在线动态生成方法、装置、电子设备和可读存储介质，通过获取用于页面渲染的动态数据以及服务器预先编辑的页面模板，其中，该页面模板包括存在多个节点的节点树。再利用与自身的端类型对应的解析工具对各节点进行解析，最后根据解析结果以及动态数据生成相应的页面。本方案中，通过在服务器进行页面模板编辑，客户端只需采用与自身端类型对应的解析工具进行解析处理，并结合动态数据实现页面生成。如此，可以实现页面的即时在线编辑，且降低前端处理的复杂度。

Description

页面在线动态生成方法、装置、电子设备和可读存储介质

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种页面在线动态生成方法、装置、电子设备和可读存储介质。

背景技术

目前，市面上端的形式多种多样，如Web端、React native、微信小程序等各种端形式。当业务要求同时在不同的端形式上都能有所表现时，针对不同的端去编写多套代码的方式成本很高。因此，如何只编写一套代码就能够适配到不同的端形式上显得极为重要。

现有技术中，常用的方式是如采用vue或react等现有成熟框架开发前端应用，开发者编写一套代码，构建时选择不同的应用类型，以发布至不同的端形式。另外也有采用如鲁班H5、夸克H5等平台，进行本地编写组件，并线上编辑组件顺序，从而实现通用业务场景下的页面搭建。

但是，现有技术中采用的方式存在不支持在线编辑或在线编辑实时性差的问题，且对于前端开发者的技术要求较高。

发明内容

本申请的目的包括，例如，提供了一种页面在线动态生成方法、装置、电子设备和可读存储介质，其能够实现页面的即时在线编辑，且降低前端处理复杂度。

本申请的实施例可以这样实现：

第一方面，本申请提供一种页面在线动态生成方法，应用于与服务器通信的客户端，所述方法包括：

获取用于页面渲染的动态数据以及所述服务器预先编辑的页面模板，所述页面模板包括存在多个节点的节点树；

利用与自身的端类型对应的解析工具对各所述节点进行解析；

根据解析结果以及所述动态数据生成相应的页面。

在可选的实施方式中，所述利用与自身的端类型对应的解析工具对各所述节点进行解析的步骤，包括：

获得各所述节点的节点信息、节点之间的关系信息，以及各所述节点的节点类型；

针对各所述节点，获得与所述节点的节点类型以及自身的端类型对应的解析工具；

根据所述解析工具、关系信息和节点信息，得到解析结果。

在可选的实施方式中，所述根据所述解析工具、关系信息和节点信息，得到解析结果的步骤，包括：

获取所述服务器编辑所述页面模板时采用的语法工具；

采用所述语法工具并根据所述解析工具、关系信息和节点信息，得到解析结果。

在可选的实施方式中，所述根据解析结果以及所述动态数据生成相应的页面的步骤，包括：

在获得表征对页面包含的子区域进行渲染的渲染指令时，获得所述解析结果和所述动态数据中分别与所述子区域对应的目标解析结果和目标动态数据；

根据所述目标解析结果和所述目标动态数据进行所述子区域的页面渲染显示。

在可选的实施方式中，所述节点具有节点属性信息，所述节点属性信息包括动态占位符；

所述根据解析结果以及所述动态数据生成相应的页面的步骤，包括：

根据所述解析结果中包含的节点的节点属性信息，获得其中节点属性信息包括动态占位符的节点；

将所述动态数据加载至对应的节点的动态占位符，并根据所述解析结果生成相应的页面。

在可选的实施方式中，所述将动态数据加载至对应的节点的动态占位符，并根据解析结果生成相应的页面的步骤，包括：

若获得表征对页面进行多次渲染的指令，则在进行本轮渲染操作时，获得所述动态数据中相对于上一轮渲染操作存在变动的动态数据；

将存在变动的动态数据加载至对应的节点的动态占位符，并根据解析结果对已生成的页面中与存在变动的动态数据对应的节点进行重新渲染处理。

在可选的实施方式中，所述节点具有节点属性信息，所述节点属性信息包括页面埋点，所述方法还包括：

对各所述节点进行监听，在监测到任一节点的页面埋点被触发时，得到对应的埋点数据；

对外提供开发的接口，通过所述接口将所述埋点数据进行上报。

第二方面，本申请提供一种页面在线动态生成装置，应用于与服务器通信的客户端，所述装置包括：

获取模块，用于获取用于页面渲染的动态数据以及所述服务器预先编辑的页面模板，所述页面模板包括存在多个节点的节点树；

解析模块，用于利用与自身的端类型对应的解析工具对各所述节点进行解析；

生成模块，用于根据解析结果以及所述动态数据生成相应的页面。

第三方面，本申请提供一种电子设备，包括一个或多个存储介质和一个或多个与存储介质通信的处理器，一个或多个存储介质存储有处理器可执行的机器可执行指令，当电子设备运行时，处理器执行所述机器可执行指令，以执行前述实施方式中任意一项所述的方法步骤。

第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质存储有机器可执行指令，所述机器可执行指令被执行时实现前述实施方式中任意一项所述的方法步骤。

本申请实施例的有益效果包括，例如：

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的页面在线生成方法的应用场景示意图；

图2为本申请实施例提供的页面在线生成方法的流程图；

图3为本申请实施例提供的节点树的结构示意图；

图4为图2中步骤S120的子步骤的流程图；

图5为图2中步骤S130的子步骤的流程图；

图6为图2中步骤S130的子步骤的另一流程图；

图7为图6中步骤S134的子步骤的流程图；

图8为本申请实施例提供的页面在线动态生成方法的另一流程图；

图9为本申请实施例提供的页面在线动态生成方法的交互示意图；

图10为本申请实施例提供的页面在线动态生成装置的功能模块框图；

图11为本申请实施例提供的电子设备的结构示意图。

图标：100-客户端；110-页面在线动态生成装置；111-获取模块；112-解析模块；113-生成模块；120-处理器；130-存储器；140-总线；200-服务器；300-数据库；400-网络。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

在本申请的描述中，需要说明的是，在不冲突的情况下，本申请的实施例中的特征可以相互结合。

请参阅图1，为本申请实施例提供的页面在线动态生成方法的应用场景示意图，该场景中包括服务器200、网络400、客户端100和数据库300中的一种或多种。

在一些实施例中，服务器200可以包括处理器。处理器可以处理与服务请求有关的信息和/或数据，以执行本申请中描述的一个或多个功能。例如，处理器可以实现数据的配置及与客户端100之间的进行数据的交互。在一些实施例中，处理器可以包括一个或多个处理核(例如，单核处理器(S)或多核处理器(M))。仅作为举例，处理器可以包括中央处理单元(Central Processing Unit,CPU)、专用集成电路(Application Specific IntegratedCircuit,ASIC)、专用指令集处理器(Application Specific Instruction-setProcessor,ASIP)、图形处理单元(Graphics Processing Unit,GPU)、物理处理单元(Physics Processing Unit,PPU)、数字信号处理器(Digital Signal Processor,DSP)、现场可编程门阵列(Field Programmable Gate Array,FPGA)、可编程逻辑器件(Programmable Logic Device,PLD)、控制器、微控制器单元、简化指令集计算机(ReducedInstruction Set Computing,RISC)、或微处理器等，或其任意组合。

在一些实施例中，客户端100对应的设备类型可以是移动设备，比如智能手机、数字助手等，也可以是平板计算机、个人计算机等。

在一些实施例中，数据库300可以连接到网络400以与应用场景中的一个或多个组件(例如，服务器200、客户端100)通信。场景中的一个或多个组件可以经由网络400访问存储在数据库300中的数据或指令。在一些实施例中，数据库300可以直接连接到场景中的一个或多个组件，或者，数据库300也可以是服务器200的一部分。

下面结合上述图1示出的应用场景中描述的内容，对本申请实施例提供的页面在线动态生成方法进行详细说明。

参照图2所示，为本申请实施例提供的一种页面在线动态生成方法的流程示意图，该方法可以由上述的客户端100来执行。应当理解，在其它实施例中，本实施例所述的页面在线动态生成方法其中部分步骤的顺序可以根据实际需要相互交换，或者其中的部分步骤也可以省略或删除。该页面在线动态生成方法的详细步骤介绍如下。

步骤S110，获取用于页面渲染的动态数据以及所述服务器200预先编辑的页面模板，所述页面模板包括存在多个节点的节点树。

步骤S120，利用与自身的端类型对应的解析工具对各所述节点进行解析。

步骤S130，根据解析结果以及所述动态数据生成相应的页面。

本实施例中，所述服务器200可以为一在线编辑平台，该在线编辑平台可负责类HTML(Hyper Text Markup Language，超文本标记语言)DSL(Domain-specific language，专注特定领域的有限表达法)的编辑，以通过在线编辑平台编辑生成页面模板。在线编辑平台可以以纯HTML的标签进行编写，并书写CSS(Cascading Style Sheets，层叠样式表)，对于其中的例如动态占位数据和事件埋点等，可以通过自定义标签属性添加。

在线编辑平台在完成页面信息的编辑后，可以对页面信息进行在线转换，以生成页面模板。可选地，在线编辑平台可将DSL通过HTML语法解析器转换为包含多个节点构成的节点树，以作为页面模板，该页面模板可为JSON格式。请参阅图3，为转换得到的节点树的结构示意图，树形结构中的每个节点表示一个页面元素或文本节点，一个页面元素可以包含多个页面元素节点或文本节点。页面元素通常称为标签，页面元素的类型可有HTML规范定义。

转换后得到的页面模板可保存至数据库300中，在保存至数据库300时，可以为各个页面模板设置对应的索引信息，数据库300可对外提供接口，后续客户端100即可通过数据库300提供的接口，获取服务器200预先编辑的页面模板。

本实施例中，客户端100可以为不同的端类型，其中，端类型的划分可以是划分为如ios、Android、Web(响应型)，也可以划分为如安装有不同的小程序的端类型。不同的端类型对于页面信息的处理方式存在差异，因此，各种端类型的客户端100可通过自定义渲染逻辑的方式以构建解析工具，该解析工具可为软件开发工具包SDK。

服务器200所编辑生成的页面模板中，包含有页面渲染所需的节点信息，且包含一些所需的静态数据。而页面构成中，往往包含一些动态信息，这些动态信息可由客户端100从外部数据源获取。

本实施例中，客户端100利用与自身端类型对应的解析工具对页面模板中的节点进行解析，并结合解析结果和获取的动态数据以生成相应的页面。

本实施例所提供的页面在线动态生成方法，通过在服务器200中进行页面模板在线编辑和转换，并保存至数据库300中。客户端100只需从数据库300拉取页面模板，采用自身端类型对应的解析工具进行解析处理，并结合获取的动态数据实现页面生成。可以实现页面的即时在线编辑。

并且，现有技术中的技术方案的实现，需要了解前端基础HTML、CSS、JS基础上，了解前端框架的使用，且需要了解打包构建相关流程，对于技术的要求高。本实施例所提供的技术方案，可以大大降低前端处理的复杂度，降低对技术的要求。

在本实施例中，各个客户端100具有适配的解析工具，客户端100在利用解析工具对节点树进行解析时，可以通过以下方式实现，请结合参阅图4：

步骤S121，获得各所述节点的节点信息、节点之间的关系信息，以及各所述节点的节点类型。

步骤S122，针对各所述节点，获得与所述节点的节点类型以及自身的端类型对应的解析工具。

步骤S123，根据所述解析工具、关系信息和节点信息，得到解析结果。

客户端100可对节点树进行层层遍历，识别出节点之间的关系信息，例如，父子节点、兄弟节点等。且针对各个节点，可以获得与节点的节点类型以及自身的端类型对应的解析工具。其中，由上述可知，各个客户端100具有适配的解析工具，而其中，针对不同的节点类型，可采用对应的控件对应，也即，解析工具可将节点渲染成客户端100支持的控件。例如，对于图片类型数据而言，在小程序端，则对应的控件类型为Image类型。

客户端100基于确定的解析工具以及识别出的节点之间的关系信息、节点信息，按照解析工具中的渲染逻辑进行解析处理，得到解析结果。

本实施例中，在进行解析处理时，还应当考虑服务器200在进行页面模板编辑时采用的语法工具。客户端100对节点进行解析时，对于节点的属性的表达式，例如v-if形式，可获取服务器200编辑页面模板时采用的语法工具，采用对应的语法工具并根据解析工具、关系信息和节点信息等，得到解析结果。

本实施例中，各个客户端100具有适配的解析工具，并且，可以在客户端100应用的局部引用实现页面渲染。请参阅图5，在上述生成相应的页面的步骤中，可以通过以下方式实现：

步骤S131，在获得表征对页面包含的子区域进行渲染的渲染指令时，获得所述解析结果和所述动态数据中分别与所述子区域对应的目标解析结果和目标动态数据。

步骤S132，根据所述目标解析结果和所述目标动态数据进行所述子区域的页面渲染显示。

本实施例中，客户端100对获取的页面模板进行解析时，往往是对页面模板进行整体解析。在一些应用场景下，进行页面渲染时，可能仅需要对部分页面进行替换。而现有技术中所采用的方式，虽然可以支持多种端类型，但是往往是覆盖全应用，针对历史遗留项目，在不能重写的情况下，难以实现部分页面的替换。

针对现有技术中存在的问题，在本实施例中，配置的SDK可以在应用的局部使用，在需要对页面包含的某个子区域进行渲染时，可发出相应的渲染指令，客户端100在该渲染指令触发下，可以获得对页面模板进行解析得到的解析结果中与子区域对应的目标解析结果，也即，解析结果中的部分。并且，可以从获取的动态数据中获得与子区域对应的目标动态数据。

客户端100结合目标解析结果和目标动态数据进行页面中子区域的渲染显示处理。本实施例中，通过该方式可以实现对于历史遗留项目，在不能整体重写的情况下的部分页面替换的目的。

本实施例中，各个节点具有节点属性信息，而其中，某些节点的节点属性信息包括动态占位符。编辑页面模板时，通过预留动态占位符的方式，可实现动态数据的加载。因此，请参阅图6，在上述生成页面的步骤中，可以通过以下方式实现：

步骤S133，根据所述解析结果中包含的节点的节点属性信息，获得其中节点属性信息包括动态占位符的节点。

步骤S134，将所述动态数据加载至对应的节点的动态占位符，并根据所述解析结果生成相应的页面。

本实施例中，对于需要加载动态数据的节点，可采用自定义标签属性的方式进行节点属性信息的添加，例如，在节点属性信息中添加动态占地符。如此，客户端100可在获取动态数据后，将动态数据加载至对应的节点的动态占位符，从而组合得到页面元素对象，进而最终生成页面。

此外，在可能的应用场景中，页面渲染可能较为频繁，而每次渲染仅更改了其中的某些动态数据，其他的页面信息均未改动。但是，现有技术中，此种情形下，也会进行整个页面的刷新，导致页面出现闪动效果，影响用户体验。

因此，在本实施例中，在上述情形下，请参阅图7，上述步骤S134可以通过以下方式实现：

步骤S1341，若获得表征对页面进行多次渲染的指令，则在进行本轮渲染操作时，获得所述动态数据中相对于上一轮渲染操作存在变动的动态数据。

步骤S1342，将存在变动的动态数据加载至对应的节点的动态占位符，并根据解析结果对已生成的页面中与存在变动的动态数据对应的节点进行重新渲染处理。

本实施例中，若对页面的生成处理是连续的多次渲染，而每次两次渲染之间可能仅存在某些动态数据有变动，则可以仅识别出相对于上一轮渲染操作存在变动的动态数据，进而基于存在变动的动态数据加载至预留的动态占位符，实现页面的新一轮的渲染显示。如此，不需要对整个页面进行重新渲染，避免频繁渲染造成的页面的闪动现象。

本实施例中，客户端100的解析工具SDK中还配置有对节点的事件监听逻辑。浏览器页面应用过程中，可以通过页面埋点的方式对用户行为数据进行采集、分析。因此，在配置页面模板时，节点的节点属性信息中可包括页面埋点，可通过自定义标签属性的方式添加至节点。

请参阅图8，本实施例提供的页面在线动态生成方法还可包括以下步骤：

步骤S210，对各所述节点进行监听，在监测到任一节点的页面埋点被触发时，得到对应的埋点数据。

步骤S220，对外提供开发的接口，通过所述接口将所述埋点数据进行上报。

本实施例中，通过在节点添加页面埋点，后续可对节点进行事件监听。页面埋点的方式包括如手动埋点、可视化埋点、无埋点等。基于配置的页面模板中节点的页面埋点，客户端100可通过对节点进行监听，从而在用户触发页面埋点时，获得对应的埋点数据。为了将运营方可基于用户数据进行分析，以指定运营策略。可通过开发的统一的接口，将获取的埋点数据进行上报，从而上报至如应用的后台服务器200，以供运营人员分析处理。

请结合参阅图9，本实施例所提供的页面在线动态生成方法，可通过在线编辑平台进行页面信息的在线编辑、并进行转换为JSON格式的页面模板。在数据库300中实现页面模板的存储，并添加唯一索引信息。客户端100可从数据库300提供的接口获取页面模板，且客户端100可从外部数据源获取动态数据。客户端100将JSON格式的页面模板利用适配的解析工具SDK进行解析、转换处理，并结合动态数据实现页面的渲染显示。

该生成方法通过在服务器200进行页面模板在线统一编辑，以低代码、易接入、上手成本低等特点，减少需求成本且大大提高需求上限速度，适应于不同的端类型。并且，在客户端100利用SDK实现兼容性抹平，且支持数据缓存、事件分发等功能。

基于同一申请构思，本申请实施例中还提供了与页面在线动态生成方法对应的页面在线动态生成装置110，由于本申请实施例中的装置解决问题的原理与本申请实施例上述页面在线动态生成方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图10所示，为本申请实施例提供的一种页面在线动态生成装置110的示意图，所述装置包括：获取模块111、解析模块112和生成模块113。

获取模块111，用于获取用于页面渲染的动态数据以及所述服务器200预先编辑的页面模板，所述页面模板包括存在多个节点的节点树；

可以理解，该获取模块111可以用于执行上述步骤S110，关于该获取模块111的详细实现方式可以参照上述对步骤S110有关的内容。

解析模块112，用于利用与自身的端类型对应的解析工具对各所述节点进行解析；

可以理解，该解析模块112可以用于执行上述步骤S120，关于该解析模块112的详细实现方式可以参照上述对步骤S120有关的内容。

生成模块113，用于根据解析结果以及所述动态数据生成相应的页面；

可以理解，该生成模块113可以用于执行上述步骤S130，关于该生成模块113的详细实现方式可以参照上述对步骤S130有关的内容。

一种可能的实施方式中，上述解析模块112具体可以用于：

根据所述解析工具、关系信息和节点信息，得到解析结果。

一种可能的实施方式中，上述解析模块112具体可以用于：

获取所述服务器200编辑所述页面模板时采用的语法工具；

一种可能的实施方式中，上述生成模块113具体可以用于：

一种可能的实施方式中，所述节点具有节点属性信息，所述节点属性信息包括动态占位符，上述生成模块113具体可以用于：

一种可能的实施方式中，上述生成模块113具体可以用于：

一种可能的实施方式中，所述节点具有节点属性信息，所述节点属性信息包括页面埋点，所述页面在线动态生成装置110还可以包括监听模块，该监听模块具体可以用于：

本申请实施例还提供了一种电子设备，该电子设备可为上述的客户端100。如图11所示，为本申请实施例提供的电子设备结构示意图，包括：处理器120、存储器130、和总线140。所述存储器130存储有所述处理器120可执行的机器可读指令(比如，图10的装置中的获取模块111、解析模块112和生成模块113对应的执行指令等)，当电子设备运行时，所述处理器120与所述存储器130之间通过总线140通信，所述机器可读指令被所述处理器120执行时执行如下处理：

一种可能的实施方式中，处理器120执行的指令中，包括如下过程：

获取用于页面渲染的动态数据以及所述服务器200预先编辑的页面模板，所述页面模板包括存在多个节点的节点树；

根据解析结果以及所述动态数据生成相应的页面。

关于电子设备运行时，处理器120执行的指令中所涉及的过程，可以参照上述方法实施例中的相关说明，这里不再详述。

本申请实施例还提供了一种可读存储介质，该可读存储介质上存储有计算机程序，该计算机程序被处理器120运行时执行上述页面在线动态生成方法的步骤。

具体地，该存储介质能够为通用的存储介质，如移动磁盘、硬盘等，该存储介质上的计算机程序被运行时，能够执行上述页面在线动态生成方法，具体地，可以参照上述方法实施例中的相关说明，这里不再详述。

综上所述，本申请实施例提供了一种页面在线动态生成方法、装置、电子设备和可读存储介质，通过获取用于页面渲染的动态数据以及服务器200预先编辑的页面模板，其中，该页面模板包括存在多个节点的节点树。再利用与自身的端类型对应的解析工具对各节点进行解析，最后根据解析结果以及动态数据生成相应的页面。本方案中，通过在服务器200进行页面模板编辑，客户端100只需采用与自身端类型对应的解析工具进行解析处理，并结合动态数据实现页面生成。如此，可以实现页面的即时在线编辑，且降低前端处理的复杂度。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims

1.一种页面在线动态生成方法，其特征在于，应用于与服务器通信的客户端，所述方法包括：

根据解析结果以及所述动态数据生成相应的页面。

2.根据权利要求1所述的页面在线动态生成方法，其特征在于，所述利用与自身的端类型对应的解析工具对各所述节点进行解析的步骤，包括：

根据所述解析工具、关系信息和节点信息，得到解析结果。

3.根据权利要求2所述的页面在线动态生成方法，其特征在于，所述根据所述解析工具、关系信息和节点信息，得到解析结果的步骤，包括：

获取所述服务器编辑所述页面模板时采用的语法工具；

4.根据权利要求1所述的页面在线动态生成方法，其特征在于，所述根据解析结果以及所述动态数据生成相应的页面的步骤，包括：

5.根据权利要求1所述的页面在线动态生成方法，其特征在于，所述节点具有节点属性信息，所述节点属性信息包括动态占位符；

6.根据权利要求5所述的页面在线动态生成方法，其特征在于，所述将所述动态数据加载至对应的节点的动态占位符，并根据解析结果生成相应的页面的步骤，包括：

7.根据权利要求1所述的页面在线动态生成方法，其特征在于，所述节点具有节点属性信息，所述节点属性信息包括页面埋点，所述方法还包括：

8.一种页面在线动态生成装置，其特征在于，应用于与服务器通信的客户端，所述装置包括：

9.一种电子设备，其特征在于，包括一个或多个存储介质和一个或多个与存储介质通信的处理器，一个或多个存储介质存储有处理器可执行的机器可执行指令，当电子设备运行时，处理器执行所述机器可执行指令，以执行权利要求1-7中任意一项所述的方法步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有机器可执行指令，所述机器可执行指令被执行时实现权利要求1-7中任意一项所述的方法步骤。