CN112749362B - 控件创建方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种控件创建方法、装置、设备及存储介质，属于网页开发技术领域。所述方法包括：在网页代码中插入区隔标签；通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括根据区隔标签生成的控件容器；通过WebView组件调用网页端与客户端之间的组件接口，通过该组件接口，向客户端发送原生控件的插入指令，用于指示客户端创建原生控件，将创建的原生控件插入到该控件容器中。本申请可以实现在网页中创建和插入原生控件，由于原生控件相对于元素控件的性能较好，因此提高了网页性能，满足了用户的使用需求。

Description

控件创建方法、装置、设备及存储介质

技术领域

本申请涉及网页开发技术领域，特别涉及一种控件创建方法、装置、设备及存储介质。

背景技术

随着终端技术的发展，针对终端开发的应用程序也越来越多，在开发应用程序时，为了避免开发者针对不同的操作系统需要开发不同的应用程序，可以直接开发以网页作为应用展示界面的网页应用程序，并在网页中创建相应的控件，以便用户通过控件与网页应用程序进行交互。

相关技术中，只能在网页中创建元素控件，即将网页中的某些DOM(DocumentObject Model，文档对象模型)元素作为控件展示给用户，这种控件被称为元素控件。其中，DOM元素包括网页中的图片或文本等。但是，由于元素控件相对于系统提供的原生控件的性能较差，无法满足用户的使用需求，因此亟需一种能够在网页中创建原生控件的方法。

发明内容

本申请实施例提供了一种控件创建方法、装置、设备及存储介质，可以用于解决相关技术中存在的仅能在网页中创建元素控件，控件性能较差，无法满足用户的使用需求的问题。所述技术方案如下：

一方面，提供了一种控件创建方法，应用于网页端，所述方法包括：

在网页代码中插入区隔标签；

通过网页视图WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，所述第一网页中包括控件容器，所述控件容器是根据所述区隔标签生成得到；

通过所述WebView组件调用所述网页端与客户端之间的组件接口，通过所述组件接口，向所述客户端发送原生控件的插入指令，所述插入指令用于指示所述客户端创建所述原生控件，将创建的所述原生控件插入到所述控件容器中，得到第二网页，所述组件接口是预先在所述网页端注册得到。

另一方面，提供了一种控件创建方法，所述方法包括：

接收网页端通过组件接口发送的原生控件的插入指令，所述组件接口为所述网页端与所述客户端之间的组件接口，且所述组件接口是预先在所述网页端注册得到；

根据所述插入指令创建所述原生控件；

将创建的所述原生控件插入到第一网页的控件容器中，得到第二网页，所述第一网页是由所述网页端通过网页视图WebView组件对插入有区隔标签的网页代码进行加载得到，所述控件容器是根据所述区隔标签生成得到。

另一方面，提供了一种控件创建装置，应用于网页端，所述装置包括：

接收模块，用于接收网页端通过组件接口发送的原生控件的插入指令，所述组件接口为所述网页端与所述客户端之间的组件接口，且所述组件接口是预先在所述网页端注册得到；

创建模块，用于根据所述插入指令创建所述原生控件；

插入模块，用于将创建的所述原生控件插入到第一网页的控件容器中，得到第二网页，所述第一网页是通过网页视图WebView组件对插入有区隔标签的网页代码进行加载得到，所述控件容器是根据所述区隔标签生成得到。

另一方面，提供了一种控件创建装置，应用于客户端，所述装置包括：

接收模块，用于接收网页端通过组件接口发送的原生控件的插入指令，所述组件接口为所述网页端与所述客户端之间的组件接口，且所述组件接口是预先在所述网页端注册得到；

创建模块，用于根据所述插入指令创建所述原生控件；

插入模块，用于将创建的所述原生控件插入到第一网页的控件容器中，得到第二网页，所述第一网页是通过网页视图WebView组件对插入有区隔标签的网页代码进行加载得到，所述控件容器是根据所述区隔标签生成得到。

另一方面，提供了一种电子设备，电子设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由所述处理器加载并执行以实现上述任一种控件创建方法。

另一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由处理器加载并执行以实现上述任一种控件创建方法。

在另一实施例中，还提供了一种计算机程序产品，当所述计算机程序产品被执行时，用于实现上述任一种控件创建方法。

本申请实施例提供的技术方案带来的有益效果是：

本申请实施例中，网页端可以在网页代码中插入区隔标签，通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括根据区隔标签生成的控件容器，然后通过WebView组件调用网页端与客户端之间的组件接口，通过组件接口向客户端发送原生控件的插入指令，指示客户端创建原生控件，并将创建的原生控件插入到第一网页的控件容器中，如此，实现了在网页中创建和插入原生控件，由于原生控件相对于元素控件的性能较好，因此提高了网页性能，满足了用户的使用需求。

附图说明

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

图1是本申请实施例涉及的一种实施环境示意图；

图2是本申请实施例提供的一种控件创建方法的流程图；

图3是本申请实施例提供的一种将原生控件插入到DOM节点后的节点树示意图；

图4是本申请实施例提供的另一种控件创建方法的流程图；

图5是本申请实施例提供的一种控件创建装置的框图；

图6是本申请实施例提供的另一种控件创建装置的框图；

图7是本申请实施例提供的一种终端的结构框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

在对本申请实施例进行详细地解释说明之前，先对本申请实施例的应用场景予以说明。

随着移动互联网的普及使用，针对终端开发的应用呈爆炸式增长，开发者在开发自己的应用时，为了避免需要针对安卓和iOS系统分别开发两个不同的平台上的相同应用，往往会采用一些第三方提供的跨平台方案，目前主要有以下两种处理方案：

1，采用H5(HyperText Markup Language5，第5代超级文本标记语言)网页作为界面展示，将DOM元素作为展示给用户的控件。

但是，元素控件的性能相对于系统提供的原生控件较差，而且对于某些功能较为复杂的控件，无法完全采用DOM元素来实现，用户体验较差。

2，某些第三方开发者将不同系统下的系统控件做统一封装，提供相同的调用使用规范，从而做到开发者写一份代码就可以在不同平台下运行，如Flutter(谷歌的移动用户界面框架)等框架。

虽然第三方开发者提供的系统控件封装可以解决复杂控件的使用问题，但是对于某些很简单的控件，用该方式实现显得过于复杂，不仅增加了框架的复杂度，而且不符合前端开发者的开发习惯，适应起来需要较长的时间，另外这种方式难以以CSS(CascadingStyle Sheets，层叠样式表)方式来描述控件风格，往往只能自定义控件风格，这又增加了系统的复杂度。

针对现有的开发框架无法同时满足H5控件开发的便捷性以及充分使用系统控件的复杂功能的情况，本申请实施例提供了一种基于WebView(网络视图)组件的元素控件和原生控件的融合排版运行方案，基于该方案可以在H5网页中便捷地开发元素控件，也可以在H5网页中创建和插入原生控件。该方案基于WebView组件，充分利用了H5的元素控件作为基础控件，利用了WebView组件的特性，可以将系统提供的任意原生控件或者开发者自定义的更复杂的组合控件插入到WebView框架中。另外，本方案还充分利用iOS应用程序的消息派发机制，解决了被插入的原生控件在WebView框架下的事件响应问题，通过H5网页的元素控件与系统提供的原生控件的结合使用，增加了跨平台开发的便捷性和易用性。其中，所述WebView组件可以为wkWebView组件。

接下来对本申请实施例涉及的实施环境进行介绍。

图1是本申请实施例涉及的一种实施环境示意图，如图1所示，该方法应用于终端10中，终端10包括网页(Web)端11和客户端12。网页端11用于加载显示网页，客户端12为终端本体。

本申请实施例中，网页端11用于在网页代码中插入区隔标签，通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括根据区隔标签生成的控件容器，通过WebView组件调用网页端与客户端之间的组件接口，通过组件接口，向客户端发送原生控件的插入指令。客户端12根据该插入指令创建原生控件，将创建的原生控件插入到控件容器中。

另外，本申请实施例还可以实现对已插入的原生控件的更新和删除，以及对原生控件操作事件的处理。

图2是本申请实施例提供的一种控件创建方法的流程图，该方法的交互主体为网页端和客户端。参见图2，该方法包括：

步骤201：网页端在网页代码中插入区隔标签。

可以在网页代码中需要插入原生控件的预留位置插入区隔标签。

其中，区隔(Div)标签用于定义网页的分区或节，可以把网页分割为独立的、不同的部分。示例的，区隔标签为具有overflow(滚动)属性的区隔标签。

步骤202：网页端通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括控件容器，控件容器是根据区隔标签生成得到。

其中，WebView组件用来展示可交互的网页内容，可以对网页进行加载和显示，就像一个APP内的浏览器。该WebView组件可以为wkWebView组件。

对于wkWebView组件来说，在对包括有区隔标签的网页代码进行加载时，可以在区隔标签所在位置对应生成一个UIScrollView(用户界面滚动视图)控件，也即是，可以生成一个滚动条。本申请实施例中，可以将根据区隔标签生成的UIScrollView控件作为一个用于插入原生控件的控件容器。

作为一个示例，在网页端在网页代码中插入区隔标签之后，网页端还可以调用网页端与客户端之间的组件接口，通过该组件接口，向客户端发送容器标识分配指令，该容器标识分配指令用于指示客户端为该控件容器分配容器标识。该容器标识可以为控件容器的名称或id(Identity Document，身份标识号)等。

比如，网页端可以调用网页端与客户端之间的组件接口，通过该组件接口向客户端发送该控件容器的容器信息，该容器信息包括位置，或者位置和尺寸。该容器信息用于指示客户端在接收到该控件容器的容器信息后，为该控件容器分配容器标识。比如，先根据该控件容器的位置遍历网页找到该控件容器，保存其对象，并为其分配一个容器标识返回给网页端。

其中，该组件接口可以预先在网页端注册得到。本申请实施例中，预先构建了网页端与客户端之间的组件接口，该组件接口为网页端与客户端之间的通道，使得网页端与客户端可以通过组件接口进行交互。具体地，该组件接口为网页端的JavaScript(一种直译式脚本语言)与客户端语言之间的接口。

其中，该组件接口可以包括多个接口，比如包括与多个原生控件中每个原生控件对应的插入接口、更新接口和删除接口等，还可以包括插入容器接口。

作为一个示例，网页端可以调用网页端与客户端之间的插入容器接口，通过该插入容器接口向客户端发送容器标识分配指令，比如向客户端发送该控件容器的容器信息。

步骤203：网页端通过WebView组件调用网页端与客户端之间的组件接口，通过该组件接口，向客户端发送原生控件的插入指令。

其中，该插入指令用于指示客户端创建原生控件，将创建的原生控件插入到控件容器中，得到第二网页。该原生控件可以为UIKit(一款轻量级、模块化的前端框架)控件。

其中，插入指令可以携带容器标识，用于指示客户端创建原生控件，根据容器标识将创建的原生控件插入到该容器标识对应的控件容器中。

其中，该组件接口可以包括多个接口，比如包括与多个原生控件中每个原生控件对应的插入接口、更新接口和删除接口等。本申请可以通过组件接口实现原生控件的插入、更新或删除等。

示例的，若原生控件为绘制控件，则该组件接口可以包括插入绘制控件接口、更新绘制控件接口，绘制命令接口和删除绘制控件接口等。比如，绘制控件为Canvas(绘制)，则该组件接口可以包括insertCanvas(插入绘制控件)接口、updateCanvas(更新绘制控件)接口、drawCanvas(绘制命令)接口和removeCanvas(删除绘制控件)接口等。

作为一个示例，网页端通过WebView组件调用网页端与客户端之间的插入原生控件接口，通过该插入原生控件接口，向客户端发送原生控件的插入指令。该插入指令携带容器标识，用于指示客户端创建原生控件，根据容器标识将创建的原生控件插入到该容器标识对应的控件容器中。

示例的，可以通过insertCanvas接口通知客户端，在当前WebView上插入一个画布控件，客户端根据传入的位置和宽高参数来决定插入控件的位置和大小。当开发者改变了wx-canvas控件的位置大小时，通过updateCanvas接口通知客户端，客户端对原生控件frame位置大小属性做对应的修改。页面离开时，removeCanvas接口的调用将画布控件从webview上移除。

步骤204：客户端接收网页端通过组件接口发送的原生控件的插入指令。

其中，该组件接口可以为插入原生控件接口，该插入指令可以携带容器标识。该容器标识用于指示所插入的原生控件属于该容器标识对应的控件容器，需要将原生控件插入到该容器标识对应的控件容器中。

作为一个示例，客户端可以接收网页通过插入原生控件接口发送容器标识。

步骤205：客户端根据插入指令创建原生控件。

步骤206：客户端将创建的原生控件插入到该控件容器中，得到第二网页。

客户端可以根据插入指令携带的容器标识和该控件容器的位置，找到该控件容器，将创建的原生控件插入到该控件容器中。

另外，通过在DOM节点插入区隔标签，将原生控件插入到区隔标签对应的控件容器，还可以实现原生控件不遮挡网页元素。例如，假设原生控件为视频播放器，可以将一个视频播放器插入到DOM节点以后，将视频播放器插入到DOM节点后的节点树如图3所示。

需要说明的是，本申请实施例仅是以在网页中插入原生控件为例进行说明，而在其他实施例中，还可以在网页中插入开发者自定义的更复杂的组合控件，或者其他形式的控件，本申请实施例对于在网页中插入的控件类型不做限定。

本申请实施例中，网页端可以在网页代码中插入区隔标签，通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括根据区隔标签生成的控件容器，然后通过WebView组件调用网页端与客户端之间的组件接口，通过组件接口向客户端发送原生控件的插入指令，指示客户端创建原生控件，并将创建的原生控件插入到第一网页的控件容器中，如此，实现了在网页中创建和插入原生控件，由于原生控件相对于元素控件的性能较好，因此提高了网页性能，满足了用户的使用需求。

需要说明的是，在网页中插入原生控件之后，还可以通过网页端与客户端之间的组件接口，对原生控件进行更新和删除，以及对原生控件的操作事件进行响应。图4是本申请实施例提供的另一种控件创建方法的流程图，该方法的交互主体为网页端和客户端。参见图4，该方法包括：

步骤401：网页端在网页代码中插入区隔标签。

步骤402：网页端通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括控件容器，控件容器是根据区隔标签生成得到。

步骤403：网页端通过WebView组件调用网页端与客户端之间的组件接口，通过该组件接口，向客户端发送原生控件的插入指令。

步骤404：客户端接收网页端通过组件接口发送的原生控件的插入指令。

步骤405：客户端根据插入指令创建原生控件。

步骤406：客户端将创建的原生控件插入到该控件容器中，得到第二网页。

需要说明的是，步骤401-406与上述步骤201-206同理，具体实现过程可以参考上述步骤201-206的相关描述，本申请实施例在此不做限定。

步骤407：网页端通过WebView组件调用组件接口，通过组件接口，向客户端发送原生控件的更新指令，该更新指令携带目标尺寸，用于指示客户端将原生控件的尺寸调整为目标尺寸。

其中，该组件接口可以为更新原生控件接口。网页端可以通过更新原生控件接口向客户端发送目标尺寸，指示客户端将原生控件的尺寸调整为目标尺寸。

客户端接收到该更新指令后，可以将原生控件的尺寸调整为目标尺寸。

步骤408：网页端通过WebView组件调用组件接口，通过组件接口，向客户端发送原生控件的删除指令，删除指令用于指示客户端将原生控件删除。

其中，该删除指令可以携带要删除的原生控件的标识。

作为一个示例，该组件接口可以为删除原生控件接口。网页端可以通过删除原生控件接口向客户端发送要删除的原生控件的标识，指示客户端删除该原生控件。

客户端接收到该删除指令后，可以删除该原生控件。

以画布Canvas控件为例，前端H5逻辑提供了wx-canvas控件给开发者，当开发者在页面中设置一个画布标签<canvas canvas-id＝"xxx"></canvas>，并调用绘制接口时，前端SDK将会有如下JSAPI的调用流程：

如上述调用流程可知，wx-canvas控件初始化时，将会通过Webview SDK(SoftwareDevelopment Kit，软件开发工具包)的封装调用，调用组件接口：insertCanvas接口以及updateCanvas接口(可选)，绘制时通过调用drawCanvas接口，将绘制命令传递给客户端，客户端解析drawCanvas接口所带的参数，获取绘制命令集进行图形绘制。

步骤409：当通过WebView组件监听到对原生控件的第一操作事件时，通过WebView组件将第一操作事件发送给原生控件，指示原生控件对第一操作事件进行响应。

由于wkWebView组件会接管用户的所有操作事件，因此，对于插入到网页中的原生控件，原生控件将无法监听到操作事件，以及对操作事件进行响应。本申请实施例中，为了便于网页中的原生控件能够响应用户的操作事件，当通过WebView组件监听到对原生控件的第一操作事件时，可以通过WebView组件将第一操作事件发送给原生控件，以便原生控件能够及时对第一操作事件进行响应。

另外，本申请实施例中，将优先响应网页上的操作事件，如果没有网页上的操作事件，再响应原生控件的操作事件。

作为一个示例，当通过WebView组件监听到对第二网页中目标位置的第二操作事件时，确定位于目标位置处的至少一个控件，目标位置为第二网页的任一位置。如果该至少一个控件为原生控件，即仅包括原生控件，则可以确定监听到对原生控件的第一操作事件，并将第一操作事件通过WebView组件发送给原生控件。如果该至少一个控件包括元素控件和原生控件，且原生控件位于元素控件的上方，则确定监听到对原生控件的第一操作事件，并将第一操作事件通过WebView组件发送给原生控件。如果该至少一个控件包括元素控件和原生控件，但原生控件位于元素控件的下方，则确定监听到对元素控件的操作事件，并对元素控件的操作事件进行响应。

作为一个示例，可以通过重载WKWebView的hitTest方法(用户界面视图里的一种方法)，在该方法的处理逻辑中优先处理网页上的事件，如果网页未处理，再传递给原生控件。其中，关键技术点包括：

探测链：通过hitTest找到相应的view作为响应链的开始节点(UIResponder)响应链：触摸事件从开始节点，沿着这个响应链一直传递，直到碰到可以处理这个事件的UIResponder对象或者到达响应链的末尾。

手势识别：当前view会触发touchstart(触摸开始)，然后触摸事件会优先传递到按照响应链顺序排序的手势上，如果手势识别成功，就不会继续传递事件到nextResponder了了。

手势识别：当前的响应view可通过手势识别的属性cancelsTouchsInView和delaysTouchesBegan来控制在当前View及之前的响应view是否继续或延迟发送触摸事件。

需要说明的是，本申请实施例可以实现原生控件与网页JS(JavaScript)之间的交互。比如，为了方便应用开发者控制操作插入的原生控件，本方案提供可以提供独立的JavaScript虚拟机运行环境，开发者的逻辑开发代码运行在该JavaScript运行环境下，通过上面提到的组件接口对控件进行修改操作。用户对控件操作产生的系统事件，通过JavaScript绑定函数方式回调到开发者的JavaScript脚本中，实现事件监听。

还需要说明的是，上述步骤407-409均为可选步骤，可以根据实际需要选择执行，也可以不执行，本申请实施例对此不做限定。

图5是本申请实施例提供的一种控件创建装置的框图，该装置集成于网页端，该装置包括插入模块501、加载模块502和第一发送模块503。

插入模块501，用于在网页代码中插入区隔标签；

加载模块502，用于通过网页视图WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，该第一网页中包括控件容器，该控件容器是根据该区隔标签生成得到；

第一发送模块503，用于通过该WebView组件调用该网页端与客户端之间的组件接口，通过该组件接口，向该客户端发送原生控件的插入指令，该插入指令用于指示该客户端创建该原生控件，将创建的该原生控件插入到该控件容器中，得到第二网页，该组件接口是预先在该网页端注册得到。

可选地，该装置还包括：

第二发送模块，用于通过该WebView组件调用该组件接口，通过该组件接口，向该客户端发送容器标识分配指令，该容器标识分配指令用于指示该客户端为该控件容器分配容器标识；

获取模块，用于通过该组件接口，获取该客户端为该控件容器分配的该容器标识；

第一发送模块503，用于通过该组件接口，向该客户端发送该插入指令，该插入指令携带该容器标识，用于指示该客户端创建该原生控件，根据该容器标识将创建的该原生控件插入到该控件容器中。

可选地，该装置还包括：

第三发送模块，用于当通过该WebView组件监听到对该原生控件的第一操作事件时，通过该WebView组件将该第一操作事件发送给该原生控件，指示该原生控件对该第一操作事件进行响应。

可选地，该装置还包括确定模块，用于：

当通过该WebView组件监听到对该第二网页中目标位置的第二操作事件时，确定位于该目标位置处的至少一个控件，该目标位置为该第二网页的任一位置；

若该至少一个控件为该原生控件，或者若该至少一个控件包括元素控件和该原生控件，且该原生控件位于该元素控件的上方，则确定监听到对该原生控件的第一操作事件。

本申请实施例中，网页端可以在网页代码中插入区隔标签，通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括根据区隔标签生成的控件容器，然后通过WebView组件调用网页端与客户端之间的组件接口，通过组件接口向客户端发送原生控件的插入指令，指示客户端创建原生控件，并将创建的原生控件插入到第一网页的控件容器中，如此，实现了在网页中创建和插入原生控件，由于原生控件相对于元素控件的性能较好，因此提高了网页性能，满足了用户的使用需求。

图6是本申请实施例提供的另一种控件创建装置的框图，该装置集成于客户端，该装置包括接收模块601、创建模块602和插入模块603。

第一接收模块601，用于接收网页端通过组件接口发送的原生控件的插入指令，该组件接口为该网页端与该客户端之间的组件接口，且该组件接口是预先在该网页端注册得到；

创建模块602，用于根据该插入指令创建该原生控件；

插入模块603，用于将创建的该原生控件插入到第一网页的控件容器中，得到第二网页，该第一网页是通过网页视图WebView组件对插入有区隔标签的网页代码进行加载得到，该控件容器是根据该区隔标签生成得到。

可选地，该装置还包括：

第二接收模块，用于接收该网页端通过该组件接口发送的容器标识分配指令；

发送模块，用于根据该容器标识分配指令为该控件容器分配容器标识，将该容器标识通过该组件接口发送给该网页端，其中，该插入指令中携带该容器标识；

插入模块603，用于根据该容器标识，将创建的该原生控件插入到该控件容器中。

本申请实施例中，网页端可以在网页代码中插入区隔标签，通过WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，第一网页中包括根据区隔标签生成的控件容器，然后通过WebView组件调用网页端与客户端之间的组件接口，通过组件接口向客户端发送原生控件的插入指令，指示客户端创建原生控件，并将创建的原生控件插入到第一网页的控件容器中，如此，实现了在网页中创建和插入原生控件，由于原生控件相对于元素控件的性能较好，因此提高了网页性能，满足了用户的使用需求。

需要说明的是：上述实施例提供的控件创建装置在创建控件时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的控件创建装置与控件创建方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图7是本申请实施例提供的一种终端700的结构框图。该终端700可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端700还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端700包括有：处理器701和存储器702。

处理器701可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器701可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器701也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器701可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器701还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器702可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器702还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器702中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器701所执行以实现本申请中方法实施例提供的控件创建方法。

在一些实施例中，终端700还可选包括有：外围设备接口703和至少一个外围设备。处理器701、存储器702和外围设备接口703之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口703相连。具体地，外围设备包括：射频电路704、触摸显示屏705、摄像头706、音频电路707、定位组件708和电源709中的至少一种。

外围设备接口703可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器701和存储器702。在一些实施例中，处理器701、存储器702和外围设备接口703被集成在同一芯片或电路板上；在一些其他实施例中，处理器701、存储器702和外围设备接口703中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路704用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路704通过电磁信号与通信网络以及其他通信设备进行通信。射频电路704将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路704包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路704可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路704还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏705用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏705是触摸显示屏时，显示屏705还具有采集在显示屏705的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器701进行处理。此时，显示屏705还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏705可以为一个，设置终端700的前面板；在另一些实施例中，显示屏705可以为至少两个，分别设置在终端700的不同表面或呈折叠设计；在再一些实施例中，显示屏705可以是柔性显示屏，设置在终端700的弯曲表面上或折叠面上。甚至，显示屏705还可以设置成非矩形的不规则图形，也即异形屏。显示屏705可以采用LCD(LiquidCrystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件706用于采集图像或视频。可选地，摄像头组件706包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件706还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路707可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器701进行处理，或者输入至射频电路704以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端700的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器701或射频电路704的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路707还可以包括耳机插孔。

定位组件708用于定位终端700的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件708可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。

电源709用于为终端700中的各个组件进行供电。电源709可以是交流电、直流电、一次性电池或可充电电池。当电源709包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端700还包括有一个或多个传感器710。该一个或多个传感器710包括但不限于：加速度传感器711、陀螺仪传感器712、压力传感器713、指纹传感器714、光学传感器715以及接近传感器716。

加速度传感器711可以检测以终端700建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器711可以用于检测重力加速度在三个坐标轴上的分量。处理器701可以根据加速度传感器711采集的重力加速度信号，控制触摸显示屏705以横向视图或纵向视图进行用户界面的显示。加速度传感器711还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器712可以检测终端700的机体方向及转动角度，陀螺仪传感器712可以与加速度传感器711协同采集用户对终端700的3D动作。处理器701根据陀螺仪传感器712采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器713可以设置在终端700的侧边框和/或触摸显示屏705的下层。当压力传感器713设置在终端700的侧边框时，可以检测用户对终端700的握持信号，由处理器701根据压力传感器713采集的握持信号进行左右手识别或快捷操作。当压力传感器713设置在触摸显示屏705的下层时，由处理器701根据用户对触摸显示屏705的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器714用于采集用户的指纹，由处理器701根据指纹传感器714采集到的指纹识别用户的身份，或者，由指纹传感器714根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器701授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器714可以被设置终端700的正面、背面或侧面。当终端700上设置有物理按键或厂商Logo时，指纹传感器714可以与物理按键或厂商Logo集成在一起。

光学传感器715用于采集环境光强度。在一个实施例中，处理器701可以根据光学传感器715采集的环境光强度，控制触摸显示屏705的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏705的显示亮度；当环境光强度较低时，调低触摸显示屏705的显示亮度。在另一个实施例中，处理器701还可以根据光学传感器715采集的环境光强度，动态调整摄像头组件706的拍摄参数。

接近传感器716，也称距离传感器，通常设置在终端700的前面板。接近传感器716用于采集用户与终端700的正面之间的距离。在一个实施例中，当接近传感器716检测到用户与终端700的正面之间的距离逐渐变小时，由处理器701控制触摸显示屏705从亮屏状态切换为息屏状态；当接近传感器716检测到用户与终端700的正面之间的距离逐渐变大时，由处理器701控制触摸显示屏705从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图7中示出的结构并不构成对终端700的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

在示例性的实施例中，还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，所述指令被处理器执行时实现上述控件创建方法。

在示例性实施例中，还提供了一种计算机程序产品，当该计算机程序产品被执行时，其用于实现上述控件创建方法。

应当理解的是，在本文中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的较佳实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种控件创建方法，其特征在于，应用于网页端，所述方法包括：

在网页代码中插入区隔标签，其中所述区隔标签所在位置为DOM节点，并且所述区隔标签具有滚动属性；

通过网页视图WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，所述第一网页中包括控件容器，所述控件容器是根据所述区隔标签在所述区隔标签所在位置生成得到，所述控件容器为用户界面滚动视图控件；

通过所述WebView组件调用所述网页端与客户端之间的组件接口，通过所述组件接口，向所述客户端发送原生控件的插入指令，所述插入指令用于指示所述客户端创建所述原生控件，将创建的所述原生控件插入到所述控件容器中，得到第二网页，所述组件接口是预先在所述网页端注册得到，

当通过所述WebView组件监听到对所述第二网页中目标位置的第二操作事件时，确定位于所述目标位置处的至少一个控件，所述目标位置为所述第二网页的任一位置；其中，若所述至少一个控件为所述原生控件，或者若所述至少一个控件包括元素控件和所述原生控件，且所述原生控件位于所述元素控件的上方，则确定监听到对所述原生控件的第一操作事件；若所述至少一个控件包括元素控件和所述原生控件，并且所述原生控件位于所述元素控件的下方，则确定监听到对所述元素控件的操作事件；

当通过所述WebView组件监听到对所述原生控件的第一操作事件时，通过所述WebView组件将所述第一操作事件发送给所述原生控件，指示所述原生控件对所述第一操作事件进行响应，

其中，在所述元素控件和所述原生控件各自对应的操作事件中，优先响应所述元素控件对应的操作事件。

2.根据权利要求1所述的方法，其特征在于，所述通过网页视图WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页之后，还包括：

通过所述WebView组件调用所述组件接口，通过所述组件接口，向所述客户端发送容器标识分配指令，所述容器标识分配指令用于指示所述客户端为所述控件容器分配容器标识；

通过所述组件接口，获取所述客户端为所述控件容器分配的所述容器标识；

所述通过所述组件接口，向所述客户端发送原生控件的插入指令，包括：

通过所述组件接口，向所述客户端发送所述插入指令，所述插入指令携带所述容器标识，用于指示所述客户端创建所述原生控件，根据所述容器标识将创建的所述原生控件插入到所述控件容器中。

3.根据权利要求1所述的方法，其特征在于，所述通过所述组件接口，向所述客户端发送原生控件的插入指令之后，所述方法还包括：

通过所述WebView组件调用所述组件接口，通过所述组件接口，向所述客户端发送所述原生控件的更新指令，所述更新指令携带目标尺寸，用于指示所述客户端将所述原生控件的尺寸调整为所述目标尺寸。

4.根据权利要求1所述的方法，其特征在于，所述通过所述组件接口，向所述客户端发送原生控件的插入指令之后，所述方法还包括：

通过所述WebView组件调用所述组件接口，通过所述组件接口，向所述客户端发送所述原生控件的删除指令，所述删除指令用于指示所述客户端将所述原生控件删除。

5.一种控件创建方法，其特征在于，应用于客户端，所述方法包括：

接收网页端通过组件接口发送的原生控件的插入指令，所述组件接口为所述网页端与所述客户端之间的组件接口，且所述组件接口是预先在所述网页端注册得到；

根据所述插入指令创建所述原生控件；

将创建的所述原生控件插入到第一网页的控件容器中，得到第二网页，所述第一网页是由所述网页端通过网页视图WebView组件对插入有区隔标签的网页代码进行加载得到，所述区隔标签所在位置为DOM节点，并且所述区隔标签具有滚动属性；所述控件容器是根据所述区隔标签在所述区隔标签所在位置生成得到，所述控件容器为用户界面滚动视图控件；

接收所述网页端通过所述WebView组件发送给所述原生控件的第一操作事件，以使所述原生控件对所述第一操作事件进行响应，其中所述原生控件的第一操作事件是所述网页端通过所述WebView组件监听到对所述原生控件的第一操作事件时发送的，并且其中所述网页端当通过所述WebView组件监听到对所述第二网页中目标位置的第二操作事件时，确定位于所述目标位置处的至少一个控件，所述目标位置为所述第二网页的任一位置；其中，若所述至少一个控件为所述原生控件，或者若所述至少一个控件包括元素控件和所述原生控件，且所述原生控件位于所述元素控件的上方，则确定监听到对所述原生控件的第一操作事件；若所述至少一个控件包括元素控件和所述原生控件，并且所述原生控件位于所述元素控件的下方，则确定监听到对所述元素控件的操作事件；

其中，在所述元素控件和所述原生控件各自对应的操作事件中，优先响应所述元素控件对应的操作事件。

6.根据权利要求5所述的方法，其特征在于，所述接收网页端通过组件接口发送的原生控件的插入指令之前，还包括：

接收所述网页端通过所述组件接口发送的容器标识分配指令；

根据所述容器标识分配指令为所述控件容器分配容器标识，将所述容器标识通过所述组件接口发送给所述网页端，其中，所述插入指令中携带所述容器标识；

所述将创建的所述原生控件插入到第一网页的控件容器中，包括：

根据所述容器标识，将创建的所述原生控件插入到所述控件容器中。

7.一种控件创建装置，其特征在于，应用于网页端，所述装置包括：

插入模块，用于在网页代码中插入区隔标签，其中所述区隔标签所在位置为DOM节点，并且所述区隔标签具有滚动属性；

加载模块，用于通过网页视图WebView组件对插入区隔标签后的网页代码进行加载，得到第一网页，所述第一网页中包括控件容器，所述控件容器是根据所述区隔标签在所述区隔标签所在位置生成得到，所述控件容器为用户界面滚动视图控件；

第一发送模块，用于通过所述WebView组件调用所述网页端与客户端之间的组件接口，通过所述组件接口，向所述客户端发送原生控件的插入指令，所述插入指令用于指示所述客户端创建所述原生控件，将创建的所述原生控件插入到所述控件容器中，得到第二网页，所述组件接口是预先在所述网页端注册得到，

确定模块，用于当通过所述WebView组件监听到对所述第二网页中目标位置的第二操作事件时，确定位于所述目标位置处的至少一个控件，所述目标位置为所述第二网页的任一位置；其中，若所述至少一个控件为所述原生控件，或者若所述至少一个控件包括元素控件和所述原生控件，且所述原生控件位于所述元素控件的上方，则确定监听到对所述原生控件的第一操作事件；若所述至少一个控件包括元素控件和所述原生控件，并且所述原生控件位于所述元素控件的下方，则确定监听到对所述元素控件的操作事件；

第二发送模块，用于当通过所述WebView组件监听到对所述原生控件的第一操作事件时，通过所述WebView组件将所述第一操作事件发送给所述原生控件，指示所述原生控件对所述第一操作事件进行响应，

其中，在所述元素控件和所述原生控件各自对应的操作事件中，优先响应所述元素控件对应的操作事件。

8.一种控件创建装置，其特征在于，应用于客户端，所述装置包括：

第一接收模块，用于接收网页端通过组件接口发送的原生控件的插入指令，所述组件接口为所述网页端与所述客户端之间的组件接口，且所述组件接口是预先在所述网页端注册得到；

创建模块，用于根据所述插入指令创建所述原生控件；

插入模块，用于将创建的所述原生控件插入到第一网页的控件容器中，得到第二网页，所述第一网页是通过网页视图WebView组件对插入有区隔标签的网页代码进行加载得到，所述区隔标签所在位置为DOM节点，并且所述区隔标签具有滚动属性；所述控件容器是根据所述区隔标签在所述区隔标签所在位置生成得到，所述控件容器为用户界面滚动视图控件；

第二接收模块，用于接收所述网页端通过所述WebView组件发送给所述原生控件的第一操作事件，以使所述原生控件对所述第一操作事件进行响应，其中所述原生控件的第一操作事件是所述网页端通过所述WebView组件监听到对所述原生控件的第一操作事件时发送的，并且其中所述网页端当通过所述WebView组件监听到对所述第二网页中目标位置的第二操作事件时，确定位于所述目标位置处的至少一个控件，所述目标位置为所述第二网页的任一位置；其中，若所述至少一个控件为所述原生控件，或者若所述至少一个控件包括元素控件和所述原生控件，且所述原生控件位于所述元素控件的上方，则确定监听到对所述原生控件的第一操作事件；若所述至少一个控件包括元素控件和所述原生控件，并且所述原生控件位于所述元素控件的下方，则确定监听到对所述元素控件的操作事件；

其中，在所述元素控件和所述原生控件各自对应的操作事件中，优先响应所述元素控件对应的操作事件。

9.一种电子设备，其特征在于，所述电子设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由所述处理器加载并执行以实现如权利要求1-4或权利要求5-6任一项所述的控件创建方法。

10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由处理器加载并执行以实现如权利要求1-4或5-6任一项所述的控件创建方法。