CN114265657A - 一种小程序的页面显示方法及装置 - Google Patents

Abstract

本发明涉及金融科技(Fintech)领域，公开一种小程序的页面显示方法及装置，终端基于接收到的对目标小程序的启动指令，获取目标小程序的程序代码文件；终端根据程序代码文件，从CDN服务器获取目标小程序对应的页面渲染文件和页面逻辑文件；终端通过对页面逻辑文件中的各逻辑单元的执行及页面渲染文件中各节点的渲染，显示目标小程序的页面。该方式通过管理台配置小程序各个页面的信息并整合为页面渲染文件和逻辑执行文件后发布到各CDN服务器，使得终端可从就近的CDN服务器中获取到页面渲染文件和逻辑执行文件，进而进行页面的动态渲染，以达到在无需业务人员审核页面样式有更新的小程序的程序代码文件的条件下、对小程序页面的样式进行实时修改的目的。

Description

一种小程序的页面显示方法及装置

技术领域

本申请实施例涉及金融科技(Fintech)领域，尤其涉及一种小程序的页面显示方法及装置。

背景技术

随着计算机技术的发展，越来越多的技术(例如：大数据、云计算或区块链)应用在金融领域，传统金融业正在逐步向金融科技转变。比如，随着微信、支付宝等应用程序受众面积的不断扩大，越来越多的商家通过办理微信、支付宝提供的小程序业务，从而在微信、支付宝上发布自己的小程序，可使得用户在一种免于下载相关应用的条件下而进行想要的消费和业务办理行为，银行也不例外，比如，银行可以通过微信小程序向用户营销自己的金融产品。

其中，在微信小程序营销活动页面功能较单一时，技术人员由于需要频繁改动小程序以丰富功能，这容易导致开发工作的重复；此外，微信小程序在每次改动后都需要先通过微信人工审核才能发布到线上环境、供用户使用，显然存在耗时久的缺点。

因此，目前亟需一种开发成本低且无需业务人员审核的小程序发布方案。

发明内容

本申请提供一种小程序的页面显示方法及装置，用以在对小程序的样式进行更新后无需提交业务人员审核、即可快速在用户终端上生效新页面。

第一方面，本申请实施例提供一种小程序的页面显示方法，该方法包括：终端基于接收到的对目标小程序的启动指令，获取所述目标小程序的程序代码文件；所述终端根据所述程序代码文件，从内容分发网络CDN服务器获取所述目标小程序对应的页面渲染文件和所述目标小程序对应的页面逻辑文件；所述终端通过对所述页面逻辑文件中的各逻辑单元的执行及所述页面渲染文件中各节点的渲染，显示所述目标小程序的页面。

上述方案中，在用户对终端上的一个小程序执行了启动操作，则终端可以对该小程序的程序代码文件进行获取，基于所获取的程序代码文件，终端可从CDN服务器获取该小程序对应的页面渲染文件和页面逻辑文件，最终终端通过对页面逻辑文件中的各逻辑单元的执行以及对页面渲染文件中各节点的渲染，从而可以对该小程序的页面进行显示。该方式中通过管理台配置小程序各个页面的信息并整合为页面渲染文件和逻辑执行文件后发布到各个CDN服务器，使得终端可以从就近的CDN服务器中获取到页面渲染文件和逻辑执行文件，进而进行页面的动态渲染，以达到在无需业务人员审核页面样式有更新的小程序的程序代码文件的条件下、对小程序页面的样式进行实时修改的目的。

在一种可能实现的方法中，所述页面渲染文件是通过在管理台对所述目标小程序的各页面进行样式配置并对各页面的样式配置信息进行打包后发布于所述CDN服务器上的；所述页面逻辑文件是通过在所述管理台对所述目标小程序的各页面进行逻辑配置并对各页面的逻辑配置信息进行打包后发布于所述CDN服务器上的。

上述方案中，关于一待发布的小程序，可预先在管理台中配置好该小程序的各个页面的一些信息，包括对页面样式进行配置的信息以及对页面逻辑进行配置的信息，并在配置好该小程序中所有页面的样式信息和逻辑信息后，可以对各个页面的样式配置信息进行打包以形成页面渲染文件并发布于CDN服务器上，以及对各个页面的逻辑配置信息进行打包以形成页面逻辑文件并发布于CDN服务器上，从而以便于终端在接收到用户对该小程序的启动指令后，基于该小程序的程序代码文件而从相应的CDN服务器上获取这两个文件，从而终端可以基于这两个文件而实现对小程序页面的实时渲染。

在一种可能实现的方法中，所述终端通过对所述页面渲染文件中各节点的渲染，包括：针对任一页面，所述终端从所述页面渲染文件中获取所述页面的节点数组；针对所述节点数组中的任一节点，所述终端通过所述程序代码文件中预设的各组件对所述节点进行解析渲染。

上述方案中，一方面通过在管理台对页面样式信息和页面逻辑信息进行配置从而形成可以发布于CDN服务器上的页面渲染文件和页面逻辑文件，从而可以实现在技术人员想要对小程序的页面进行样式更新时，仅需要技术人员在管理台重新配置相关的页面样式信息和/或页面逻辑信息并重新向CDN服务器进行发布即可；另一方面，在终端基于小程序的程序代码文件而从相关的CDN服务器获取到该小程序的页面渲染文件和页面逻辑文件后，其中对于所获取的页面渲染文件，终端关于一待显示的小程序页面，将可以从所获取的页面渲染文件中获取该页面的节点数组，并在获取到节点数组后，针对节点数组中的任一节点，终端将可以通过在该小程序对应的程序代码文件中预先设置好的各组件来对该节点进行解析渲染，从而反馈到终端的显示界面上将是正确的小程序页面。

在一种可能实现的方法中，所述针对所述节点数组中的任一节点，所述终端通过所述程序代码文件中预设的各组件对所述节点进行解析渲染，包括：所述终端遍历所述节点数组；所述终端若确定所述节点数组中的当前节点为页面节点，则通过所述各组件中的页面组件设置页面标题；所述终端若确定所述当前节点为设置了图像尺寸的图像节点，则通过所述各组件中的图像组件更新所述当前节点对应元素的图像尺寸。

上述方案中，在终端通过小程序对应的程序代码文件中预先设置好的各组件来对节点数组中的任一节点进行解析渲染的过程中，具体可以包括终端对节点数组中的所有节点进行遍历，针对所遍历到的一节点，可定义为当前节点；其中，若终端确定当前节点为页面节点，则可以通过各组件中的页面组件进行页面标题的设置，若终端确定当前节点为设置了图像尺寸的图像节点，则可以通过各组件中的图像组件来更新当前节点所对应元素的图像尺寸。基于该方式，可以实现将节点数组中各节点在终端的显示界面上进行正确的渲染，使得终端可对小程序的页面进行正确显示。

在一种可能实现的方法中，若所述终端确定所述当前节点不是页面节点，则遍历所述当前节点的各style属性；所述终端若确定当前css属性样式影响所述当前节点对应元素的位置布局，且布局单位为纯数字，则为所述当前css属性样式对应的属性值补充单位，并追加到所述元素的style属性中；所述当前css属性样式为所述当前节点的各style属性中的任一style属性的任一css属性样式。

上述方案中，描述了在终端遍历节点数组的过程中，对于所遍历到的当前节点并不为页面节点时所需要进行的一些必要操作，包括通过遍历当前节点的各style属性，若终端确定当前所遍历的css属性样式将影响当前节点所对应元素的位置布局，且布局单位为纯数字，则终端可以为当前css属性样式对应的属性值补充单位，并追加到当前节点所对应元素的style属性中，如此可以保证小程序页面在显示过程中的正确性。

在一种可能实现的方法中，所述终端通过对所述页面逻辑文件中的各逻辑单元的执行，包括：针对任一页面，所述终端从所述页面逻辑文件中获取所述页面对应的各逻辑单元；所述终端对所述各逻辑单元进行预处理后，按照各逻辑单元的执行顺序依次放入队列中；针对从所述队列中取出的逻辑单元，所述终端按照所述逻辑单元的类型执行所述逻辑单元。

上述方案中，要想对一个页面进行正确的显示，除了需要对页面中涉及到的元素进行一个正确的渲染，还包括需要确定所需要渲染的元素分别有哪些，也即首先需要知道待显示的页面中所涉及的元素有哪些，然后通过对所涉及的元素进行正确的渲染，如此将可以向用户显示出正确的页面。其中，在确定待显示的页面中所涉及的元素有哪些的过程中，终端可以从页面逻辑文件中获取到该待显示的页面所对应各逻辑单元，然后通过对各逻辑单元的预处理，并将处理后的逻辑单元按照处理的先后顺序依次放入队列中，最后终端对于从队列中取出的逻辑单元，终端可按照该逻辑单元的类型执行该逻辑单元，并最终得到待显示页面所涉及到的元素的信息。

在一种可能实现的方法中，所述终端对所述各逻辑单元进行预处理，包括：针对任一逻辑单元，所述终端解析所述逻辑单元中的各代码语句；所述终端对所述各代码语句进行规范化处理；所述规范化处理至少包括无效语句删除、双重否定语句改为肯定语句。

上述方案中，终端对各逻辑单元所进行的预处理操作可以对当中的一个逻辑单元的处理为例，也即终端通过解析该逻辑单元中的各代码语句，并对各代码语句进行诸如删除无效语句、双重否定语句改为肯定语句等规范化处理，如此可以保证终端后续从队列中取出该逻辑单元并按照该逻辑单元的类型处理该逻辑单元时，将可以使得对该逻辑单元的处理效率提高。

第二方面，本申请实施例提供一种小程序的页面显示装置，该装置包括：程序代码文件获取单元，用于基于接收到的对目标小程序的启动指令，获取所述目标小程序的程序代码文件；双文件获取单元，用于根据所述程序代码文件，从内容分发网络CDN服务器获取所述目标小程序对应的页面渲染文件和所述目标小程序对应的页面逻辑文件；页面显示单元，用于通过对所述页面逻辑文件中的各逻辑单元的执行及所述页面渲染文件中各节点的渲染，显示所述目标小程序的页面。

第三方面，本申请实施例提供了一种计算设备，包括：

存储器，用于存储程序指令；

处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行如第一方面任一实现方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行如第一方面任一实现方法。

附图说明

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

图1为本申请实施例提供的一种***架构的示意图；

图2为本申请实施例提供的一种小程序的页面显示方法的示意图；

图3为本申请实施例提供的一种组件的示意图；

图4为本申请实施例提供的一种页面渲染的流程图；

图5为本申请实施例提供的一种小程序的页面显示装置的示意图；

图6为本申请实施例提供的一种计算设备的示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

针对当前的小程序在进行简单的样式更新后，仍需要让小程序业务的提供者对更新后的小程序的程序代码文件重新进行审核，并在审核通过后方才能进行新版本的小程序的发布。显然该过程极大地拉低了小程序发布的效率。

针对上述技术问题，本申请实施例提供一种可能的***架构。如图1所示，为本申请实施例提供的一种***架构的示意图，该***架构包括终端110、第三方服务器120、目标服务器130和CDN(Content Delivery Network，内容分发网络)服务器140。

其中，终端110可以为智能手机、电脑、智能车载设备等设备，其可以用于从第三方服务器120提供的小程序业务中选择想要的小程序，并对所选取的小程序进行使用。

第三服务器120可以为能够提供各种小程序业务办理的服务器，其可以用于存储各个小程序的程序代码文件，并在终端110需要对第三方服务器120中的某一小程序进行使用的时候，第三方服务器120可以将针对该小程序所存储的程序代码文件发送给终端110，从而终端110通过运行所接收到的程序代码文件，将可以对该小程序进行加载并使用。例如，第三方服务器120可以为微信这一应用程序的服务器、支付宝这一应用程序的服务器。

目标服务器130可以为各个小程序开发者提供的服务器，其可以配备有可视化的管理台。其中小程序开发人员可以通过在所配备的可视化的管理台对小程序的各个页面进行配置，其中页面配置的过程包括对页面样式进行配置和页面逻辑进行配置；在小程序开发人员配置好小程序的所有页面后，通过在管理台预览所开发小程序的各个页面的显示效果，若确定显示效果符合小程序的开发预期，则小程序开发人员通过将所有页面分别对应的样式配置信息打包成页面渲染文件、以及将所有页面分别对应的逻辑配置信息打包成页面逻辑文件，最后可以将打包得到的页面渲染文件和页面逻辑文件一并发送到CDN服务器140上；此外，小程序的开发人员将可以在小程序的程序代码文件中记录下需要从CDN服务器上获取小程序的页面渲染文件和页面逻辑文件的代码，以便后续用户通过自己的终端110想要对该小程序进行使用时，即用户向终端110发出了对该小程序的启动指令，那么终端110将可以先从第三方服务器120中获取到该小程序的程序代码文件，然后终端110通过该小程序的程序代码文件中所记录的从CDN服务器140中获取该小程序的页面渲染文件和页面逻辑文件的代码，从而终端110将可以从CDN服务器140中获取到该小程序的页面渲染文件和页面逻辑文件，最终终端110可通过对所获取的页面逻辑文件中各逻辑单元的执行以及对所获取的页面渲染文件中各节点的渲染，实现对用户发出的各个操作指令所指示的小程序页面的正确显示。

CDN服务器140可用于接收并存储目标服务器130传输的关于指定小程序的页面渲染文件和页面逻辑文件，并用于在接收到终端110对该指定小程序的页面渲染文件和页面逻辑文件的获取指令后，可以将终端110所要求的指定小程序的页面渲染文件和页面逻辑文件发送给终端110。

针对上述技术问题，并结合本申请实施例提供的***架构，本申请可提供一种小程序的页面显示方法。如图2所示，为本申请实施例提供的一种小程序的页面显示方法的示意图，该方法可以由图1所示的终端110执行。该方法包括以下步骤：

步骤201，终端基于接收到的对目标小程序的启动指令，获取所述目标小程序的程序代码文件；

步骤202，所述终端根据所述程序代码文件，从内容分发网络CDN服务器获取所述目标小程序对应的页面渲染文件和所述目标小程序对应的页面逻辑文件；

步骤203，所述终端通过对所述页面逻辑文件中的各逻辑单元的执行及所述页面渲染文件中各节点的渲染，显示所述目标小程序的页面。

此外，本发明实施例中，还需要强调的是，现有的小程序中，逻辑层和渲染层是分离的，并没有提供操作dom结构、动态***dom节点的方法，所以无法像网页一样做到动态渲染。

上述方案中，在用户对终端上的一个小程序执行了启动操作，则终端可以对该小程序的程序代码文件进行获取，基于所获取的程序代码文件，终端可从CDN服务器获取该小程序对应的页面渲染文件和页面逻辑文件，最终终端通过对页面逻辑文件中的各逻辑单元的执行以及对页面渲染文件中各节点的渲染，从而可以对该小程序的页面进行显示。该方式中通过管理台配置小程序各个页面的信息并整合为页面渲染文件和逻辑执行文件后发布到各个CDN服务器，使得终端可以从就近的CDN服务器中获取到页面渲染文件和逻辑执行文件，进而进行页面的动态渲染，以达到在无需业务人员审核页面样式有更新的小程序的程序代码文件的条件下、对小程序页面的样式进行实时修改的目的。

以下将结合示例分别对上述一些步骤进行详细说明。

在本申请的某些实施中，所述页面渲染文件是通过在管理台对所述目标小程序的各页面进行样式配置并对各页面的样式配置信息进行打包后发布于所述CDN服务器上的；所述页面逻辑文件是通过在所述管理台对所述目标小程序的各页面进行逻辑配置并对各页面的逻辑配置信息进行打包后发布于所述CDN服务器上的。

目前，由于小程序开发人员是通过在小程序的程序代码文件中事先编写好小程序页面的样式信息和逻辑信息的代码，因此在每次小程序有尽管很小的样式方面的变动需求时，都要求小程序开发人员对小程序的程序代码文件进行更新，而将更新后的小程序的程序代码文件提交给小程序业务办理的人员以进行审核，并在审核通过后，才能实现对新版本小程序的发布。显然该过程中，对于类似于小程序页面的样式进行更新这一热更新的需求，将需要耗费漫长的等待时间，如此才能实现对新版本小程序的发布。

针对该问题，本申请实施例中通过改变目前的***架构，也即在目前的***架构中引入CDN服务器，并在CDN服务器上存储小程序的页面渲染文件和页面逻辑文件，并在小程序的程序代码文件中编写好可从CDN服务器上获取小程序的页面渲染文件和页面逻辑文件的代码；如此在用户每次对小程序进行使用时，可在用户对小程序发出了启动指令后，用户终端可首先获取小程序的程序代码文件，接着用户终端可从程序代码文件中获取到可从CDN服务器中获取小程序的页面渲染文件和页面逻辑文件的信息，从而用户终端可从CDN服务器中获取到小程序的页面渲染文件和页面逻辑文件，然后根据对页面逻辑文件中各逻辑单元的执行和对页面渲染文件中各节点的渲染，将可以对用户发出的指令所指向的页面进行一个正确的显示。

该方式中通过将小程序各页面的样式信息和逻辑信息使用管理台进行配置，在配置好后打包成页面渲染文件和页面逻辑文件并发布于CDN服务器上，从而在用户每次对小程序进行使用的时候，如果小程序的页面样式刚好进行了更新，那么用户终端从CDN服务器中获取到关于该小程序的页面渲染文件和页面逻辑文件都将是最新版本的页面渲染文件和页面逻辑文件，从而用户终端通过对最新版本的页面渲染文件和页面逻辑文件的处理，就可以向用户展示页面样式进行过更新的小程序了。基于该方式，可以避免在诸如小程序样式等发生更新(热更新)时、仍需要人工审核新版本小程序的程序代码文件的问题，提升了新版本小程序发布的速度。

在上述步骤203的一个实施中，所述终端通过对所述页面逻辑文件中的各逻辑单元的执行，包括：针对任一页面，所述终端从所述页面逻辑文件中获取所述页面对应的各逻辑单元；所述终端对所述各逻辑单元进行预处理后，按照各逻辑单元的执行顺序依次放入队列中；针对从所述队列中取出的逻辑单元，所述终端按照所述逻辑单元的类型执行所述逻辑单元。

在本申请的某些实施中，所述终端对所述各逻辑单元进行预处理，包括：针对任一逻辑单元，所述终端解析所述逻辑单元中的各代码语句；所述终端对所述各代码语句进行规范化处理；所述规范化处理至少包括无效语句删除、双重否定语句改为肯定语句。

其中，任一逻辑单元用于指示根据在该逻辑单元中预先配置的规则和用户的信息(包括用户的历史信息和用户当前的操作)而确定下一步待执行的操作。

例如，对于小程序当前所显示的一个页面，页面中用户可见的内容可称之为元素；对于页面中任一个用户可以进行操作(如点击操作)的元素，本申请实施例中可预先在管理台中为其配置逻辑单元，如此关于一页面，当中有多少个用户可操作元素，该页面将对应有多少个逻辑单元。因此，在用户通过点击A页面中的某一可操作的元素(设为元素B)后，终端将可以从页面逻辑文件中获取A页面中元素B所对应的逻辑单元，接着终端通过对该逻辑单元进行预处理，包括解析该逻辑单元中的各代码语句，并对各代码语句进行诸如无效语句删除、双重否定句改为肯定句的操作，将可以得到精炼的对A页面中元素B指示的新的页面的一组展示逻辑，接着终端可依序对该组展示逻辑进行处理，具体可按照当前所取出进行处理的展示逻辑的类型对当前所取出的展示逻辑进行处理，包括：

若当前所取出的展示逻辑的类型为真值判断，如可基于用户在数据库中所存储的是否为会员的信息确定用户是会员还是不是会员，则根据真值判断的结果，从该组展示逻辑中获取下一个展示逻辑，并继续处理下一个展示逻辑；

若当前所取出的展示逻辑的类型为自定义类型，如基于用户数据库中所存储的交易金额的数据确定用户所处的等级，则执行自定义函数并等待自定义函数执行后的结果反馈，最后根据反馈结果从该组展示逻辑中获取下一个展示逻辑，并继续处理下一个展示逻辑；

若当前所取出的展示逻辑为结束类型，则结束对该组展示逻辑的处理；

若当前所取出的展示逻辑为用户行为分析，则通过监听用户行为，并获得反馈。

页面逻辑文件在执行过程中，关键的点在于能够解析出特定的逻辑步骤，然后将逻辑步骤入队列，并形成特定状态机，从而在实际执行的时候状态机根据当前队头的展示逻辑类型决定当前步骤需要执行的操作。

在上述步骤203的一个实施中，所述终端通过对所述页面渲染文件中各节点的渲染，包括：针对任一页面，所述终端从所述页面渲染文件中获取所述页面的节点数组；针对所述节点数组中的任一节点，所述终端通过所述程序代码文件中预设的各组件对所述节点进行解析渲染。

接着前述的例子，针对于A页面中元素B，在终端对页面逻辑文件中A页面中元素B的逻辑单元的执行，可以得到A页面中元素B执行结束后所编辑于页面渲染文件中的、向用户进行展示的一新页面(令为页面C)的数据，即节点数组；接着终端针对节点数组中的任一节点，终端可以通过设置于程序代码文件中的各组件来对该节点数组进行解析渲染，并在终端完成对节点数组中所有节点的解析渲染后，终端就可以向用户显示页面C了。

其中，节点是程序代码文件在编写时候对页面各内容的称呼，元素是页面显示后对页面各内容的称呼；进一步的，节点与元素是一一对应的。

在本申请的某些实施中，所述针对所述节点数组中的任一节点，所述终端通过所述程序代码文件中预设的各组件对所述节点进行解析渲染，包括：所述终端遍历所述节点数组；所述终端若确定所述节点数组中的当前节点为页面节点，则通过所述各组件中的页面组件设置页面标题；所述终端若确定所述当前节点为设置了图像尺寸的图像节点，则通过所述各组件中的图像组件更新所述当前节点对应元素的图像尺寸。

在本申请的某些实施中，若所述终端确定所述当前节点不是页面节点，则遍历所述当前节点的各style属性；所述终端若确定当前css属性样式影响所述当前节点对应元素的位置布局，且布局单位为纯数字，则为所述当前css属性样式对应的属性值补充单位，并追加到所述元素的style属性中；所述当前css属性样式为所述当前节点的各style属性中的任一style属性的任一css属性样式。

例如，如图3所示，为本申请实施例提供的一种组件的示意图。其中，图3中所示的7个组件为本申请实施例中预先配置在小程序的程序代码文件中的组件。该7个组件分别为node组件(节点组件)、image组件(图像组件)、text组件(文本组件)、page组件(页面组件)、vedio组件(视频播放组件)、audio组件(音频播放组件)和view组件(容器组件)。

具体的，node组件可用于预处理渲染数据，image组件可用于渲染图片，text组件可用于渲染文字，page组件可用于配置页面级信息，vedio组件可用于播放视频，audio组件可用于播放音频，view组件可用于定位、装载其他类型节点。

进一步的，image组件除了可用于渲染图片以外，还可以用于设置图片的尺寸。例如，开发人员在对一小程序进行开发的过程中，针对显示页面的切换场景，如需要向用户进行显示的页面为一个询问式样式的页面(如提示用户是否同意用户协议、又如提示用户是否同意授权地理位置信息等)，那么此时可以由开发人员预先设计好该询问式样式的页面的尺寸，其中包括采用默认设置，或者由开发人员对尺寸进行自定义。那么，针对该种对显示页面的尺寸有特殊要求的场景，image组件除了可以用于渲染图片以外，在此之前，还需要根据是否设置有图片尺寸而进行相关的作为或者不作为，具体包括：开发人员如果自定义了尺寸，那么image组件将需要按照用户自定义的尺寸而进行图片尺寸的设置；如果开发人员并未定义图片尺寸，那么image组件将可以不作为，而直接用于渲染图片即可。

说明的是，技术人员可以根据小程序在实际使用时候的需要而对该7个组件中除去node组件外的各组件进行自由组合使用，以及本申请也支持添加其他合理的组件。

设小程序为微信小程序，那么基于图3所示的各组件，如图4所示，为本申请实施例提供的一种页面渲染的流程图，该流程图包括以下步骤：

步骤401，从CDN服务器获取页面渲染文件。

步骤402，确定微信小程序基础库版本是否不小于2.11.2。若是，则执行步骤403；否则，执行步骤404。

步骤403，从页面渲染文件中读取待显示页面对应的nodelist数组(节点数组)，并执行步骤405。

步骤404，兼容模式渲染设定提示内容(如按照固定格式渲染一张自定义图片和一段提示文字，以告知用户需升级微信客户端再使用)。

步骤405，将nodelist数组投入node组件，进行预处理。

步骤406，确定是否为页面节点。若否，则执行步骤407；否则，执行步骤408。

步骤407，遍历node.style属性，并执行步骤409。

步骤408，读取title属性，调用小程序API-wx.setNavigationBarTitle，将title值设置为页面标题。

步骤409，确定css属性样式是否影响元素位置布局。若是，则执行步骤410；否则，执行步骤411。

步骤410，确定布局单位是百分比还是纯数字。若是百分比，则执行步骤411；否则，执行步骤412。

步骤411，将css属性和值追加到元素style属性中，并执行步骤413。

步骤412，为css属性值补充rpx单位，并执行步骤411。

步骤413，确定是否为图片节点。若是，则执行步骤414；否则，执行步骤415。

步骤414，确定图片尺寸设置的模式。其中，若确定仅设置高度、未设置宽度，则执行步骤416；若确定仅设置宽度，未设置高度，则执行步骤417；若确定同时设置高度和宽度，则执行步骤418。

步骤415，根据节点类型，使用不同的组件渲染(包括使用image组件、text组件、video组件、audio组件和view组件)，并执行步骤419。

步骤416，通过image组件将mode属性值设置为heightFix，根据图片高度自适应宽度，并执行步骤415。

步骤417，通过image组件将mode属性值设置为widthFix，根据图片宽度自适应高度，并执行步骤415。

步骤418，通过image组件将mode属性值设置为scaleToFill，强制按照设置的尺寸拉伸铺满，并执行步骤415。

步骤419，确定是否有子节点。若是/有，则执行步骤420；否则，执行步骤421。

步骤420，遍历渲染子节点，并返回步骤405。

步骤421，结束对该节点的渲染，而开始渲染下一个兄弟节点，并返回步骤405。

基于同样的构思，本申请实施例提供一种小程序的页面显示装置，如图5所示，为本申请实施例提供的一种小程序的页面显示装置的示意图，该装置包括程序代码文件获取单元501、双文件获取单元502和页面显示单元503；

程序代码文件获取单元501，用于基于接收到的对目标小程序的启动指令，获取所述目标小程序的程序代码文件；

双文件获取单元502，用于根据所述程序代码文件，从内容分发网络CDN服务器获取所述目标小程序对应的页面渲染文件和所述目标小程序对应的页面逻辑文件；

页面显示单元503，用于通过对所述页面逻辑文件中的各逻辑单元的执行及所述页面渲染文件中各节点的渲染，显示所述目标小程序的页面。

进一步的，对于该装置，所述页面渲染文件是通过在管理台对所述目标小程序的各页面进行样式配置并对各页面的样式配置信息进行打包后发布于所述CDN服务器上的；所述页面逻辑文件是通过在所述管理台对所述目标小程序的各页面进行逻辑配置并对各页面的逻辑配置信息进行打包后发布于所述CDN服务器上的。

进一步的，对于该装置，页面显示单元503，具体用于：针对任一页面，从所述页面渲染文件中获取所述页面的节点数组；针对所述节点数组中的任一节点，通过所述程序代码文件中预设的各组件对所述节点进行解析渲染。

进一步的，对于该装置，页面显示单元503，具体用于：遍历所述节点数组；若确定所述节点数组中的当前节点为页面节点，则通过所述各组件中的页面组件设置页面标题；若确定所述当前节点为设置了图像尺寸的图像节点，则通过所述各组件中的图像组件更新所述当前节点对应元素的图像尺寸。

进一步的，对于该装置，页面显示单元503，具体用于：若确定所述当前节点不是页面节点，则遍历所述当前节点的各style属性；若确定当前css属性样式影响所述当前节点对应元素的位置布局，且布局单位为纯数字，则为所述当前css属性样式对应的属性值补充单位，并追加到所述元素的style属性中；所述当前css属性样式为所述当前节点的各style属性中的任一style属性的任一css属性样式。

进一步的，对于该装置，页面显示单元503，具体用于：针对任一页面，从所述页面逻辑文件中获取所述页面对应的各逻辑单元；对所述各逻辑单元进行预处理后，按照各逻辑单元的执行顺序依次放入队列中；针对从所述队列中取出的逻辑单元，按照所述逻辑单元的类型执行所述逻辑单元。

进一步的，对于该装置，页面显示单元503，具体用于：针对任一逻辑单元，解析所述逻辑单元中的各代码语句；对所述各代码语句进行规范化处理；所述规范化处理至少包括无效语句删除、双重否定语句改为肯定语句。

本申请实施例还提供了一种计算设备，该计算设备具体可以为桌面计算机、便携式计算机、智能手机、平板电脑、个人数字助理(Personal Digital Assistant，PDA)等。该计算设备可以包括中央处理器(Center Processing Unit，CPU)、存储器、输入/输出设备等，输入设备可以包括键盘、鼠标、触摸屏等，输出设备可以包括显示设备，如液晶显示器(Liquid Crystal Display，LCD)、阴极射线管(Cathode Ray Tube，CRT)等。

存储器，可以包括只读存储器(ROM)和随机存取存储器(RAM)，并向处理器提供存储器中存储的程序指令和数据。在本申请实施例中，存储器可以用于存储小程序的页面显示方法的程序指令；

处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行小程序的页面显示方法。

如图6所示，为本申请实施例提供的一种计算设备的示意图，该计算设备包括：

处理器601、存储器602、收发器603、总线接口604；其中，处理器601、存储器602与收发器603之间通过总线605连接；

所述处理器601，用于读取所述存储器602中的程序，执行上述小程序的页面显示方法；

处理器601可以是中央处理器(central processing unit，简称CPU)，网络处理器(network processor，简称NP)或者CPU和NP的组合。还可以是硬件芯片。上述硬件芯片可以是专用集成电路(application-specific integrated circuit，简称ASIC)，可编程逻辑器件(programmable logic device，简称PLD)或其组合。上述PLD可以是复杂可编程逻辑器件(complex programmable logic device，简称CPLD)，现场可编程逻辑门阵列(field-programmable gate array，简称FPGA)，通用阵列逻辑(generic array logic,简称GAL)或其任意组合。

所述存储器602，用于存储一个或多个可执行程序，可以存储所述处理器601在执行操作时所使用的数据。

具体地，程序可以包括程序代码，程序代码包括计算机操作指令。存储器602可以包括易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，简称RAM)；存储器602也可以包括非易失性存储器(non-volatile memory)，例如快闪存储器(flash memory)，硬盘(hard disk drive，简称HDD)或固态硬盘(solid-state drive，简称SSD)；存储器602还可以包括上述种类的存储器的组合。

存储器602存储了如下的元素，可执行模块或者数据结构，或者它们的子集，或者它们的扩展集：

操作指令：包括各种操作指令，用于实现各种操作。

操作***：包括各种***程序，用于实现各种基础业务以及处理基于硬件的任务。

总线605可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extended industry standard architecture，简称EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

总线接口604可以为有线通信接入口，无线总线接口或其组合，其中，有线总线接口例如可以为以太网接口。以太网接口可以是光接口，电接口或其组合。无线总线接口可以为WLAN接口。

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行小程序的页面显示方法。

本领域内的技术人员应明白，本申请的实施例可提供为方法、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种小程序的页面显示方法，其特征在于，包括：

终端基于接收到的对目标小程序的启动指令，获取所述目标小程序的程序代码文件；

所述终端根据所述程序代码文件，从内容分发网络CDN服务器获取所述目标小程序对应的页面渲染文件和所述目标小程序对应的页面逻辑文件；

所述终端通过对所述页面逻辑文件中的各逻辑单元的执行及所述页面渲染文件中各节点的渲染，显示所述目标小程序的页面。

2.如权利要求1所述的方法，其特征在于，

所述页面渲染文件是通过在管理台对所述目标小程序的各页面进行样式配置并对各页面的样式配置信息进行打包后发布于所述CDN服务器上的；

所述页面逻辑文件是通过在所述管理台对所述目标小程序的各页面进行逻辑配置并对各页面的逻辑配置信息进行打包后发布于所述CDN服务器上的。

3.如权利要求1所述的方法，其特征在于，

所述终端通过对所述页面渲染文件中各节点的渲染，包括：

针对任一页面，所述终端从所述页面渲染文件中获取所述页面的节点数组；

针对所述节点数组中的任一节点，所述终端通过所述程序代码文件中预设的各组件对所述节点进行解析渲染。

4.如权利要求3所述的方法，其特征在于，

所述针对所述节点数组中的任一节点，所述终端通过所述程序代码文件中预设的各组件对所述节点进行解析渲染，包括：

所述终端遍历所述节点数组；

所述终端若确定所述节点数组中的当前节点为页面节点，则通过所述各组件中的页面组件设置页面标题；

所述终端若确定所述当前节点为设置了图像尺寸的图像节点，则通过所述各组件中的图像组件更新所述当前节点对应元素的图像尺寸。

5.如权利要求4所述的方法，其特征在于，所述方法还包括：

若所述终端确定所述当前节点不是页面节点，则遍历所述当前节点的各style属性；

所述终端若确定当前css属性样式影响所述当前节点对应元素的位置布局，且布局单位为纯数字，则为所述当前css属性样式对应的属性值补充单位，并追加到所述元素的style属性中；所述当前css属性样式为所述当前节点的各style属性中的任一style属性的任一css属性样式。

6.如权利要求1-5任一项所述的方法，其特征在于，

所述终端通过对所述页面逻辑文件中的各逻辑单元的执行，包括：

针对任一页面，所述终端从所述页面逻辑文件中获取所述页面对应的各逻辑单元；

所述终端对所述各逻辑单元进行预处理后，按照各逻辑单元的执行顺序依次放入队列中；

针对从所述队列中取出的逻辑单元，所述终端按照所述逻辑单元的类型执行所述逻辑单元。

7.如权利要求6所述的方法，其特征在于，

所述终端对所述各逻辑单元进行预处理，包括：

针对任一逻辑单元，所述终端解析所述逻辑单元中的各代码语句；

所述终端对所述各代码语句进行规范化处理；所述规范化处理至少包括无效语句删除、双重否定语句改为肯定语句。

8.一种小程序的页面显示装置，其特征在于，包括：

程序代码文件获取单元，用于基于接收到的对目标小程序的启动指令，获取所述目标小程序的程序代码文件；

双文件获取单元，用于根据所述程序代码文件，从内容分发网络CDN服务器获取所述目标小程序对应的页面渲染文件和所述目标小程序对应的页面逻辑文件；

页面显示单元，用于通过对所述页面逻辑文件中的各逻辑单元的执行及所述页面渲染文件中各节点的渲染，显示所述目标小程序的页面。

9.一种计算机设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于调用所述存储器中存储的计算机程序，按照获得的程序执行如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行如权利要求1-7任一项所述的方法。

Images