CN110908711A - 应用程序的控件开发方法、装置及电子设备 - Google Patents

Abstract

本公开实施例中提供了一种应用程序的控件开发方法、装置及电子设备，属于计算机应用技术领域，该方法包括：确定应用程序中待开发的目标控件；采用原生开发方案在客户端开发所述目标控件，确定所述客户端与网页端之间的关于所述目标控件的调用协议；利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。通过本公开的方案，实现在原生开发方案和网页端的混合开发中开发应用程序的空间，既能提升产品体验，又能实现全部产品需求。

Description

应用程序的控件开发方法、装置及电子设备

技术领域

本公开涉及计算机应用技术领域，尤其涉及一种应用程序的控件开发方法、装置及电子设备。

背景技术

应用程序的跨平台使用越来越普遍，同一个应用程序会在不同的操作***中使用，因此需要对主流移动操作***的设备进行适配。企业进行跨平台应用程序开发时，每种移动操作***都需要设置独立的开发项目，分别针对应用程序的各控件单独开发。当企业需要短时间开发跨平台应用程序时，各开发项目中需要能力较强的开发者来快速搭建原生界面，程序界面的统一化也需要各平台项目的开发人员进行大量沟通，开发效率较低，增加了企业的成本，也很容易出现不同平台之间的程序界面不统一的问题。

可见，现有的应用程序的控件开发方案存在开发难度较大、耗费人力和时间成本的技术问题。

发明内容

有鉴于此，本公开实施例提供一种应用程序的控件开发方法、装置及电子设备，至少部分解决现有技术中存在的问题。

第一方面，本公开实施例提供了一种应用程序的控件开发方法，包括：

确定应用程序中待开发的目标控件；

采用原生开发方案在客户端开发所述目标控件；

确定所述客户端与网页端之间的关于所述目标控件的调用协议；

利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。

根据本公开实施例的一种具体实现方式，所述目标控件为日历滚动控件。

根据本公开实施例的一种具体实现方式，所述网页端为H5网页端。

根据本公开实施例的一种具体实现方式，所述调用协议为Js Bridge协议。

根据本公开实施例的一种具体实现方式，所述利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件的步骤，包括：

接收作用于所述网页端上的目标按钮的触控操作；

将作用于所述目标按钮的触控操作透传给所述客户端；

根据所述调用协议和所述触控操作，修改所述目标控件的显示内容。

根据本公开实施例的一种具体实现方式，所述根据所述调用协议和所述触控操作，修改所述目标控件的显示内容的步骤，包括：

根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数；

调用所述目标函数，根据所述修改参数修改所述目标控件的显示内容。

根据本公开实施例的一种具体实现方式，所述修改所述目标控件的显示内容的步骤之后，所述方法还包括：

控制所述客户端回调完成事件至所述网页端。

根据本公开实施例的一种具体实现方式，所述根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数的步骤，包括：

根据所述调用协议和所述触控操作，所述网页端生成URL请求；

所述客户端拦截所述URL请求，识别所述URL请求中包含的目标函数和修改参数。

根据本公开实施例的一种具体实现方式，所述根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数的步骤，包括：

根据所述调用协议获得所述客户端与所述网页端之间的映射表；

利用所述映射表，确定所述触控操作对应的目标函数和修改参数。

根据本公开实施例的一种具体实现方式，所述应用程序所运行的移动操作***为IOS***或者Android***。

第二方面，本公开实施例提供了一种应用程序的控件开发装置，包括：

第一确定模块，用于确定应用程序中待开发的目标控件；

开发模块，用于采用原生开发方案在客户端开发所述目标控件；

第二确定模块，用于确定所述客户端与网页端之间的关于所述目标控件的调用协议；

调用模块，用于利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。

第三方面，本公开实施例还提供了一种电子设备，该电子设备包括：

至少一个处理器；以及，

与该至少一个处理器通信连接的存储器；其中，

该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述第一方面或第一方面的任一实现方式中的应用程序的控件开发方法。

第四方面，本公开实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的应用程序的控件开发方法。

第五方面，本公开实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的应用程序的控件开发方法。

本公开实施例中的应用程序的控件开发方案，包括：确定应用程序中待开发的目标控件；采用原生开发方案在客户端开发所述目标控件，确定所述客户端与网页端之间的关于所述目标控件的调用协议；利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。通过本公开的方案，实现在原生开发方案和网页端的混合开发中开发应用程序的空间，既能提升产品体验，又能实现全部产品需求。

附图说明

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

图1为本公开实施例提供的一种应用程序的控件开发方法的流程示意图；

图2为本公开实施例提供的另一种应用程序的控件开发方法的部分流程示意图；

图3为本公开实施例提供的一种应用程序的控件开发装置的结构示意图；

图4为本公开实施例提供的电子设备示意图。

具体实施方式

下面结合附图对本公开实施例进行详细描述。

以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其它方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其它结构及/或功能性实施此设备及/或实践此方法。

还需要说明的是，以下实施例中所提供的图示仅以示意方式说明本公开的基本构想，图式中仅显示与本公开中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

另外，在以下描述中，提供具体细节是为了便于透彻理解实例。然而，所属领域的技术人员将理解，可在没有这些特定细节的情况下实践所述方面。

本公开实施例提供一种应用程序的控件开发方法。本实施例提供的应用程序的控件开发方法可以由一计算装置来执行，该计算装置可以实现为软件，或者实现为软件和硬件的组合，该计算装置可以集成设置在服务器、终端设备等中。

参见图1，本公开实施例提供的一种应用程序的控件开发方法，包括：

S101，确定应用程序中待开发的目标控件；

本实施例提供的应用程序的控件开发方法，用于开发应用程序的控件，例如日历滚动控件、悬浮显示控件、皮肤切换控件等。将应用程序中当前待开发的控件为目标控件。可选的，本实施例中，所述目标控件为日历滚动控件，以目标控件为日历滚动控件来解释说明控件开发过程。

可选的，所述应用程序所运行的移动操作***为IOS***或者Android***。

S102，采用原生开发方案在客户端开发所述目标控件；

确定待开发的目标控件后，先采用原生开发方案在客户端开发该目标控件。其中，原生开发方案是指在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行应用程序的开发。比如Android是利用Java、Eclipse、Android studio，IOS是利用Objective-C和X-code进行开发。利用官方提供的语言和工具并且能够直接操控硬件设备，比如多点触控、NFC、读取短信等，在应用性能上和交互体验上具有较大优势。

S103，确定所述客户端与网页端之间的关于所述目标控件的调用协议；

在客户端开发目标控件后，即可确定通过网页端调用客户端的该目标控件的调用协议。可选的，所述网页端为可以H5网页端，所述调用协议可以为Js Bridge协议。

其中，所谓H5，即HTML5，是指HTML的第5个版本，而HTML则是指描述网页的标准语言。描述网页的标准语言，其实就是网页文件的格式。H5具有快速更新迭代的特性。

Js Bridge协议是原生开发方案的Native代码与Js代码的通信桥梁，可以在H5网页端触发URL Scheme后，Native捕获URL Scheme，再通过原生分析，进而执行通过原生调用H5的目的。

S104，利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。

依据上述步骤确定客户端和H5网页端之间的调用协议后，即可实现根据网页端的用户操作，调用客户端的目标控件的目的。

如图2所示，本公开实施例的一种具体实现方式中，所述利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件的步骤，可以包括：

S201，接收作用于所述网页端上的目标按钮的触控操作；

S202，将作用于所述目标按钮的触控操作透传给所述客户端；

S203，根据所述调用协议和所述触控操作，修改所述目标控件的显示内容。

本实施方式中，网页端接收作用于对应目标控件对应目标按钮的触控操作，例如作用于H5页面上日历按钮的点击操作，即可将该点击事件透传给客户端。然后客户端即可根据协议的内容确定如何实现响应的操作内容，即修改模板控件的显示内容。

进一步的，所述根据所述调用协议和所述触控操作，修改所述目标控件的显示内容的步骤，可以包括：

根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数；

调用所述目标函数，根据所述修改参数修改所述目标控件的显示内容。

具体调用过程为，先确定可调用的目标函数和修改内容，再通过调用该目标函数，利用修改参数对应修改目标控件的显示内容。下面将解释两种常用的调用方式。

在一种具体实现方式中，所述根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数的步骤，可以包括：

根据所述调用协议和所述触控操作，所述网页端生成URL请求；

所述客户端拦截所述URL请求，识别所述URL请求中包含的目标函数和修改参数。

在另一种具体实现方式中，所述根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数的步骤，包括：

根据所述调用协议获得所述客户端与所述网页端之间的映射表；

利用所述映射表，确定所述触控操作对应的目标函数和修改参数。

此外，根据本公开实施例的一种具体实现方式，所述修改所述目标控件的显示内容的步骤之后，所述方法还可以包括：

控制所述客户端回调完成事件至所述网页端。

下面将提供一种具体示例来解释日历滚动控件的开发过程。

打开时间选择器；

H5网页通过调用方法：

appAD.app.showActionDatetimePicker(data).then(()＝>{})；

其中的showActionDatetimePicker是表示客户端应该调起哪种方法，

传递到客户端的参数：

当日历滚动控件点击完成时，会给H5页面回调个完成事件，使用'changePicker’用于区分哪种回调事件

以下是传递给H5页面的参数格式

上述本公开实施例提供的应用程序的控件开发方法，在原生开发方案和H5的混合开发框架中，针对需要日历滚动控件的业务场景，采用原生开发方案开发日历滚动控件，约定日历滚动控件与H5之间的交互协议，在H5里调用日历滚动控件。即可以解决H5在某些方面的缺点又可以利用H5快速更新迭代的特性。

与上面的方法实施例相对应，参见图3，本公开实施例还提供了一种应用程序的控件开发装置30，包括：

第一确定模块301，用于确定应用程序中待开发的目标控件。

本实施例提供的应用程序的控件开发方法，用于开发应用程序的控件，例如日历滚动控件、悬浮显示控件、皮肤切换控件等。将应用程序中当前待开发的控件为目标控件。可选的，本实施例中，所述目标控件为日历滚动控件，以目标控件为日历滚动控件来解释说明控件开发过程。

可选的，所述应用程序所运行的移动操作***为IOS***或者Android***。

开发模块302，用于采用原生开发方案在客户端开发所述目标控件。

确定待开发的目标控件后，先采用原生开发方案在客户端开发该目标控件。其中，原生开发方案是指在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行应用程序的开发。比如Android是利用Java、Eclipse、Android studio，IOS是利用Objective-C和X-code进行开发。利用官方提供的语言和工具并且能够直接操控硬件设备，比如多点触控、NFC、读取短信等，在应用性能上和交互体验上具有较大优势。

第二确定模块303，用于确定所述客户端与网页端之间的关于所述目标控件的调用协议。

在客户端开发目标控件后，即可确定通过网页端调用客户端的该目标控件的调用协议。可选的，所述网页端为可以H5网页端，所述调用协议可以为Js Bridge协议。

其中，所谓H5，即HTML5，是指HTML的第5个版本，而HTML则是指描述网页的标准语言。描述网页的标准语言，其实就是网页文件的格式。H5具有快速更新迭代的特性。

Js Bridge协议是原生开发方案的Native代码与Js代码的通信桥梁，可以在H5网页端触发URL Scheme后，Native捕获URL Scheme，再通过原生分析，进而执行通过原生调用H5的目的。

调用模块304，用于利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。

依据上述方案确定客户端和H5网页端之间的调用协议后，即可实现根据网页端的用户操作，调用客户端的目标控件的目的。

图3所示装置可以对应的执行上述方法实施例中的内容，本实施例未详细描述的部分，参照上述方法实施例中记载的内容，在此不再赘述。

参见图4，本公开实施例还提供了一种电子设备40，该电子设备包括：

至少一个处理器；以及，

与该至少一个处理器通信连接的存储器；其中，

该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述方法实施例中的应用程序的控件开发方法。

本公开实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述方法实施例中的应用程序的控件开发方法。

本公开实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述方法实施例中的的应用程序的控件开发方法。

下面参考图4，其示出了适于用来实现本公开实施例的电子设备40的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图4所示，电子设备40可以包括处理装置(例如中央处理器、图形处理器等)401，其可以根据存储在只读存储器(ROM)402中的程序或者从存储装置408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有电子设备40操作所需的各种程序和数据。处理装置401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

通常，以下装置可以连接至I/O接口405：包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置409。通信装置409可以允许电子设备40与其他设备进行无线或有线通信以交换数据。虽然图中示出了具有各种装置的电子设备40，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从ROM 402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备可以执行上述实施例提供的应用程序的控件开发方法。

或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备可以执行上述实施例提供的应用程序的控件开发方法。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。

应当理解，本公开的各部分可以用硬件、软件、固件或它们的组合来实现。

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

Claims (13)

1.一种应用程序的控件开发方法，其特征在于，包括：

确定应用程序中待开发的目标控件；

采用原生开发方案在客户端开发所述目标控件；

确定所述客户端与网页端之间的关于所述目标控件的调用协议；

利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。

2.根据权利要求1所述的方法，其特征在于，所述目标控件为日历滚动控件。

3.根据权利要求2所述的方法，其特征在于，所述网页端为H5网页端。

4.根据权利要求3所述的方法，其特征在于，所述调用协议为Js Bridge协议。

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件的步骤，包括：

接收作用于所述网页端上的目标按钮的触控操作；

将作用于所述目标按钮的触控操作透传给所述客户端；

根据所述调用协议和所述触控操作，修改所述目标控件的显示内容。

6.根据权利要求5所述的方法，其特征在于，所述根据所述调用协议和所述触控操作，修改所述目标控件的显示内容的步骤，包括：

根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数；

调用所述目标函数，根据所述修改参数修改所述目标控件的显示内容。

7.根据权利要求5述的方法，其特征在于，所述修改所述目标控件的显示内容的步骤之后，所述方法还包括：

控制所述客户端回调完成事件至所述网页端。

8.根据权利要求6所述的方法，其特征在于，所述根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数的步骤，包括：

根据所述调用协议和所述触控操作，所述网页端生成URL请求；

所述客户端拦截所述URL请求，识别所述URL请求中包含的目标函数和修改参数。

9.根据权利要求6所述的方法，其特征在于，所述根据所述调用协议和所述触控操作，确定可调用的目标函数和修改参数的步骤，包括：

根据所述调用协议获得所述客户端与所述网页端之间的映射表；

利用所述映射表，确定所述触控操作对应的目标函数和修改参数。

10.根据权利要求1所述的方法，其特征在于，所述应用程序所运行的移动操作***为IOS***或者Android***。

11.一种应用程序的控件开发装置，其特征在于，包括：

第一确定模块，用于确定应用程序中待开发的目标控件；

开发模块，用于采用原生开发方案在客户端开发所述目标控件；

第二确定模块，用于确定所述客户端与网页端之间的关于所述目标控件的调用协议；

调用模块，用于利用所述调用协议，根据所述网页端接收的输出操作，调用所述目标控件。

12.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行前述权利要求1-10中任一项所述的应用程序的控件开发方法。

13.一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述权利要求1-10中任一项所述的应用程序的控件开发方法。

Images