CN114579182A - 小程序跨端应用方法、相关装置、及计算机存储介质 - Google Patents

Abstract

本申请提供一种小程序跨端应用方法、相关装置、及计算机存储介质，该方法可以包括：获取目标小程序包含的多个页面；确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；将每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；基于可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；基于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成目标小程序包含的多个页面分别在第二应用程序中对应的页面。本申请实施例可以实现一码多端，即不同平台用一套代码实现目标小程序的相关功能。

Description

小程序跨端应用方法、相关装置、及计算机存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种小程序跨端应用方法、相关装置、及计算机存储介质。

背景技术

“用完即走”的理念引发了一波小程序浪潮，小程序出色的使用体验，便捷的传播方式，丰富的组件应用程序编程接口(Application Programming Interface，API)带来的开发效率的提升，吸引了一大批小程序拥趸。但小程序的设计并没有完全遵循浏览器或其他应用程序等应用端中页面的规范，导致小程序生态和传统网页开发生态之间的无法自由转换。

发明内容

本申请提供了一种小程序跨端应用方法、相关装置、及计算机存储介质。

第一方面，本申请提供了一种小程序跨端应用方法，所述方法包括：

获取目标小程序包含的多个页面；所述目标小程序搭载于第一应用程序；

确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；

将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；

基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；所述第一应用程序与所述第二应用程序不同；

基于所述第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成所述目标小程序包含的多个页面分别在所述第二应用程序中对应的页面。

第二方面，本申请提供了一种小程序跨端应用装置，所述装置包括：

获取模块，用于获取目标小程序包含的多个页面；所述目标小程序搭载于第一应用程序；

确定模块，用于确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；

转换模块，用于将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；

第一生成模块，用于基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；所述第一应用程序与所述第二应用程序不同；

第二生成模块，用于基于所述第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成所述目标小程序包含的多个页面分别在所述第二应用程序中对应的页面。

第三方面，说明书一个或多个实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。

第四方面，本申请提供一种电子设备，可包括：处理器和存储器；

其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。

本申请一些实施例提供的技术方案带来的有益效果至少包括：

本申请实施例通过获取目标小程序包含的多个页面；确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；将每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；基于可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；基于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成目标小程序包含的多个页面分别在第二应用程序中对应的页面。由此，本申请实施例可以通过可识别码将目标小程序页面中的各项信息转换为浏览器或其他app平台中小程序可直接生成的页面信息，这样就可以实现一码多端，即不同平台用一套代码实现目标小程序的相关功能。

附图说明

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

图1a为本申请提供的一个小程序的页面示意图；

图1b为本申请提供的一个浏览器的网页示意图；

图2为本申请提供的一种小程序跨端应用方法的流程示意图；

图3为本申请提供的另一种小程序跨端应用方法的流程示意图；

图4为本申请提供的第一可识别码的编译过程的示意图；

图5为本申请提供的第二可识别码的编译过程的示意图；

图6示出了小程序与React代码之间的生命周期对应关系图

图7为本申请提供的一种小程序跨端应用方法的应用场景图；

图8为本申请提供的又一种小程序跨端应用方法的流程示意图；

图9为本申请提供的一种小程序跨端应用方法的生成网页的过程示意图；

图10为本申请实施例提供的一种小程序跨端应用装置的结构示意图；

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

具体实施方式

下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。此外，在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

参见图1a和图1b。图1a示出了一个应用程序(Application，APP)中预定外卖等事务场景的小程序，图1b示出了将该预定外卖等事务场景的小程序投放到浏览器时生成的网页Web。可以观察到的是，图1a中小程序的事务场景功能(例如，搜索、综合排序)和事务场景类别(外卖、蔬菜水果、饮品等模块)被对应转换到图1b的网页web中。可以理解的是，由于显示尺寸的不同，图1b的网页web中会展示更多的事务场景功能(例如，口味、起送价等)和事务场景类别(例如，热门餐厅、是否营业等)。

可以理解的是，由于小程序的设计规范没有遵循Web规范，因此，它们之间使用的代码也存在差异。此外，当其他APP需要通过本地页面调用预定外卖等事务场景的小程序时，它们之间容器端使用的代码也需要转换。因此，需要对不同容器端编写对应的多套代码进行支撑，这样就会存在研发效率低下，维护成本成倍增加等问题。

为了抹平小程序与网页Web之间的开发技术差异，小程序在不同平台之间的跨端解决方法应运而生。具体地，本申请可以通过编写一套公共代码，使其可以转换成各平台的应用，例如，小程序、Web H5、React Native(简称RN)等。其中，小程序应用是基于容器端提供的开发框架、组件、API开发的应用，其仅限于投放指定容器。Web H5应用是基于Html5开发的网页应用程序，可以投放在任意浏览器。RN是Facebook公司于2015年4月开源的跨平台移动应用开发框架，其使用Javascript语言并支持iOS和安卓两大平台。

接下来结合图1a提供的小程序的页面示意图和图1b提供的浏览器的网页示意图来介绍本申请提供的小程序跨端应用方法。

在本申请中，图2所示，提供了一种小程序跨端应用方法的流程示意图。如图2所示，该小程序跨端应用方法可以包括如下步骤：

步骤201，获取目标小程序包含的多个页面。

其中，本申请实施例中的目标小程序搭载于第一应用程序。

可以理解的是，小程序为一种不需要下载安装即可使用的应用。

具体地，本申请实施例中的目标小程序用于表示在第一应用程序中可以使用的其他应用。例如，在即时通信应用中使用点餐功能的小程序。

进一步地，用户还可以通过目标小程序进入多个不同的页面，以满足用户的需求。例如，图1a中所示的页面，或进一步地点击图1a页面中所示的商家(麦乐送)进入该商家所在的具体页面进行点餐。

步骤202，确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息。

其中，本申请实施例中的页面节点信息用于表示页面中的文字、图片等用户可以直接观察到的信息。节点展示信息用于表示页面中文字、图片等大小、颜色等信息。逻辑管理信息用于表示页面的初始化、渲染、更新、销毁等信息。

例如，图1a中“蔬菜水果”和其标识即为页面节点信息，“蔬菜水果”文字的大小和颜色即为节点展示信息，对页面中节点可以进行的操作，例如，点击操作、滑动或滚动操作等，即为逻辑管理信息。

步骤203，将每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码。

可以理解的是，本申请实施例需要一个打包工具将前端应用的每一个模块组合成一个或者多个软件包bundles，但该打包工具可能只能识别某一种语言，因此需要将编译语言进行转换。例如，webpack是一个用于javascript应用程序的静态模块打包工具，loader是webpack的核心模块，webpack只能理解JavaScript和json文件，其他文件则需要有对应的loader转换。具体地，loader起到了一个翻译官的作用，会其他类型的文件转成webpack能够识别的文件内容(JavaScript)。

例如，目前支付宝小程序用于框架设计使用的标签语言是AXML，它可以对小程序的页面结构进行描述。因此在其他APP采用的设计语言不是AXML的情况下，无法对其进行识别。因此，需要利用loader将支付宝等小程序中的代码转化为银行APP可以直接识别的代码。

可能地，本申请实施例中的可识别代码可以是React或Vue代码。其中，React代码是可以用于构建用户界面的JavaScript库。具体地，可以在React里传递多种类型的参数，如声明代码，进而渲染出页面、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。Vue也是一套用于构建用户界面的渐进式JavaScript框架。

步骤204，基于可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息。

其中，本申请实施例中的第一应用程序与第二应用程序不同。

具体地，本申请实施例第二应用程序可以是其它电子设备的浏览器或其他应用程序，也可以是同一个电子设备的浏览器或其他应用程序。例如，第二应用程序可以是商家的点单程序，比如某餐厅内的自动点单机，也可以用户的平板电脑等设备，或者也可以是用户手机端的其他APP，例如购物类的APP。

步骤205，基于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成目标小程序包含的多个页面分别在第二应用程序中对应的页面。

可以理解的是，由于不同电子设备的尺寸等原因，本申请实施例中第一应用程序中页面的页面节点信息和节点展示信息对应转换到第二应用程序中页面的页面节点信息和节点展示信息可能相同也可能不同。

在一个具体的例子中，用户需要从银行Z的APP参与外卖点单优惠活动，如果直接从该银行的APP端参与满减活动，就需要该银行APP可以在其客户端显示外卖等事务场景的页面，因此，需要wepack打包工具中的loader模块，将支付宝小程序中的代码转换为该银行APP可以直接识别的代码，进一步地，基于可识别代码确定页面的页面节点信息、节点展示信息、以及逻辑管理信息后，即可生成支付宝中点餐小程序包含的多个页面分别在银行APP中对应的页面。

本申请实施例通过获取目标小程序包含的多个页面；确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；将每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；基于可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；基于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成目标小程序包含的多个页面分别在第二应用程序中对应的页面。由此，本申请实施例可以通过可识别码将目标小程序页面中的各项信息转换为浏览器或其他app平台中小程序可直接生成的页面信息，这样就可以实现一码多端，即不同平台用一套代码实现目标小程序的相关功能。

在本申请中的可识别码可以包括第一可识别码、第二可识别码、以及第三可识别码。图3所示，提供了一种小程序跨端应用方法的流程示意图。如图3所示，该小程序跨端应用方法可以包括如下步骤：

步骤301，获取目标小程序包含的多个页面。

具体地，步骤301与步骤201一致，此处不再赘述。

步骤302，确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息。

具体地，步骤302与步骤202一致，此处不再赘述。

步骤303，将每个页面的页面节点信息转换为第一可识别码，将每个页面的节点展示信息转换为第二可识别码；将每个页面的逻辑管理信息转换为第三可识别码。

具体地，本申请实施例中的第一可识别码用于将小程序中页面的页面节点信息的代码转换为网页web或其他APP可识别的代码。

进一步地，本申请实施例可以基于每个页面的页面节点信息生成文档树。基于文档树中每个节点的节点类型和节点属性生成第一语法树。基于第一语法树生成第一可识别码。其中，文档树可以包括多个层级。每个层级可以包括至少一个节点，每个节点可以包括节点类型和节点属性。第一语法树用于将小程序使用的语法转换为第二应用程序使用的语法。

例如，节点类型可以是：循环节点ForElementNode(a:for节点)、条件节点IfElementNode(a:if节点)等等。节点属性可以是：AttributeNode(普通属性)、EventAttributeNode(事件属性)等等。

可能地，本申请实施例中第一应用程序中的小程序可以采用axml文件对页面节点信息进行编译。

具体地，参见图4，图4示出了axml文件到React代码的编译过程。具体地，本申请实施例主要是将小程序中的axml语法编译成jsx中的render渲染函数。首先，本申请实施例可以将axml文件通过sax(xml解析器)转换成xml文档树。再将xml文档树，转换成小程序的ast语法树。最后，利用babel generate转换工具将小程序ast语法树转换成React渲染函数。

可以理解的是，xml文档树是先把页面中文字和图片等节点信息编辑成树结构。再基于树结构中每个节点的类型和属性生成ast语法树，该语法树可以实现axml文件的语法和jsx代码语法的互换。

进一步地，基于每个页面的节点展示信息确定第二语法树；基于第二语法树生成第二可识别码。其中，第二语法树用于将节点展示信息中的像素转换为第二应用程序的页面节点中的像素。

可能地，本申请实施例中第一应用程序中的小程序可以采用acss文件对节点展示信息进行编译。

具体地，参见图5，图5所示的acss文件的编译过程，该编译过程采用postcss完成了从acss到css的编译，即通过ast语法树将acss文件中的像素转为css文件中的像素，此外，为了对不同应用程序之间的标签名称进行区分，还对标签样式的重命名。

例如，本申请实施例可以采用postcss-rpxtorem插件，将小程序像素单位rpx编译成rem(ast语法树中根节点的字体尺寸Font-size默认为16px)，若小程序中页面中节点元素宽度为a，计算得到的rem值为a/16。进一步地，假设在小程序中节点的对应的标签是view，则可以在React代码中设置对应的标签是Tiga-view。

进一步地，本申请实施例中的逻辑管理信息可以包括：页面生命周期和页面操作信息。页面生命周期用于表示对页面的初始化、渲染、数据更新、再次渲染、销毁等过程预设的时间。页面操作信息用于表示用户输入的操作(例如，点击节点等)或后端预先设置的操作(例如，开机广告等)。

具体地，本申请实施例可以基于页面生命周期确定多个组件模块。确定页面操作信息与每个组件模块中多个组件之间的对应关系。基于多个组件模块和对应关系生成第三可识别码。其中，小程序中的页面生命周期和每个组件模块的生命周期相互对齐；每个组件模块可以包括预先设置的多个组件。

可以理解的是，本申请实施例可以将小程序中的每个页面看作一个组件模块(大组件)，小程序页面中的组件看作组件模块中的组件(小组件)。具体地，每个小组件可以对应实现一个功能，例如，页面中的搜索功能。

参见图6，图6示出了小程序与React代码之间的生命周期对应关系图。从图中可以观察到，小程序与React代码之间的初始化(Onlinit和Constructor)阶段、渲染完成(didMount和componentDidMount)阶段、更新完成(didUpdate和componentDidUpdate)阶段、以及页面卸载销毁(didUnmount和componentWillUnmount)阶段的周期一一对应，即执行时间相同。因此，小程序中的每个更新的页面可以看作为一个组件模块。

可以理解的是，小程序和React的生命周期虽然命名不同，但是基本触发时机是可以一一对应的。本申请实施例预先对小程序Component中生命周期做了映射，映射关系如上图。编译后的React代码在运行时，会在react生命周期中调用小程序Component生命周期函数。比如React执行到constructor函数时，调用下onInit函数，抹平生命周期上的差异。

进一步地，本申请实施例中的操作信息可以包括：事件信息和数据驱动信息。其中，事件信息用于表示用户的点击、滑动、滚动等操作信息。数据驱动信息用于表示后端设置的(例如，前端显示的5S自动结束的广告)或者用户输入的数据等信息。

具体地，本申请实施例可以通过确定事件信息和数据驱动信息与组件模块中多个组件之间的对应关系，从而确定每个组件模块中各组件实现的功能。

可能地，本申请实施例中第一应用程序中的小程序可以采用js文件对逻辑管理信息进行编译。

具体地，本申请实施例将承载小程序页面Page或者组件Component的js文件，编译成以es6 module形式导出的模块Js Component函数，以将页面Page或者组件Component全部以组件(大组件+小组件)的形式导出，然后就可以被其他APP或网页web的js文件引用。

进一步地，本申请实施例中的第三可识别码可以包括应用程序编程接口码。

具体地，本申请实施例可以通过调用事件信息对应的应用程序编程接口码，以实现事件信息对应的各组件的功能；并基于数据驱动信息对应的预设驱动设置实现数据驱动信息对应的各组件实现的功能。

可以理解的是，本申请实施例可以通过调用应用程序编程接口API中预先定义的函数或HTTP接口，来实现相应的功能。数据驱动信息是指后端预先设置的数据变化，例如，弹窗广告、页面自动跳转等。

步骤304，基于第一可识别码生成对应于第二应用程序的页面节点信息；基于第二可识别码生成对应于第二应用程序的节点展示信息；基于第三可识别码生成对应于第二应用程序的逻辑管理信息。

可以理解的是，本申请实施例在基于第一可识别码生成对应于第二应用程序的页面节点信息之前，还需要将节点对应的事件在事件数据库中进行注册(registerEvent)和绑定(bindEvents)。例如，将事件onTap转化成了$rm.registerEvent([{name:'tap'}],tiga_node_id)。其中，tiga_node_id是当前节点的id，在事件数据库中所有的节点id都是唯一的。这样在运行时通过registerEvent为当前节点注册tap事件，因为tiga_node_id的唯一性，可以为每个不同的节点都保存一份事件列表，然后在bindEvents中通过addEventListener为节点绑定事件，bindEvents方法在每次组件componentDidMount、componentDidUpdate中调用，以保证事件实时绑定到节点上。

步骤305，基于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成目标小程序包含的多个页面分别在第二应用程序中对应的页面。

进一步地，本申请实施例可以基于页面生命周期、事件信息、以及数据驱动信息中的任意一项或多项，触发第二应用程序的页面渲染功能，得到待生成页面，并基于待生成页面的页面节点信息和节点展示信息，生成小程序包含的多个页面分别在第二应用程序中对应的页面信息。

参见图7，本申请实施例中的小程序代码经过编译之后，将axml、acss、js等文件编译成模块化的React代码。其中axml转化为jsx代码，js转化为Js Component函数，acss转化为css。在Tiga的运行时，其主要解决的问题编译阶段无法抹平的差异，比如事件管理(例如注册、分发)、生命周期的对齐、数据驱动等。从图7中可以观察到，可以通过React BaseComponent管理了整个运行时Component的事件、生命周期。生命周期中会根据小程序Component的输入参数(即预先设定的参数)动态生成一个Js Component的实例。然后在JSComponent中输出数据驱动，React Base Component检测到数据变化后，通过forceUpdate触发渲染(render)，同时axml文件在编译时会被编译成React渲染(render)函数，这个函数只接受一个数据，利用该数据就可以驱动渲染出HTML。

其中，每个小程序组件的实例(JS Component)都会对应一个React BaseComponent。数据驱动(setData)是在JS Component中触发的，Tiga在React BaseComponent中维护了一个数据(data)对象，每次setData之后，React Base Component就会更新data对象，再调用forceUpdate方法来强制React代码中组件的重新渲染。

由此，本申请实施例可以通过分别对可识别码中的不同代码进行分别转换的方式，来实现页面中不同节点的对应转换。并进一步对页面的生命周期、事件管理、以及数据驱动等进行设定，以使其它APP中的小程序和网页web也可以实现相应功能的，这样就避免了将同一个事务投放网页Web和小程序等不同容器端时，需要多套代码支撑的问题，有效提高了研发效率，节省了维护成本。

在本申请中的可识别码还可以包括：页面路由码。图8所示，提供了一种小程序跨端应用方法的流程示意图。如图8所示，该小程序跨端应用方法可以包括如下步骤：

步骤801，获取目标小程序包含的多个页面。

具体地，步骤801与步骤301一致，此处不再赘述。

步骤802，确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息。

具体地，步骤802与步骤302一致，此处不再赘述。

步骤803，将每个页面的页面节点信息转换为第一可识别码，将每个页面的节点展示信息转换为第二可识别码；将每个页面的逻辑管理信息转换为第三可识别码。

具体地，步骤803与步骤303一致，此处不再赘述。

步骤804，基于第一可识别码生成对应于第二应用程序的页面节点信息；基于第二可识别码生成对应于第二应用程序的节点展示信息；基于第三可识别码生成对应于第二应用程序的逻辑管理信息。

具体地，步骤804与步骤304一致，此处不再赘述。

步骤805，基于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成目标小程序包含的多个页面分别在第二应用程序中对应的页面。

具体地，步骤805与步骤305一致，此处不再赘述。

步骤806，基于页面路由码对第二应用程序的页面信息的执行顺序进行管理。

其中，本申请实施例中的页面路由码用于支持页面保活，例如，用户在浏览器中打开网页A后，又打开了网页B，网页A保持打开状态，不会自动销毁。参见图9，图9示出了一个网页web的生成过程：小程序代码经过编译器(Tiga-Compiler)的编译之后，将axml、acss、js等文件编译成模块化的React代码。其中axml转化为jsx代码，js转化为Js Component函数，acss转化为css。编译后的React代码还包括了Tiga-runtime(生命周期)、Tiga-Api(应用程序接口)、Tiga-Components(组件)、Tiga-Router(页面路由)等四个模块。Tiga-Runtime提供了小程序在html5中的运行时功能并且提供完整的生命周期实现，事件的注册和分发，数据处理等等。Tiga-Api基于网页web生态，提供了类似支付宝小程序中我的中一系列Api可以实现的功能。Tiga-Components指的是视图view、按钮button、滚动视图scroll-view等支付宝小程序原生提供的组件。可以理解的是，Tiga的本质是将小程序的页面Page和组件Component转化为React Component，Tiga-Router负责页面的路由管理，继而实现了一个完整的React单页应用。

由此，本申请实施例可以将小程序单个页面(Page)转换到浏览器中的单个页面。再结合页面路由码，维护整个应用的页面栈数据，从而实现管理页面的创建、隐藏、展示、销毁等过程。此外，本申请实施例进一步还可以通过保存组件的渲染状态，达到页面保持活力的效果，从而在浏览器中提供了完整的小程序开发、使用体验。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

图10是本申请提供的小程序跨端应用装置的结构示意图。所述装置用于服务器，并执行本说明书上述任一实施例小程序跨端应用方法。如图10所示，该小程序跨端应用装置可以包括：

获取模块11，用于获取目标小程序包含的多个页面；所述目标小程序搭载于第一应用程序；

确定模块12，用于确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；

转换模块13，用于将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；

第一生成模块14，用于基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；所述第一应用程序与所述第二应用程序不同；

第二生成模块15，用于基于所述第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成所述目标小程序包含的多个页面分别在所述第二应用程序中对应的页面。

本申请实施例通过获取目标小程序包含的多个页面；确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；将每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；基于可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；基于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成目标小程序包含的多个页面分别在第二应用程序中对应的页面。由此，本申请实施例可以通过可识别码将目标小程序页面中的各项信息转换为浏览器或其他app平台中小程序可直接生成的页面信息，这样就可以实现一码多端，即不同平台用一套代码实现目标小程序的相关功能。

在一些实施方式中，所述可识别码包括第一可识别码、第二可识别码、以及第三可识别码；

所述转换模块13，包括：

第一转换单元，用于将所述每个页面的页面节点信息转换为所述第一可识别码；

第二转换单元，用于将所述每个页面的节点展示信息转换为所述第二可识别码；

第三转换单元，用于将所述每个页面的逻辑管理信息转换为所述第三可识别码；

所述第一生成模块14，包括：

第一生成单元，用于基于所述第一可识别码生成对应于所述第二应用程序的页面节点信息；

第二生成单元，用于基于所述第二可识别码生成对应于所述第二应用程序的节点展示信息；

第三生成单元，用于基于所述第三可识别码生成对应于所述第二应用程序的逻辑管理信息。

在一些实施方式中，所述第一转换单元，包括：

文档树生成子单元，用于基于所述每个页面的页面节点信息生成文档树；其中，所述文档树包括多个层级；其中，每个层级包括至少一个节点，每个节点包括节点类型和节点属性；

第一语法树生成单元，用于基于所述文档树中每个节点的节点类型和节点属性生成第一语法树；其中，所述第一语法树用于将小程序使用的语法转换为所述第二应用程序使用的语法；

第一可识别码生成子单元，用于基于所述第一语法树生成所述第一可识别码。

在一些实施方式中，所述第二转换单元，包括：

第二语法树确定子单元，用于基于所述每个页面的节点展示信息确定第二语法树；其中，所述第二语法树用于将所述节点展示信息中的像素转换为所述第二应用程序的页面节点中的像素；

第二可识别码生成子单元，用于基于所述第二语法树生成所述第二可识别码。

在一些实施方式中，所述逻辑管理信息包括：页面生命周期和页面操作信息；

所述第三转换单元，包括：

多个组件模块确定子单元，用于基于所述页面生命周期确定多个组件模块；其中，所述小程序中的页面生命周期和每个组件模块的生命周期相互对齐；所述每个组件模块包括预先设置的多个组件；

对应关系确定子单元，用于确定所述页面操作信息与所述每个组件模块中多个组件之间的对应关系；

第三可识别码生成子单元，用于基于所述多个组件模块和所述对应关系生成所述第三可识别码。

在一些实施方式中，所述页面操作信息包括：事件信息和数据驱动信息；

所述对应关系确定子单元，具体用于：确定所述事件信息和数据驱动信息与所述组件模块中多个组件之间的对应关系；

所述对应关系确定子单元之后，所述装置还包括：组件功能实现子单元，用于确定所述每个组件模块中各组件实现的功能。

在一些实施方式中，所述第三可识别码包括应用程序编程接口码；

所述组件功能实现子单元，具体用于：

调用所述事件信息对应的应用程序编程接口码，以实现所述事件信息对应的各组件的功能；基于所述数据驱动信息对应的预设驱动设置实现所述数据驱动信息对应的各组件实现的功能。

在一些实施方式中，所述第二生成模块15，包括：

得到单元，用于基于所述页面生命周期、所述事件信息、以及所述数据驱动信息中的任意一项或多项，触发所述第二应用程序的页面渲染功能，得到待生成页面；

页面信息生成单元，用于基于所述待生成页面的页面节点信息和所述节点展示信息，生成所述小程序包含的多个页面分别在所述第二应用程序中对应的页面信息。

在一些实施方式中，所述可识别码还包括：页面路由码；

所述第二生成模块15之后，所述装置还包括：

管理模块，用于基于所述页面路由码对所述第二应用程序的页面信息的执行顺序进行管理。

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

上述本申请序号仅仅为了描述，不代表实施例的优劣。

请参见图11，为本申请提供了一种电子设备的结构示意图。如图11所示，所述电子设备110可以包括：至少一个处理器111，至少一个网络接口114，用户接口113，存储器115，至少一个通信总线112。

其中，通信总线112用于实现这些组件之间的连接通信。

其中，用户接口113可以包括显示屏(Display)、摄像头(Camera)，可选用户接口113还可以包括标准的有线接口、无线接口。

其中，网络接口114可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。

其中，处理器111可以包括一个或者多个处理核心。处理器111利用各种借口和线路连接整个电子设备110内的各个部分，通过运行或执行存储在存储器115内的指令、程序、代码集或指令集，以及调用存储在存储器115内的数据，执行电子设备110的各种功能和处理数据。可选的，处理器111可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable Logic Array，PLA)中的至少一种硬件形式来实现。处理器111可集成中心处理器(Central Processing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作***、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器111中，单独通过一块芯片进行实现。

其中，存储器115可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器115包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器115可用于存储指令、程序、代码、代码集或指令集。存储器115可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作***的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器115可选的还可以是至少一个位于远离前述处理器111的存储装置。如图11所示，作为一种计算机存储介质的存储器115中可以包括操作***、网络通信模块、用户接口模块以及小程序跨端应用应用程序。

获取目标小程序包含的多个页面；所述目标小程序搭载于第一应用程序；

确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；

将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；

基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；所述第一应用程序与所述第二应用程序不同；

基于所述第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成所述目标小程序包含的多个页面分别在所述第二应用程序中对应的页面。

在一些实施方式中，所述可识别码包括第一可识别码、第二可识别码、以及第三可识别码；

所述处理器111在执行所述将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码时，具体执行：

将所述每个页面的页面节点信息转换为所述第一可识别码；

将所述每个页面的节点展示信息转换为所述第二可识别码；

将所述每个页面的逻辑管理信息转换为所述第三可识别码；

所述处理器111在执行所述基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息时，具体执行：

基于所述第一可识别码生成对应于所述第二应用程序的页面节点信息；

基于所述第二可识别码生成对应于所述第二应用程序的节点展示信息；

基于所述第三可识别码生成对应于所述第二应用程序的逻辑管理信息。

在一些实施方式中，所述处理器111在执行所述将所述每个页面中的页面节点信息转换为所述第一可识别码时，具体执行：

基于所述每个页面的页面节点信息生成文档树；其中，所述文档树包括多个层级；其中，每个层级包括至少一个节点，每个节点包括节点类型和节点属性；

基于所述文档树中每个节点的节点类型和节点属性生成第一语法树；其中，所述第一语法树用于将小程序使用的语法转换为所述第二应用程序使用的语法；

基于所述第一语法树生成所述第一可识别码。

在一些实施方式中，所述处理器111在执行所述将所述每个页面中的节点展示信息转换为所述第二可识别码时，具体执行：

基于所述每个页面的节点展示信息确定第二语法树；其中，所述第二语法树用于将所述节点展示信息中的像素转换为所述第二应用程序的页面节点中的像素；

基于所述第二语法树生成所述第二可识别码。

在一些实施方式中，所述逻辑管理信息包括：页面生命周期和页面操作信息；

所述处理器111在执行所述将所述每个页面的逻辑管理信息转换为所述第三可识别码时，具体执行：

基于所述页面生命周期确定多个组件模块；其中，所述小程序中的页面生命周期和每个组件模块的生命周期相互对齐；所述每个组件模块包括预先设置的多个组件；

确定所述页面操作信息与所述每个组件模块中多个组件之间的对应关系；

基于所述多个组件模块和所述对应关系生成所述第三可识别码。

在一些实施方式中，所述页面操作信息包括：事件信息和数据驱动信息；

所述处理器111在执行所述确定所述页面操作信息与所述组件模块中多个组件之间的对应关系时，具体执行：

确定所述事件信息和数据驱动信息与所述组件模块中多个组件之间的对应关系；

所述确定所述事件信息和数据驱动信息与所述组件模块中多个组件之间的对应关系之后，所述方法还包括：

确定所述每个组件模块中各组件实现的功能。

在一些实施方式中，所述第三可识别码包括应用程序编程接口码；

所述处理器111在执行所述确定所述每个组件模块中各组件实现的功能时，具体执行：

调用所述事件信息对应的应用程序编程接口码，以实现所述事件信息对应的各组件的功能；

基于所述数据驱动信息对应的预设驱动设置实现所述数据驱动信息对应的各组件实现的功能。

在一些实施方式中，所述处理器111在执行所述基于所述第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成所述小程序包含的多个页面分别在所述第二应用程序中对应的页面信息时，具体执行：

基于所述页面生命周期、所述事件信息、以及所述数据驱动信息中的任意一项或多项，触发所述第二应用程序的页面渲染功能，得到待生成页面；

基于所述待生成页面的页面节点信息和所述节点展示信息，生成所述小程序包含的多个页面分别在所述第二应用程序中对应的页面信息。

所述可识别码还包括：页面路由码；

所述处理器111在执行所述生成所述目标小程序包含的多个页面分别在所述第二应用程序中对应的页面之后，还执行：

基于所述页面路由码对所述第二应用程序的页面信息的执行顺序进行管理。

本申请还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机或处理器上运行时，使得计算机或处理器执行上述图2-图2、图3、以及图8所示实施例中的一个或多个步骤。上述小程序跨端应用装置的各组成模块如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在所述计算机可读取存储介质中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者通过所述计算机可读存储介质进行传输。所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(Digital Subscriber Line，DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，数字多功能光盘(Digital Versatile Disc，DVD))、或者半导体介质(例如，固态硬盘(Solid State Disk，SSD))等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。而前述的存储介质包括：制度存储器(Read Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可存储程序代码的介质。在不冲突的情况下，本实施例和实施方案中的技术特征可以任意组合。

以上所述的实施例仅仅是本申请的优选实施例方式进行描述，并非对本申请的范围进行限定，在不脱离本申请的设计精神的前提下，本领域普通技术人员对本申请的技术方案作出的各种变形及改进，均应落入本申请的权利要求书确定的保护范围内。

Claims (10)

1.一种小程序跨端应用方法，其特征在于，所述方法包括：

获取目标小程序包含的多个页面；所述目标小程序搭载于第一应用程序；

确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；

将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；

基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；所述第一应用程序与所述第二应用程序不同；

基于所述第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成所述目标小程序包含的多个页面分别在所述第二应用程序中对应的页面。

2.根据权利要求1所述的方法，其特征在于，所述可识别码包括第一可识别码、第二可识别码、以及第三可识别码；

所述将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码，包括：

将所述每个页面的页面节点信息转换为所述第一可识别码；

将所述每个页面的节点展示信息转换为所述第二可识别码；

将所述每个页面的逻辑管理信息转换为所述第三可识别码；

所述基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，包括：

基于所述第一可识别码生成对应于所述第二应用程序的页面节点信息；

基于所述第二可识别码生成对应于所述第二应用程序的节点展示信息；

基于所述第三可识别码生成对应于所述第二应用程序的逻辑管理信息。

3.根据权利要求2所述的方法，其特征在于，所述将所述每个页面中的页面节点信息转换为所述第一可识别码，包括：

基于所述每个页面的页面节点信息生成文档树；其中，所述文档树包括多个层级；其中，每个层级包括至少一个节点，每个节点包括节点类型和节点属性；

基于所述文档树中每个节点的节点类型和节点属性生成第一语法树；其中，所述第一语法树用于将小程序使用的语法转换为所述第二应用程序使用的语法；

基于所述第一语法树生成所述第一可识别码。

4.根据权利要求2所述的方法，其特征在于，所述将所述每个页面中的节点展示信息转换为所述第二可识别码，包括：

基于所述每个页面的节点展示信息确定第二语法树；其中，所述第二语法树用于将所述节点展示信息中的像素转换为所述第二应用程序的页面节点中的像素；

基于所述第二语法树生成所述第二可识别码。

5.根据权利要求2所述的方法，其特征在于，所述逻辑管理信息包括：页面生命周期和页面操作信息；

所述将所述每个页面的逻辑管理信息转换为所述第三可识别码，包括：

基于所述页面生命周期确定多个组件模块；其中，所述小程序中的页面生命周期和每个组件模块的生命周期相互对齐；所述每个组件模块包括预先设置的多个组件；

确定所述页面操作信息与所述每个组件模块中多个组件之间的对应关系；

基于所述多个组件模块和所述对应关系生成所述第三可识别码。

6.根据权利要求5所述的方法，其特征在于，所述页面操作信息包括：事件信息和数据驱动信息；

所述确定所述页面操作信息与所述组件模块中多个组件之间的对应关系，包括：

确定所述事件信息和数据驱动信息与所述组件模块中多个组件之间的对应关系；

所述确定所述事件信息和数据驱动信息与所述组件模块中多个组件之间的对应关系之后，所述方法还包括：

确定所述每个组件模块中各组件实现的功能。

7.根据权利要求6所述的方法，其特征在于，所述第三可识别码包括应用程序编程接口码；

所述确定所述每个组件模块中各组件实现的功能，包括：

调用所述事件信息对应的应用程序编程接口码，以实现所述事件信息对应的各组件的功能；

基于所述数据驱动信息对应的预设驱动设置实现所述数据驱动信息对应的各组件实现的功能。

8.一种小程序跨端应用装置，其特征在于，所述装置包括：

获取模块，用于获取目标小程序包含的多个页面；所述目标小程序搭载于第一应用程序；

确定模块，用于确定每个页面的页面节点信息、节点展示信息、以及逻辑管理信息；

转换模块，用于将所述每个页面的页面节点信息、节点展示信息、以及逻辑管理信息对应的代码转换为可识别码；

第一生成模块，用于基于所述可识别码生成对应于第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息；所述第一应用程序与所述第二应用程序不同；

第二生成模块，用于基于所述第二应用程序的页面节点信息、节点展示信息、以及逻辑管理信息，生成所述目标小程序包含的多个页面分别在所述第二应用程序中对应的页面。

9.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1-7任一项的方法步骤。

10.一种电子设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由处理器加载并执行如权利要求1-7任一项的方法步骤。

Images