基于HTML5的应用程序的打包方法、系统和可读介质

摘要

本申请提供了一种基于HTML5的应用程序的打包方法、系统和计算机可读介质。该方法包括：通过软件包管理器在待打包的HTML5应用中安装依赖库，依赖库用于使打包后的HTML5应用具有原生交互能力，原生交互能力包括以下任意一项或多项：页面跳转、支付和分享；在HTML5应用中引入依赖库；在HTML5应用中初始化依赖库；将HTML5应用编译成静态资源文件；以及通过HTML5开发工具将静态资源文件打包生成HTML5应用的应用程序安装包。该方法通过在套壳APP的基础上添加了作为一层中间层的依赖库，使得打包生成的APP具有原生交互能力。

说明书

技术领域

本申请主要涉及软件技术领域，尤其涉及一种基于HTML5的应用程序的打包方法、系统和计算机可读介质。

背景技术

应用程序(APP)开发通常有原生、混合(hybrid)、套壳三种方式。

原生开发方式针对不同的操作系统需要采用不同的语言与框架进行开发，优点是手机上的功能可以全部访问，权限比较大，并且响应速度快。

混合开发方式的主要特点是使用网页(web)技术开发用户界面(UI)，跑在APP的网页视图(webview)里，使用APP的原生应用程序编程接口(API)操作设备。

套壳方案开发成本最低，但体验较差，一般无法获得APP原生的能力。套壳APP是调用原生网页视图来渲染网页APP的打包方式，通常这种打包方式简单快捷，开发成本低。但与原生APP相比，用户交互体验较差，页面跳转流畅性不佳，无法使用移动设备上的独特功能。因此，如何在套壳APP的基础上让APP获取原生的能力是本领域技术人员亟需解决的问题。

发明内容

本申请要解决的技术问题是提供一种基于HTML5的应用程序的打包方法、系统和计算机可读介质，能够在套壳APP的基础上让APP获取原生的能力。

为解决上述技术问题，本申请提供了一种基于HTML5的应用程序的打包方法，包括：通过软件包管理器在待打包的HTML5应用中安装依赖库，所述依赖库用于使打包后的所述HTML5应用具有原生交互能力，所述原生交互能力包括以下任意一项或多项：页面跳转、支付和分享；在所述HTML5应用中引入所述依赖库；在所述HTML5应用中初始化所述依赖库；将所述HTML5应用编译成静态资源文件；以及通过HTML5开发工具将所述静态资源文件打包生成所述HTML5应用的应用程序安装包。

在本申请的一实施例中，当所述原生交互能力包括分享时，所述依赖库封装有用于对接原生分享的分享业务组件。

在本申请的一实施例中，所述分享业务组件用于：当用户在所述HTML5应用中进行分享操作时，接收所述HTML5应用传入的分享参数，所述分享参数包括以下任意一项或多项：分享标题、海报图片和分享的跳转链接；以及基于所述分享参数生成相应的分享海报。

在本申请的一实施例中，当所述原生交互能力包括支付时，所述依赖库封装有用于对接原生支付的支付方法。

在本申请的一实施例中，所述支付方法用于：当用户在所述HTML5应用中进行支付操作时，接收所述HTML5应用传入的支付参数；以及基于所述支付参数调用相应的支付应用程序进行支付。

在本申请的一实施例中，当所述原生交互能力包括页面跳转时，在执行所述HTML5应用中初始化所述依赖库后，所述HTML5应用中的跳转方法被重载为所述依赖库中的跳转方法。

在本申请的一实施例中，所述依赖库中的跳转方法用于：当用户在所述HTML5应用中进行页面跳转操作时，创建一个新的网页视图来加载所述HTML5应用的路由地址。

在本申请的一实施例中，所述依赖库中的跳转方法还用于：当所述网页视图的数量达到预设阈值或当切换到所述HTML5应用的工具栏对应的网页视图时，通过页面栈销毁非当前标签所对应的网页视图。

为解决上述技术问题，本申请还提供了一种基于HTML5的应用程序的打包系统，包括：存储器，用于存储可由处理器执行的指令；以及处理器，用于执行所述指令以实现如上所述的方法。

为解决上述技术问题，本申请还提供了一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如上所述的方法。

与现有技术相比，本申请的一种基于HTML5的应用程序的打包方法、系统和计算机可读介质通过在套壳APP的基础上添加了作为一层中间层的依赖库，能够在不需要修改HTML5应用代码的情况下，使得打包生成的APP具有原生交互能力。

附图说明

包括附图是为提供对本申请进一步的理解，它们被收录并构成本申请的一部分，附图示出了本申请的实施例，并与本说明书一起起到解释本申请原理的作用。附图中：

图1是根据本申请一实施例示出的基于HTML5的应用程序的打包方法的流程示意图。

图2是根据本申请一实施例示出的基于HTML5的应用程序的打包系统的系统框图。

具体实施方式

为了更清楚地说明本申请的实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单的介绍。显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。除非从语言环境中显而易见或另做说明，图中相同标号代表相同结构或操作。

如本申请和权利要求书中所示，除非上下文明确提示例外情形，“一”、“一个”、“一种”和/或“该”等词并非特指单数，也可包括复数。一般说来，术语“包括”与“包含”仅提示包括已明确标识的步骤和元素，而这些步骤和元素不构成一个排它性的罗列，方法或者设备也可能包含其他的步骤或元素。

除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本申请的范围。同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为授权说明书的一部分。在这里示出和讨论的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它示例可以具有不同的值。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本申请中使用了流程图用来说明根据本申请的实施例的系统所执行的操作。应当理解的是，前面或下面操作不一定按照顺序来精确地执行。相反，可以按照倒序或同时处理各种步骤。同时，或将其他操作添加到这些过程中，或从这些过程移除某一步或数步操作。

本申请提供了一种基于HTML5的应用程序的打包方法。图1是根据本申请一实施例示出的基于HTML5的应用程序的打包方法的流程示意图。如图1所示，以应用于基于HTML5的应用程序的打包系统为例，本实施例的基于HTML5的应用程序的打包方法包括以下步骤101-105：

步骤101，通过软件包管理器在待打包的HTML5应用中安装依赖库。依赖库又可称为依赖包或核心库。在一个示例中，软件包管理器可以为node包管理器(NPM,Node PackageManager)。依赖库用于使打包后的HTML5应用具有普通套壳APP所不具有的原生交互能力。原生交互能力包括以下任意一项或多项：页面跳转、支付和分享。

在本申请的一实施例中，当原生交互能力包括分享时，依赖库可以封装有用于对接原生分享的分享业务组件。分享业务组件可以封装有海报生成方法和与各种分享方式(例如微信朋友圈、小程序)所对应的分享方法。在本申请的一实施例中，当用户在HTML5应用中进行分享操作时，分享业务组件可以接收HTML5应用传入的分享参数，然后基于分享参数生成相应的分享海报。分享参数可以包括分享标题、海报图片和分享的跳转链接中的任意一项或多项。在一示例中，在HTML5应用页面加载完成后，响应于用户的分享操作，调用依赖库中的分享模块的分享方法来初始化分享海报，通过分享接口传入需要分享标题、海报图片和分享的跳转链接。当用户在页面中通过点击分享海报的时候，在对应的点击事件中调用依赖库中的分享模块的打开分享方法生成分享海报。

在本申请的一实施例中，当原生交互能力包括支付时，依赖库可以封装有用于对接原生支付的支付方法。在本申请的一实施例中，当用户在HTML5应用中进行支付操作时，支付方法可以接收HTML5应用传入的支付参数，然后基于支付参数调用相应的支付应用程序进行支付。支付参数可以用于标识所使用的第三方支付软件。在一示例中，在HTML5应用页面加载完成后，响应于用户的支付操作，调用依赖库中的支付模块的支付方法，通过支付接口传入支付参数，调用与支付参数相对应的第三方支付软件进行支付。

在本申请的一实施例中，当原生交互能力包括页面跳转时，在执行HTML5应用中初始化依赖库后，HTML5应用中的跳转(navigateTo)方法可以被重载为依赖库中的跳转方法。在本申请的一实施例中，当用户在HTML5应用中进行页面跳转操作时，依赖库中的跳转方法可以创建一个新的网页视图来加载HTML5应用的路由地址。与普通套壳APP的跳转方法来跳转页面相比，本实施例通过调用重载的依赖库中的跳转方法来开启新的网页视图，能够流畅地进行页面切换，大幅度地提升了用户使用体验。

在本申请的一实施例中，当网页视图的数量达到预设阈值或当切换到HTML5应用的工具栏对应的网页视图时，依赖库中的跳转方法还可以通过页面栈销毁非当前标签(tab)所对应的网页视图。通过维护一个页面栈来实现自动回收垃圾页面，能够保证内存开销不会过大。

步骤102，在HTML5应用中引入(import)依赖库。

步骤103，在HTML5应用中初始化依赖库。

步骤104，将HTML5应用编译成静态资源文件。在一示例中，可以通过npm runbuild来将HTML5应用编译成静态资源文件。

步骤105，通过HTML5开发工具将静态资源文件打包生成HTML5应用的应用程序安装包。在一示例中，HTML5开发工具可以为hbuilderx。应用程序安装包可以为apk文件或ipa文件。

综上所述，本申请实施例的基于HTML5的应用程序的打包方法通过在套壳APP的基础上添加了作为一层中间层的依赖库，能够在不需要修改HTML5应用代码的情况下，使得打包生成的APP具有原生交互能力。

本申请还提供了一种基于HTML5的应用程序的打包系统，包括：存储器，用于存储可由处理器执行的指令；以及处理器，用于执行所述指令以实现如上所述的方法。

图2是根据本申请一实施例示出的基于HTML5的应用程序的打包系统的系统框图。基于HTML5的应用程序的打包系统200可包括内部通信总线201、处理器(Processor)202、只读存储器(ROM)203、随机存取存储器(RAM)204、以及通信端口205。当应用在个人计算机上时，基于HTML5的应用程序的打包系统200还可以包括硬盘207。内部通信总线201可以实现基于HTML5的应用程序的打包系统200组件间的数据通信。处理器202可以进行判断和发出提示。在一些实施例中，处理器202可以由一个或多个处理器组成。通信端口205可以实现基于HTML5的应用程序的打包系统200与外部的数据通信。在一些实施例中，基于HTML5的应用程序的打包系统200可以通过通信端口205从网络发送和接受信息及数据。基于HTML5的应用程序的打包系统200还可以包括不同形式的程序储存单元以及数据储存单元，例如硬盘207，只读存储器(ROM)203和随机存取存储器(RAM)204，能够存储计算机处理和/或通信使用的各种数据文件，以及处理器202所执行的可能的程序指令。处理器执行这些指令以实现方法的主要部分。处理器处理的结果通过通信端口传给用户设备，在用户界面上显示。

上述的基于HTML5的应用程序的打包方法可以实施为计算机程序，保存在硬盘207中，并可加载到处理器202中执行，以实施本申请中的任一种基于HTML5的应用程序的打包方法。

本实施例的基于HTML5的应用程序的打包系统的其他实施细节可参考图1所描述的方法实施例，在此不再展开描述。

本申请还提供了一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如上所述的方法。

基于HTML5的应用程序方法实施为计算机程序时，也可以存储在计算机可读存储介质中作为制品。例如，计算机可读存储介质可以包括但不限于磁存储设备(例如，硬盘、软盘、磁条)、光盘(例如，压缩盘(CD)、数字多功能盘(DVD))、智能卡和闪存设备(例如，电可擦除可编程只读存储器(EPROM)、卡、棒、键驱动)。此外，本文描述的各种存储介质能代表用于存储信息的一个或多个设备和/或其它机器可读介质。术语“机器可读介质”可以包括但不限于能存储、包含和/或承载代码和/或指令和/或数据的无线信道和各种其它介质(和/或存储介质)。

上文已对基本概念做了描述，显然，对于本领域技术人员来说，上述申请披露仅仅作为示例，而并不构成对本申请的限定。虽然此处并没有明确说明，本领域技术人员可能会对本申请进行各种修改、改进和修正。该类修改、改进和修正在本申请中被建议，所以该类修改、改进、修正仍属于本申请示范实施例的精神和范围。

同时，本申请使用了特定词语来描述本申请的实施例。如“一个实施例”、“一实施例”、和/或“一些实施例”意指与本申请至少一个实施例相关的某一特征、结构或特点。因此，应强调并注意的是，本说明书中在不同位置两次或多次提及的“一实施例”或“一个实施例”或“一替代性实施例”并不一定是指同一实施例。此外，本申请的一个或多个实施例中的某些特征、结构或特点可以进行适当的组合。

本申请的方法和系统的一些方面可以完全由硬件执行、可以完全由软件(包括固件、常驻软件、微码等)执行、也可以由硬件和软件组合执行。以上硬件或软件均可被称为“数据块”、“模块”、“引擎”、“单元”、“组件”或“系统”。处理器可以是一个或多个专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理器件(DAPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、处理器、控制器、微控制器、微处理器或者其组合。此外，本申请的各方面可能表现为位于一个或多个计算机可读介质中的计算机产品，该产品包括计算机可读程序编码。例如，计算机可读介质可包括，但不限于，磁性存储设备(例如，硬盘、软盘、磁带……)、光盘(例如，压缩盘(CD)、数字多功能盘(DVD)……)、智能卡以及闪存设备(例如，卡、棒、键驱动器……)。

计算机可读信号介质可能包含一个内含有计算机程序编码的传播数据信号，例如在基带上或作为载波的一部分。该传播信号可能有多种表现形式，包括电磁形式、光形式等等、或合适的组合形式。计算机可读信号介质可以是除计算机可读存储介质之外的任何计算机可读介质，该介质可以通过连接至一个指令执行系统、装置或设备以实现通讯、传播或传输供使用的程序。位于计算机可读信号介质上的程序编码可以通过任何合适的介质进行传播，包括无线电、电缆、光纤电缆、射频信号、或类似介质、或任何上述介质的组合。

本申请各部分操作所需的计算机程序编码可以用任意一种或多种程序语言编写，包括面向对象编程语言如Java、Scala、Smalltalk、Eiffel、JADE、Emerald、C++、C#、VB.NET、Python等，常规程序化编程语言如C语言、Visual Basic、Fortran 2003、Perl、COBOL 2002、PHP、ABAP，动态编程语言如Python、Ruby和Groovy，或其他编程语言等。该程序编码可以完全在用户计算机上运行、或作为独立的软件包在用户计算机上运行、或部分在用户计算机上运行部分在远程计算机运行、或完全在远程计算机或服务器上运行。在后种情况下，远程计算机可以通过任何一种网络形式与用户计算机连接，比如局域网(LAN)或广域网(WAN)，或连接至外部计算机(例如通过因特网)，或在云计算环境中，或作为服务使用如软件即服务(SaaS)。

此外，除非权利要求中明确说明，本申请所述处理元素和序列的顺序、数字字母的使用、或其他名称的使用，并非用于限定本申请流程和方法的顺序。尽管上述披露中通过各种示例讨论了一些目前认为有用的申请实施例，但应当理解的是，该类细节仅起到说明的目的，附加的权利要求并不仅限于披露的实施例，相反，权利要求旨在覆盖所有符合本申请实施例实质和范围的修正和等价组合。例如，虽然以上所描述的系统组件可以通过硬件设备实现，但是也可以只通过软件的解决方案得以实现，如在现有的服务器或移动设备上安装所描述的系统。

同理，应当注意的是，为了简化本申请披露的表述，从而帮助对一个或多个申请实施例的理解，前文对本申请实施例的描述中，有时会将多种特征归并至一个实施例、附图或对其的描述中。但是，这种披露方法并不意味着本申请对象所需要的特征比权利要求中提及的特征多。实际上，实施例的特征要少于上述披露的单个实施例的全部特征。

在一些实施例中使用了描述成分、属性数量的数字，应当理解的是，此类用于实施例描述的数字，在一些示例中使用了修饰词“大约”、“近似”或“大体上”来修饰。除非另外说明，“大约”、“近似”或“大体上”表明所述数字允许有±20％的变化。相应地，在一些实施例中，说明书和权利要求中使用的数值参数均为近似值，该近似值根据个别实施例所需的特点可以发生改变。在一些实施例中，数值参数应考虑规定的有效数位，并采用一般位数保留的方法。尽管本申请的一些实施例中用于确认其范围广度的数值域和参数为近似值，在具体实施例中，此类数值的设定在可行范围内尽可能精确。

虽然本申请已参照当前的具体实施例来描述，但是本技术领域中的普通技术人员应当认识到，以上的实施例仅是用来说明本申请，在没有脱离本申请精神的情况下还可做出各种等效的变化或替换，因此，只要在本申请的实质精神范围内对上述实施例的变化、变型都将落在本申请的权利要求书的范围内。