CN108052548A - 一种网页创建的方法、系统及终端设备 - Google Patents

Abstract

本发明适用于移动应用开发技术领域，提供了一种网页创建的方法、系统及终端设备，所述方法包括：调用预存的网络视图控件，生成原生视图，将原生视图和预设初始信息封装生成原生视图插件，提取原生视图插件对应的显示方法，将原生视图插件和显示方法封装成脚本对象，获取预存的超文本自定义标签，将超文本自定义标签和脚本对象进行绑定，生成超文本网页文件。本发明通过将原生视图插件和显示方法封装成脚本对象，将脚本对象与自定义标签进行绑定，生成超文本网页文件，从而有效解决了人工重复编写核心代码，增加了开发成本，降低了开发的效率的问题。

Description

一种网页创建的方法、系统及终端设备

技术领域

本发明属于移动应用开发技术领域，尤其涉及一种网页创建的方法、系统及终端设备。

背景技术

随着社会的发展和进步，移动终端(例如，手机)的普及率越来越高，移动应用的开发呈逐步上升趋势。

现有技术中，采用对网页进行开发，生成网页文件，由于开发语言存在多种，且彼此之间存在差异，当不同操作系统加载网页文件时，呈现效果不一致，需要人工重复编写核心代码，增加了开发成本，降低了开发的效率。

发明内容

有鉴于此，本发明实施例提供了一种网页创建的方法、系统及终端设备，以解决现有技术中人工重复编写核心代码，增加了开发成本，降低了开发的效率的问题。

本发明实施例的第一方面提供了一种网页创建的方法，包括：

调用预存的网络视图控件，生成原生视图。

将所述原生视图和预设初始信息封装生成原生视图插件。

提取所述原生视图插件对应的显示方法。

将所述原生视图插件和所述显示方法封装成脚本对象。

获取预存的超文本自定义标签。

将所述超文本自定义标签和所述脚本对象进行绑定，生成超文本网页文件。

本发明实施例的第二方面提供了一种网页创建的系统，包括：

原生视图生成模块，用于调用预存的网络视图控件，生成原生视图。

插件生成模块，用于将所述原生视图和预设初始信息封装生成原生视图插件。

显示方法获取模块，用于提取所述原生视图插件对应的显示方法。

脚本对象获取模块，用于将所述原生视图插件和所述显示方法封装成脚本对象。

自定义标签获取模块，用于获取预存的超文本自定义标签。

网页文件获取模块，用于将所述超文本自定义标签和所述脚本对象进行绑定，生成超文本网页文件。

本发明实施例的第三方面提供了一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上所述方法的步骤。

本发明实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上所述方法的步骤。

本发明实施例与现有技术相比存在的有益效果是：本实施例通过调用预存的网络视图控件，生成原生视图，将原生视图和预设初始信息封装生成原生视图插件，提取原生视图插件对应的显示方法，将原生视图插件和显示方法封装成脚本对象，获取预存的超文本自定义标签，将超文本自定义标签和脚本对象进行绑定，生成超文本网页文件。本发明实施例通过调用网络视图控件生成原生视图，将原生视图和预设初始信息封装成原生视图插件，将原生视图插件和显示方法封装成脚本对象，将脚本对象与自定义标签进行绑定，生成超文本网页文件，从而有效解决了人工重复编写核心代码，增加了开发成本，降低了开发的效率的问题，用户体验高。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一个实施例提供的网页创建的方法的实现流程图；

图2是本发明一个实施例提供的网页创建的方法的实现流程图；

图3是本发明一个实施例提供的网页创建的系统的结构示意图；

图4是本发明一个实施例提供的网页创建的系统的结构示意图；

图5是本发明一个实施例提供的终端设备的示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本发明实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。

为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

实施例1：

图1示出了本发明的一个实施例提供的网页创建的方法的实现流程，其过程详述如下：

在步骤S101中，调用预存的网络视图控件，生成原生视图。

获取用户输入的创建网页的指令，根据创建网页的指令，调用预存的网络视图控件，生成原生视图。

在本实施例中，网络视图控件为WebView控件，WebView控件可以将超文本网页文件嵌入到移动应用中。

在一个实施例中，原生视图包括原生父视图和原生子视图。

在本实施例中，原生子视图显示在原生父视图上，例如，原生父视图为移动应用的一个网页页面，原生子视图定义了一个文本框，在父视图上显示文本框。

在步骤S102中，将原生视图和预设初始信息封装生成原生视图插件。

在一个实施例中，当在IOS操作系统中执行网页创建的方法时，基于预设脚本结构框架，将原生视图和初始信息封装成原生视图插件。

在一个实施例中，当在Android操作系统中执行所述网页创建的方法时，基于预设原生方法，将原生视图和所述初始信息封装成原生视图插件。

在本实施例中，预设脚本结构框架为JavaScriptCore.framework，预设初始信息为初始方法信息，当加载原生视图插件时，调用原生视图插件的初始方法信息，并根据自身业务需求加载预存的初始化数据。

在本实施例中，当在Android操作系统中执行所述网页创建的方法时，基于预设原生方法信息，将原生视图和预设初始信息封装成原生视图插件。

在本实施例中，预设原生方法信息为Webview控件中的prompt方法信息，预设初始信息为初始方法信息，当加载原生视图插件时，调用原生视图插件的初始方法信息，并根据自身业务需求加载预存的初始化数据。

在本实施例中，通过引入脚本结构框架，实现了JavaScript对象方法与IOS原生对象方法的相互调用。

在本实施例中，在Android操作系统中，通过调用原生方法，实现了JavaScript对象方法与Android原生对象方法的相互调用。

在步骤S103中，提取原生视图插件对应的显示方法。

在本实施例中，显示方法包括创建页面方法和显示网页方法。

在步骤S104中，将原生视图插件和显示方法封装成脚本对象。

在本实施例中，将原生视图插件和显示方法封装成脚本对象，脚本对象能够在超文本网页中使用。

在步骤S105中，获取预存的超文本自定义标签。

在本实施例中，超文本自定义标签是基于超文本网页标记语言和Vue.js框架生成的，例如，超文本自定义标签为实现弹窗功能的超文本网页程序，当加载超文本自定义标签时，可以在页面上显示一个弹窗。

在步骤S106中，将超文本自定义标签和脚本对象进行绑定，生成超文本网页文件。

在一个实施例中，将预存的Window视图容器设置为原生父视图容器，原生父视图显示在原生父视图容器中，将预存的FloatWindow视图容器设置为原生子视图容器，原生子视图显示在原生子视图容器中，并且，Window视图容器和FloatWindow视图容器为文本页面渲染容器，可以显示超文本网页，原生子视图容器在原生父视图容器中。

在本实施例中，将原生父视图容器设置为全屏，原生子视图容器的坐标和宽高可以获取用户输入的参数进行设置。

在本实施例中，获取预存的前端组件，将脚本对象封装至前端组件中，通过调用预存的componet方法将前端组件与超文本自定义标签进行绑定，生成超文本网页文件。

在本实施例中，前端组件包括参数获取属性，通过调用参数获取属性获取用户输入的参数，并将参数传给创建页面方法，创建页面方法根据参数设置原生子视图容器的位置和宽高，其中，参数为x，y，w和h。

在本实施例中，x和y为原生子视图容器的坐标，例如，通过设置x和y将原生子视图容器设置在原生父视图容器的下方位置，w和h分别为原生子视图容器的宽度和高度。

在一个实施例中，在步骤S106之后，当接收到渲染页面指令时，解析超文本网页文件，得到超文本自定义标签和脚本对象，将超文本自定义标签显示在预设页面中，解析脚本对象，得到原生视图插件和显示方法，通过显示方法将原生视图插件显示在预设页面中。

在本实施例中，预设页面为原生父视图容器。

在本实施例中，当接收到渲染页面指令时，调用超文本网页文件，解析超文本网页文件，得到前端组件和超文本自定义标签，提取前端组件中的脚本对象，解析脚本对象，得到原生视图插件和显示方法，通过显示方法中的显示网页方法将原生视图插件显示在原生父视图容器中，从而实现了原生视图与超文本自定义标签的混合渲染。

在本实施例中，生成的超文本网页文件可以嵌入到移动应用，移动应用可以为安装在IOS操作系统的移动应用，也可以为安装在Android操作系统的移动应用。

在本实施例中，通过加载超文本网页文件，实现了原生视图与超文本自定义标签的混合渲染，提高了渲染效率，解决了页面加载慢、滑动和切换卡顿的问题，用户体验高。

在本实施例中，创建的超文本网页文件既包含超文本自定义标签，又包含原生视图插件，当应用于不同操作系统时，无需修改超文本自定义标签，避免了需要人工重复编写核心代码的情况的发生，降低了开发成本，提高了开发的效率，用户体验高。

如图2所示，在本发明的一个实施例中，图2所对应的实施例中的网页创建的方法还包括：

在步骤S201中，创建父视图类和子视图类，其中，父视图类和子视图类包括自定义的属性信息。

在本实施例中，当在IOS操作系统中执行网页创建的方法时，采用IOS开发语言创建父视图类和子视图类，父视图类包括和子视图类包括自定义的属性信息，其中IOS开发语言包括Objective-C语言和Swift语言。

在本实施例中，当在Android操作系统中执行网页创建的方法时，采用Android开发语言创建父视图类和子视图类，父视图类包括和子视图类包括自定义的属性信息，其中Android开发语言包括Java语言。

以一个具体应用场景为例，父视图类中的自定义属性信息包括定义标题名称和背景颜色，子视图类中的自定义属性信息包括创建一个按钮，并定义按钮的形状，例如定义按钮为长方形。

在步骤S202中，将网络视图控件分别封装到父视图类和子视图类中，网络视图控件包括方法信息和属性信息。

以一个具体应用场景为例，当在IOS操作系统中执行网页创建的方法时，采用IOS开发语言，将网络视图控件中的loadurl方法分别封装到父视图类和子视图类中，当调用loadurl方法时，能够将本地资源和网络资源中的超文本网页加载至移动应用中，例如，将百度网页加载至移动应用中。

以一个具体应用场景为例，当在Android操作系统中执行网页创建的方法时，采用Android开发语言将网络视图控件中的loadurl方法分别封装到父视图类和子视图类中，当调用loadurl方法时，能够将本地资源和网络资源中的超文本网页加载至移动应用中。

在步骤S203中，根据父视图类中包含的方法信息和属性信息，生成原生父视图。

在本实施例中，调用父视图类中包含的方法信息和属性信息，生成原生父视图，当执行渲染页面指令时，将原生父视图加载至原生父视图容器中。

以一个具体应用场景为例，在原生父视图中包含创建按钮和定义按钮颜色为红色的属性，当渲染页面时，则在原生父视图容器中显示一个颜色为红色的按钮。

在步骤S204中，根据子视图类中包含的方法信息和属性信息，生成原生子视图。

在本实施例中，调用子视图类中包含的方法信息和属性信息，生成原生子视图，当执行渲染页面指令时，将原生父视图加载至原生子视图容器中，原生子视图容器在原生父视图容器中。

以一个具体应用场景为例，在原生子视图中包含创建按钮和定义按钮颜色为黄色的属性，当渲染页面时，则在原生子视图容器中显示一个颜色为黄色的按钮。

在本实施例中，当在IOS操作系统中执行网页创建的方法时，根据原生父视图类和原生子视图类中的方法信息和属性信息，生成对应的原生父视图和原生子视图，当在Android操作系统中执行网页创建的方法时，根据原生父视图类和原生子视图类中的方法和属性，生成对应的原生父视图和原生子视图，从而有效实现了原生视图的创建。

在本实施例中，当在IOS操作系统或Android操作系统上加载原生视图时，提高了加载速度，节省了流量，用户体验高。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

实施例2：

图3示出了本发明的一个实施例提供的网页创建的系统100，用于执行图1所对应的实施例中的方法步骤，其包括：

原生视图生成模块110，用于调用预存的网络视图控件，生成原生视图；

插件生成模块120，用于将原生视图和预设初始信息封装生成原生视图插件；

显示方法获取模块130，用于提取原生视图插件对应的显示方法；

脚本对象获取模块140，用于将原生视图插件和显示方法封装成脚本对象；

自定义标签获取模块150，用于获取预存的超文本自定义标签；

网页文件获取模块160，用于将超文本自定义标签和脚本对象进行绑定，生成超文本网页文件。

在一个实施例中，网页文件获取模块160还包括：

网页文件解析单元，用于当接收到渲染页面指令时，解析所述超文本网页文件，得到所述超文本自定义标签和所述脚本对象。

第一显示单元，用于将所述超文本自定义标签显示在预设页面中。

脚本对象解析单元，用于解析所述脚本对象，得到所述原生视图插件和所述显示方法。

第二显示单元，用于通过所述显示方法将所述原生视图插件显示在所述预设页面中。

在一个实施例中，原生视图包括原生父视图和原生子视图。

如图4所示，在本发明的一个实施例中，网页创建的系统100中的原生视图生成模块110包括：

视图创建单元111，用于创建父视图类和子视图类，其中，父视图类和子视图类包括自定义的属性信息。

封装单元112，用于将网络视图控件分别封装到父视图类和子视图类中，网络视图控件包括方法信息和属性信息。

原生父视图获取单元113，用于根据父视图类中包含的方法信息和属性信息，生成原生父视图。

原生子视图获取单元114，用于根据子视图类中包含的方法信息和属性信息，生成原生子视图。

在一个实施例中，当网页创建的系统应用于Android操作系统中时，插件生成模块120用于：

基于预设原生方法，将原生视图和初始信息封装成原生视图插件。

在一个实施例中，当网页创建的系统应用于IOS操作系统中时，插件生成模块120用于：

基于预设脚本结构框架，将原生视图和初始信息封装成原生视图插件。

在一个实施例中，网页创建的系统100还包括其他功能模块/单元，用于实现实施例1中各实施例中的方法步骤。

实施例3：

图5是本发明一实施例提供的终端设备的示意图。如图5所示，该实施例的终端设备5包括：处理器50、存储器51以及存储在所述存储器51中并可在所述处理器50上运行的计算机程序52。所述处理器50执行所述计算机程序52时实现如实施例1中所述的各实施例的步骤，例如图1所示的步骤S101至步骤S106。或者，所述处理器50执行所述计算机程序52时实现如实施例2中所述的各系统实施例中的各模块/单元的功能，例如图3所示模块110至160的功能。

示例性的，所述计算机程序52可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器51中，并由所述处理器50执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序52在所述终端设备5中的执行过程。例如，所述计算机程序52可以被分割成原生视图生成模块，插件生成模块，显示方法获取模块，脚本对象获取模块，自定义标签获取模块和网页文件获取模块。各模块具体功能如下：

原生视图生成模块，用于调用预存的网络视图控件，生成原生视图。

插件生成模块，用于基于预设脚本结构框架或预设原生方法信息，将原生视图和预设初始信息封装生成原生视图插件。

显示方法获取模块，用于提取原生视图插件对应的显示方法。

脚本对象获取模块，用于将原生视图插件和显示方法封装成脚本对象。

自定义标签获取模块，用于获取预存的超文本自定义标签。

网页文件获取模块，用于将超文本自定义标签和脚本对象进行绑定，生成超文本网页文件。

所述终端设备5可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述终端设备5可包括，但不仅限于，处理器50、存储器51。本领域技术人员可以理解，图5仅仅是终端设备5的示例，并不构成对终端设备5的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器50可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器51可以是所述终端设备5的内部存储单元，例如终端设备5的硬盘或内存。所述存储器51也可以是所述终端设备5的外部存储设备，例如所述终端设备5上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器51还可以既包括所述终端设备5的内部存储单元也包括外部存储设备。所述存储器51用于存储所述计算机程序以及所述终端设备所需的其他程序和数据。所述存储器51还可以用于暂时地存储已经输出或者将要输出的数据。

实施例4：

本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现如实施例1中所述的各实施例中的步骤，例如图1所示的步骤S101至步骤S106。或者，所述计算机程序被处理器执行时实现如实施例2中所述的各系统实施例中的各模块/单元的功能，例如图3所示的模块110至160的功能。

所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。

本发明实施例系统中的模块或单元可以根据实际需要进行合并、划分和删减。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本发明所提供的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种网页创建的方法，其特征在于，所述方法包括：

调用预存的网络视图控件，生成原生视图；

将所述原生视图和预设初始信息封装生成原生视图插件；

提取所述原生视图插件对应的显示方法；

将所述原生视图插件和所述显示方法封装成脚本对象；

获取预存的超文本自定义标签；

将所述超文本自定义标签和所述脚本对象进行绑定，生成超文本网页文件。

2.如权利要求1所述网页创建的方法，其特征在于，所述将所述自定义标签和所述脚本对象进行绑定，生成超文本网页文件之后，包括：

当接收到渲染页面指令时，解析所述超文本网页文件，得到所述超文本自定义标签和所述脚本对象；

将所述超文本自定义标签显示在预设页面中；

解析所述脚本对象，得到所述原生视图插件和所述显示方法；

通过所述显示方法将所述原生视图插件显示在所述预设页面中。

3.如权利要求1所述网页创建的方法，其特征在于，所述原生视图包括原生父视图和原生子视图。

4.如权利要求3所述网页创建的方法，其特征在于，所述调用预存的网络视图控件，生成原生视图，具体包括：

创建父视图类和子视图类，其中，所述父视图类和所述子视图类包括自定义的属性信息；

将所述网络视图控件分别封装到所述父视图类和所述子视图类中，所述网络视图控件包括方法信息和属性信息；

根据所述父视图类中包含的方法信息和属性信息，生成所述原生父视图；

根据所述子视图类中包含的方法信息和属性信息，生成所述原生子视图。

5.如权利要求1所述网页创建的方法，其特征在于，当在IOS操作系统中执行所述网页创建的方法时，所述将所述原生视图和预设初始信息封装生成原生视图插件，具体包括：

基于预设脚本结构框架，将所述原生视图和所述初始信息封装成原生视图插件。

6.如权利要求1所述网页创建的方法，其特征在于，当在Android操作系统中执行所述网页创建的方法时，所述将所述原生视图和预设初始信息封装生成原生视图插件，具体包括：

基于预设原生方法，将所述原生视图和所述初始信息封装成原生视图插件。

7.一种网页创建的系统，其特征在于，所述系统包括：

原生视图生成模块，用于调用预存的网络视图控件，生成原生视图；

插件生成模块，用于将所述原生视图和预设初始信息封装生成原生视图插件；

显示方法获取模块，用于提取所述原生视图插件对应的显示方法；

脚本对象获取模块，用于将所述原生视图插件和所述显示方法封装成脚本对象；

自定义标签获取模块，用于获取预存的超文本自定义标签；

网页文件获取模块，用于将所述超文本自定义标签和所述脚本对象进行绑定，生成超文本网页文件。

8.如权利要求7所述网页创建的系统，其特征在于，所述原生视图包括原生父视图和原生子视图。

9.一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至6任一项所述方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述方法的步骤。