CN112860347A - 一种小程序中存证文件的生成方法及装置 - Google Patents

Abstract

本发明实施例提供了一种小程序中存证文件的生成方法及装置，该方法包括小程序前端在监测到存证事件触发后，从小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息，根据各虚拟节点及各虚拟节点的样式属性信息，绘制与展示页面对应的存证文件，将存证文件发送至小程序前端对应的小程序后台进行存储。由于该方法是在小程序前端生成存证文件，而小程序后台只负责存储存证文件，因此小程序后台并不知道存证文件的存证内容，所以在需要对存证内容进行更改时，可以只需要直接更改小程序前端展示的存证内容，并不需要同时在小程序后台进行更改，如此可以降低存证文件的维护成本。

Description

一种小程序中存证文件的生成方法及装置

技术领域

本发明实施例涉及金融科技(Fintech)领域，尤其涉及一种小程序中存证文件的生成方法及装置。

背景技术

随着计算机技术的发展，越来越多的技术应用在金融领域，传统金融业正在逐步向金融科技转变，但由于金融行业的安全性、实时性要求，也对技术提出的更高的要求。

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。基于小程序的该特点，开始逐渐将小程序应用于金融科技领域，以便为金融企业或金融企业的客户提供更为便利的服务。

随着小程序的不断应用，尤其是在金融科技等领域，如何在小程序下生成存证文件是不得不考虑的问题了。由于小程序架构的特点，一方面小程序前端需要对页面内容进行展示(如待存证内容)，因而，需要从小程序前端的数据库获取对应的展示信息。例如，用户在进行贷款交易时，会登录已经注册的金融交易小程序并进行相应操作，如用户在点击贷款申请时，小程序前端会触发展示贷款合同(即待存证内容)。为了展示贷款合同，小程序前端会获取贷款合同模板，同时还会从小程序后台查询出用户的姓名和身份证号等信息，并将用户的姓名和身份证号等信息填充到贷款合同中，然后将填充后的贷款合同展示给用户。另一方面，小程序前端在监测到用户的确认操作时(如勾选合同同意选项)，会触发小程序后台生成存证文件。一般小程序后台会从小程序后台的数据库获取贷款合同模板，然后获将用户的姓名和身份证号等信息填充到贷款合同中，以此生成存证文件并进行存储。然而，这种处理方式倘若在业务调整涉及到新增待存证内容或调整待存证内容时，需要展示待存证内容的小程序前端和生成存证文件的小程序后台都针对待存证内容进行更改，以便满足小程序前端和小程序后台的待存证内容一致的要求，如此会导致存证文件的维护成本高。

综上，目前亟需一种小程序中存证文件的生成方法，用以降低存证文件的维护成本。

发明内容

本发明实施例提供了一种小程序中存证文件的生成方法及装置，用以降低存证文件的维护成本。

第一方面，本发明实施例提供了一种小程序中存证文件的生成方法，包括：

小程序前端在监测到存证事件触发后，从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息；

所述小程序前端根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件；

所述小程序前端将所述存证文件发送至所述小程序前端对应的小程序后台。

上述技术方案中，小程序前端在监测到存证事件触发后，从小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息。再根据各虚拟节点及各虚拟节点的样式属性信息，绘制与展示页面对应的存证文件。然后，将存证文件发送至小程序前端对应的小程序后台进行存储。由于该方法是在小程序前端生成存证文件，而小程序后台只负责存储存证文件，因此小程序后台并不知道存证文件的存证内容，所以在需要对存证内容进行更改时，可以只需要直接更改小程序前端展示的存证内容，并不需要同时在小程序后台进行更改，如此可以降低存证文件的维护成本。

可选地，所述从小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息，包括：

所述小程序前端通过小程序逻辑层中预先设置的选择器，从所述小程序前端的展示页面的标签描述文本中，查找符合所述选择器的各虚拟节点并获取所述各虚拟节点的样式属性信息。

上述技术方案中，通过小程序逻辑层中预先设置的选择器，可以及时准确地从小程序前端的展示页面的标签描述文本中查找出与选择器匹配的各虚拟节点，并以此可以及时准确地获取到各虚拟节点的样式属性信息。基于此，就可以有效地解决现有技术中无法直接对小程序标签元素进行遍历的问题。

可选地，所述小程序前端根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件，包括：

所述小程序前端调用小程序框架中的绘图组件，以控制所述绘图组件根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件。

上述技术方案中，因为小程序本身并不能通过调用终端设备的系统接口来进行页面截屏，所以可以通过调用小程序框架提供的绘图组件，来及时准确地对各虚拟节点及其样式属性信息进行绘制，以此准确地绘制出展示页面对应的存证文件。

可选地，所述根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件，包括：

按照所述各虚拟节点在所述标签描述文本中的顺序，根据所述各虚拟节点的样式属性信息依次绘制所述各虚拟节点，从而得到与所述展示页面对应的存证文件。

上述技术方案中，通过按照各虚拟节点在标签描述文本中的顺序来依次绘制出各虚拟节点及其样式属性信息，这样就可以有效地避免绘制出的各虚拟节点出现层叠的情况，以及可以确保能够真实直观地反映各虚拟节点间的关系，以便后续直观准确地生成存证文件，同时也可以增加绘制出的各虚拟节点及其样式属性信息在画布上的美观。

可选地，在从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息之前，还包括：

在所述小程序的小程序逻辑层中预先设置选择器；

在所述小程序的各展示页面的标签描述文本中设置关联有所述选择器的各虚拟节点；

按照所述各虚拟节点在所述标签描述文本中的顺序，根据所述各虚拟节点的样式属性信息依次绘制所述各虚拟节点，包括：

将所述选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点；

基于所述根节点所具有的样式属性信息，构建用于绘制所述存证文件的绘图区域；

在所述绘图区域中，按照所述各虚拟节点中除所述根节点以外的其它虚拟节点在所述标签描述文本中的顺序，并根据所述其它虚拟节点的样式属性信息依次绘制所述其它虚拟节点。

上述技术方案中，通过在小程序逻辑层中预先设置选择器，以及在标签描述文本中设置关联有选择器的各虚拟节点，这样就可以便于通过小程序逻辑层中预先设置的选择器，及时准确地从展示页面的标签描述文本中查找出与选择器匹配的各虚拟节点提供支持，并可以便于及时准确地读取出各虚拟节点和各虚拟节点的样式属性信息。然后，将选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点，并基于根节点所具有的样式属性信息，构建用于绘制存证文件的绘图区域，如此，可以便于绘图组件准确地在绘图区域中依次绘制各虚拟节点中除根节点以外的其它虚拟节点。

可选地，在将所述选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点之前，所述方法还包括：

引入离屏canvas实例，以用于在绘制存证文件时构建与所述根节点的样式属性信息匹配的绘图区域；

根据实际的业务应用场景，定义用于监测存证事件触发的事件监测函数。

上述技术方案中，通过引入离屏canvas实例，可以在用户无感知的情况下，构建与根节点的样式属性信息匹配的绘图区域，以便后续可以及时准确地绘制出存证文件。此外，通过定义用于监测存证事件触发的事件监测函数，可以便于后续及时有效地监控到存证事件的触发动作，从而可以有助于小程序的逻辑层及时准确地绘制出与展示页面对应的存证文件。

可选地，所述存证事件包括存证对象展示事件和存证对象确认事件；

所述存证文件包括与所述存证对象展示事件对应的存证触发页面，和与所述存证对象确认事件对应的存证确认页面。

上述技术方案中，通过生成存证对象展示事件对应的存证触发页面的存证文件以及存证对象确认事件对应的存证确认页面的存证文件，这样就可以实现将用户授权的关键操作过程进行存证，以便为后续明确针对存证内容的授权操作发生争议时的责任归属提供支持，并且，针对用户授权的中间操作过程，现有技术中后台只是生成并存储最终状态的存证文件，并不存储中间操作过程，因此本技术方案可以克服现有技术中后台无法存证用户授权的中间操作过程的缺陷。

第二方面，本发明实施例提供了一种小程序中存证文件的生成方法，包括：

小程序后台接收小程序前端发送的存证文件；

所述小程序后台对所述存证文件进行存储；

其中，所述存证文件是所述小程序前端根据各虚拟节点及各虚拟节点的样式属性信息绘制的；所述各虚拟节点及所述各虚拟节点的样式属性信息是所述小程序前端在监测到存证事件触发后从所述小程序前端的展示页面的标签描述文本中获取的。

上述技术方案中，通过将小程序前端生成的存证文件发送给小程序后台进行存储，如此，小程序后台只负责存储存证文件，并不负责生成存证文件，因此小程序后台并不知道存证文件的存证内容，所以在需要对存证内容进行更改时，可以只需要直接更改小程序前端展示的存证内容，并不需要同时在小程序后台进行更改，如此可以降低存证文件的维护成本。此外，将小程序前端生成的存证文件存储在小程序后台，以便为后续明确针对存证内容的授权操作发生争议时的责任归属提供支持。

第三方面，本发明实施例提供了小程序中存证文件的生成装置，包括：

确定单元，用于在监测到存证事件触发后，从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息；

处理单元，用于根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件；将所述存证文件发送至所述小程序前端对应的小程序后台。

第四方面，本发明实施例提供了小程序中存证文件的生成装置，包括：

接收单元，用于接收小程序前端发送的存证文件；

存储单元，用于对所述存证文件进行存储；

其中，所述存证文件是所述小程序前端根据各虚拟节点及各虚拟节点的样式属性信息绘制的；所述各虚拟节点及所述各虚拟节点的样式属性信息是所述小程序前端在监测到存证事件触发后从所述小程序前端的展示页面的标签描述文本中获取的。

第五方面，本发明实施例提供一种计算设备，包括至少一个处理器以及至少一个存储器，其中，所述存储器存储有计算机程序，当所述程序被所述处理器执行时，使得所述处理器执行上述第一方面或第二方面任意所述的小程序中存证文件的生成方法。

第六方面，本发明实施例提供一种计算机可读存储介质，其存储有可由计算设备执行的计算机程序，当所述程序在所述计算设备上运行时，使得所述计算设备执行上述第一方面或第二方面任意所述的小程序中存证文件的生成方法。

附图说明

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

图1为本发明实施例提供的一种系统架构的示意图；

图2为本发明实施例提供的一种小程序中存证文件的生成方法的流程示意图；

图3为本发明实施例提供的一种小程序中存证文件的生成装置的结构示意图；

图4为本发明实施例提供的另一种小程序中存证文件的生成装置的结构示意图；

图5为本发明实施例提供的一种计算设备的结构示意图。

具体实施方式

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

下面首先对本发明实施例中涉及的部分用语进行解释说明，以便于本领域技术人员进行理解。

(1)小程序：一种运行在APP(Application，应用程序)上的应用软件载体，比如运行在即时通信应用上的小程序等。

(2)即时通信应用：基于即时通信技术开发的一种应用软件，是一种能够传送文字、图片、甚至语音、视频，分享网页链接社交应用。

(3)即时通信(Instant Messaging，简称IM)：是移动终端、平板电脑和计算机用户之间利用网络进行即时消息的发送与接收过程。即时通信可以传送文字、图片、甚至语音、视频，分享网页链接。

(4)WXML：(WX Markup Language，WX标签语言)是各应用平台基于小程序框架各自设计的一套标签语言，结合基础组件、事件系统，可以构建出小程序页面的结构。

(5)WXSS：(WX Style Sheets，WX样式语言)是各应用平台各自设计的一套样式语言，用于描述WXML的组件样式，决定WXML的组件应该怎么显示。

(6)DOM：(Document Object Mode，文档对象模型)是W3C(World Wide WebConsortium，万维网联盟)制定的标准接口规范，是一种处理HTML(HyperText MarkupLanguage，超文本标记语言)和XML(Extensible Markup Language，可扩展标记语言)文件的标准API(Application Program Interface，应用程序接口)。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。

(7)canvas：一种用于绘制和渲染2D(two Dimensions，二维)或者3D(threeDimensions，三维)形状位图的画布区域，并提供基于JS(JavaScript，直译式脚本语言)的API用于动态绘制各种形状。

如上介绍了本发明实施例中涉及的部分用语，下面对本发明实施例涉及的技术特征进行介绍。

图1为本发明实施例提供的一种系统架构。如图1所示，该系统架构可以为服务器100，包括处理器110、通信接口120和存储器130。

其中，通信接口120用于与终端设备进行通信，收发该终端设备传输的信息，实现通信。

处理器110是服务器100的控制中心，利用各种接口和线路连接整个服务器100的各个部分，通过运行或执行存储在存储器130内的软件程序/或模块，以及调用存储在存储器130内的数据，执行服务器100的各种功能和处理数据。可选地，处理器110可以包括一个或多个处理单元。

存储器130可用于存储软件程序以及模块，处理器110通过运行存储在存储器130的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器130可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据业务处理所创建的数据等。此外，存储器130可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

需要说明的是，上述图1所示的结构仅是一种示例，本发明实施例对此不做限定。

基于上述描述，图2示例性的示出了本发明实施例提供的一种小程序中存证文件的生成方法的流程，该流程可以由小程序中存证文件的生成装置执行。

如图2所示，该流程具体包括：

步骤201，小程序前端在监测到存证事件触发后，从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息。

步骤202，所述小程序前端根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件。

步骤203，所述小程序前端将所述存证文件发送至所述小程序前端对应的小程序后台。

步骤204，所述小程序后台对所述存证文件进行存储。

上述步骤201中，在从小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息之前，为了及时准确地读取出各虚拟节点以及各虚拟节点的样式属性信息，需要在小程序的逻辑层中设置选择器，并在小程序的各展示页面的标签描述文本中设置关联有选择器的各虚拟节点。如此，通过在小程序逻辑层中预先设置选择器，以及在标签描述文本中设置关联有选择器的各虚拟节点，这样就可以便于后续通过小程序逻辑层中预先设置的选择器，及时准确地从展示页面的标签描述文本中查找出与选择器匹配的各虚拟节点提供支持，并可以便于后续及时准确地读取出各虚拟节点和各虚拟节点的样式属性信息。其中，各虚拟节点是小程序逻辑层描述渲染层真实DOM节点信息的数据对象。

在监测到存证事件触发后，从小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息。即，通过小程序逻辑层中预先设置的选择器，从小程序前端的展示页面的标签描述文本中，查找符合选择器的各虚拟节点并获取各虚拟节点的样式属性信息。如此，通过小程序逻辑层中预先设置的选择器，可以及时准确地从小程序前端的展示页面的标签描述文本中查找出与选择器匹配的各虚拟节点，并以此可以及时准确地获取到各虚拟节点的样式属性信息，从而可以有效地解决现有技术中无法直接对小程序标签元素进行遍历的问题。

上述步骤202中，小程序前端根据各虚拟节点及各虚拟节点的样式属性信息，绘制与展示页面对应的存证文件。具体地，小程序前端调用小程序框架中的绘图组件，并基于该绘图组件，按照各虚拟节点在标签描述文本中的顺序，根据各虚拟节点的样式属性信息依次绘制各虚拟节点，从而得到与展示页面对应的存证文件。具体地，将选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点。再基于根节点所具有的样式属性信息，构建用于绘制存证文件的绘图区域。然后在绘图区域中，按照各虚拟节点中除根节点以外的其它虚拟节点在标签描述文本中的顺序，并根据其它虚拟节点的样式属性信息依次绘制其它虚拟节点。因为小程序本身并不能通过调用终端设备的系统接口来进行页面截屏，所以可以通过调用小程序框架提供的绘图组件，并按照各虚拟节点在标签描述文本中的顺序来依次绘制出各虚拟节点及其样式属性信息，这样就可以有效地避免绘制出的各虚拟节点出现层叠的情况，并可以确保能够真实直观地反映各虚拟节点间的关系，以便直观准确地生成存证文件，同时也可以增加绘制出的各虚拟节点及其样式属性信息在画布上的美观。

此外，在将选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点之前，需要在小程序前端的展示页面中引入离屏canvas实例，以用于在绘制存证文件时构建与根节点的样式属性信息匹配的绘图区域。并根据实际的业务应用场景，定义用于监测存证事件触发的事件监测函数。如此，通过引入离屏canvas实例，可以在用户无感知的情况下，构建与根节点的样式属性信息匹配的绘图区域，以便后续可以及时准确地绘制出存证文件。此外，通过定义用于监测存证事件触发的事件监测函数，可以便于后续及时有效地监控到存证事件的触发动作，从而可以有助于小程序的逻辑层及时准确地绘制出与展示页面对应的存证文件。

其中，存证事件包括存证对象展示事件和存证对象确认事件；存证文件包括与存证对象展示事件对应的存证触发页面，和与存证对象确认事件对应的存证确认页面。基于本发明实施例提供的技术方案，通过生成存证对象展示事件对应的存证触发页面的存证文件以及存证对象确认事件对应的存证确认页面的存证文件，可以实现将用户授权的关键操作过程进行存证，以便为后续明确针对存证内容的授权操作发生争议时的责任归属提供支持。

示例性地，用户需要在贷款小程序上进行贷款交易时，点击贷款小程序页面中的贷款申请后，小程序的渲染层会在监测到用户的点击操作后，将相应的贷款合同协议以弹窗的形式展示给用户进行阅读。其中，该贷款合同协议的弹窗页面下方有“阅读并同意协议”需要用户进行勾选。此时用户并未勾选“阅读并同意协议”，则小程序的逻辑层在监测到用户的点击操作后，会使用逻辑层中设置的选择器，从展示贷款合同协议的页面的标签描述文本中查找出与选择器匹配的各虚拟节点，并获取各虚拟节点的样式属性信息。然后，使用调用小程序框架中的绘图组件，并基于该绘图组件，按照各虚拟节点在标签描述文本中的顺序，根据各虚拟节点的样式属性信息依次绘制各虚拟节点，从而得到与贷款合同协议触发页面对应的存证文件，即生成用户在勾选“阅读并同意协议”之前的贷款合同协议触发展示的页面状态的存证文件。进一步的，用户在阅读贷款合同协议的过程中或者在阅读完贷款合同协议后，对贷款合同协议的弹窗页面下方的“阅读并同意协议”进行勾选。此时，小程序的逻辑层在监测到用户的勾选操作后，会使用逻辑层中设置的选择器，从展示贷款合同协议的页面的标签描述文本中查找出与选择器匹配的各虚拟节点，并获取各虚拟节点的样式属性信息。然后，使用调用小程序框架中的绘图组件，并基于该绘图组件，按照各虚拟节点在标签描述文本中的顺序，根据各虚拟节点的样式属性信息依次绘制各虚拟节点，从而得到与贷款合同协议确认页面对应的存证文件，即生成用户在勾选“阅读并同意协议”之后的贷款合同协议确认的页面状态的存证文件。然后，将贷款合同协议触发展示的页面状态的存证文件和贷款合同协议确认的页面状态的存证文件发送给小程序后台进行存储。

上述步骤203和步骤204中，小程序前端将存证文件发送至小程序前端对应的小程序后台，小程序后台在接收到该存证文件后，对该存证文件进行存储。如此，由于小程序后台只负责存储存证文件，并不负责生成存证文件，因此小程序后台并不知道存证文件的存证内容，所以在需要对存证内容进行更改时，可以只需要直接更改小程序前端展示的存证内容，并不需要同时在小程序后台进行更改，如此可以降低存证文件的维护成本。此外，将小程序前端生成的存证文件存储在小程序后台，可以有助于为后续明确针对存证内容的授权操作发生争议时的责任归属提供支持。

有鉴于此，下面以即时通信应用的小程序为例，对本发明实施例中小程序中存证文件的生成方法的实施过程进行具体描述。其中，由于小程序的运行环境分为渲染层和逻辑层，两个层分别由不同的线程管理，且两者之间不能直接交互，因此不能在业务逻辑层直接操作页面DOM，即，不能直接在逻辑层对渲染层的WXML标签进行遍历操作，也就不能像HTML页面一样可以直接操作页面DOM生成存证文件。此外，由于小程序本身并不能调用终端设备的系统接口进行页面截屏，因此需要先通过小程序框架提供的canvas绘制能力将小程序的授权内容或者授权关键操作过程状态绘制到canvas，再将canvas绘制好的内容导出为图片文件，以此作为存证文件并将该存证文件发送到后台服务器进行存储。

Step1：需要在小程序所在应用载体框架的前端页面中引入一个离屏canvas实例，并定义该离屏canvas实例的宽度和高度分别等于授权协议根节点的宽度和高度。

示例性地，假设在即时通信应用的某一个小程序中，需要存证一个用户签署的授权协议，这份协议使用弹层的形式展示出来给用户查阅，在这个弹层的页面元素中，用户看到的协议内容大致是由这样一个WXML元素组成的区域，即：

对应的样式属性为：

基于此可知，定义的小程序所在应用载体框架的前端页面中的离屏canvas实例的宽度和高度也就是class＝”protocal”这个<view>标签的宽度和高度，即，分别为320rpx和200rpx。

Step2：根据实际的业务应用场景，定义触发生成存证文件的关键事件，即，定义用于监测存证事件触发的事件监测函数。比如，可以直接在小程序的逻辑层设置一个监控弹层打开的事件函数。

示例性地，用户因自身需求需要进行金融交易(比如借款交易或贷款交易等)，在某家金融企业的小程序中进行交易操作时，点击相应按钮打开用户交易协议或在阅读用户交易协议的过程中点击同意交易按钮，则小程序的逻辑层在监控到用户在小程序的渲染层点击相应按钮打开用户交易协议进行展示或者在用户阅读交易协议的过程中点击同意交易的按钮时，触发小程序的逻辑层进行生成存证文件的相关操作。

Step3：存证文件的生成事件触发后，小程序的逻辑层使用小程序的API，即通过wx.createSelectorQuery().selectAll(‘.wxml-to-canvas’)方式来获取选择器名称为“wxml-to-canvas”匹配的WXML虚拟节点对象。

示例性地，为了及时准确地读取WXML元素内容和WXSS样式属性，首先需要在定义界面WXML元素时，定义一个约定的选择器名称将其标记出来，比如<view class＝”wxml-to-canvas”></view>。这里的“wxml-to-canvas”就是约定的选择器名称。然后通过即时通信应用提供的wx.createSelectorQuery()方法获取SelectorQuery对象，并通过调用SelectorQuery对象实例中的selectAll(‘.wxml-to-canvas’)方法来获取选择器匹配的全部WXML虚拟节点对象。如此就可以解决现有技术中无法直接对小程序WXML元素进行遍历的问题。

需要说明的是，小程序提供的canvas绘制能力包括绘制路径、绘制矩形、绘制文本、绘制圆弧、绘制封闭形状的填充色等。如果能获取待绘制内容的页面区域中每个WXML标签元素的宽、高、背景色、距离根节点的坐标偏移量、边框大小及颜色、文字大小及颜色、标签元素的内容(即文字或者图片)等样式属性信息，则就能对应地使用canvas的能力动态绘制出完整的页面区域。然而，由于小程序的WXML结构树无法被遍历，想要实现运行时在逻辑层获取WXML元素的样式属性信息，必须要通过选择器来获取WXML节点信息的对象SelectorQuery。因此，本发明实施例为了及时准确地读取WXML元素内容和WXSS样式属性，首先需要在定义界面WXML元素时，定义一个约定的选择器名称将其标记出来。

Step4：小程序的逻辑层在基于Step3获取到选择器匹配的全部虚拟节点对象后，将选择器匹配出的第一个虚拟节点作为初始节点(即根节点)，并基于该根节点，使用fields()查询方法来获取该根节点相关的样式属性信息。

示例性地，可以将选择器匹配的全部虚拟节点对象中第一个匹配出的虚拟节点作为初始节点，也就是根节点class＝”protocal”这个<view>标签。并基于该初始节点，获取该初始节点的width和height属性。由于该初始节点对象不直接包含文本或者图片内容，WXSS属性只有width和height，因此只需要在离屏canvas中创建一个宽高分别为width和height的画布上下文即可。

Step5：小程序的逻辑层在遍历初始节点后，继续遍历下一个虚拟节点对象(即待绘制节点对象)，并基于该虚拟节点对象，使用fields()查询方法来获取该虚拟节点对象的样式属性信息，即获取到font-size、color、data-text以及该虚拟节点对象距离根节点的坐标偏移量等样式属性信息。然后调用canvas的相关API，依次在画布上绘制出节点信息及其包含的文字。

示例性地，在遍历初始节点后，遍历到下一个虚拟节点对象，也就是class＝”title”这个标签节点，获取到该虚拟节点对象的样式属性有font-size和color，另外需要读取dataset这个属性值(所有data-*这类自定义属性都通过dataset对象去获取)，从而获取到data-text。由于该虚拟节点对象不是第一个根节点，所以还需要获取该虚拟节点对象距离根节点的坐标偏移量left、top属性值，用于绘制该虚拟节点元素相对根节点的偏移量，以便避免画出来的多个节点层叠在一起。然后，在获取到以上这些节点样式属性信息之后，根据待绘制的内容的实际需要，调用CanvasContext.setFontSize、CanvasContext.fillText、CanvasContext.setFillStyle等canvas的相关API，依次在画布上绘制出节点信息及其包含的文字，也就是data-text的值。

Step6：重复上述Step5，直至小程序的逻辑层将最后一个虚拟节点标签<text>绘制完成，至此canvas绘制完成。

Step7：小程序的逻辑层调用离屏canvas实例中的Canvas.toDataURL这个API，将canvas画布里面绘制完成的全部内容生成指定临时图片文件，并通过HTTP网络传输协议(HyperText Transfer Protocol，超文本传输协议)将临时图片文件发送到后台服务器进行安全存储。至此，一次生成存证文件的过程完成。

需要说明的是，在实际应用场景中，一个小程序页面的WXML标签结构可能会复杂得多，WXML标签种类和嵌套关系也会复杂很多，为了方便在各种业务场景下快捷生成小程序页面内容进行存证，本发明实施例也可以将上述算法的逻辑和执行步骤封装成一个通用的工具函数，命名为wxmlToImage()。业务开发在需要进行小程序前端存证的场景中直接调用这个工具函数，就可以快速生成页面的内容进行存证。比如在class＝”title”这个wxml节点增加一个点击事件的监控函数，当小程序监控到用户点击该节点时，监控函数在完成业务逻辑的同时，只需要并行调用一次wxmlToImage(“.wxml-to-canvas”)这个函数，并传入需要生成存证文件的节点选择器名称wxml-to-canvas，即可生成包含存证内容的图片，然后再调用各自的业务后台接口，将图片文件发送到后台服务器进行存储。

此外，如果需要存证用户授权操作的关键过程，则基于上述存证文件的生成方案，可以将用户勾选“阅读并同意协议”之前的页面展示状态和用户勾选“阅读并同意协议”之后页面展示状态的这两个状态帧分别生成图片并发送到后台服务器进行存储，就能将用户授权的关键操作过程存证起来。

示例性地，假设用户基于自身需求需要进行借款交易，则在登录已注册的借款小程序后，浏览借款小程序的组件页面(比如某个菜单项等)，并在组件页面进行相应操作。比如用户借款小程序的借款页面点击借款申请操作，则小程序的渲染层会在监测到用户的点击操作后，将相应的借款合同协议以弹窗的形式展示给用户进行阅读。其中，该借款合同协议的弹窗页面下方有“阅读并同意协议”需要用户进行勾选。此时用户并未勾选“阅读并同意协议”，则小程序的逻辑层在监测到用户的点击操作后，会使用小程序的API，即使用wx.createSelectorQuery().selectAll(‘xxx’)来获取选择器名称为“xxx”匹配的全部虚拟节点对象，将选择器匹配的全部虚拟节点对象中第一个匹配出的虚拟节点作为根节点，并基于该根节点，获取该根节点的width和height属性。然后，在遍历根节点后，继续遍历下一个虚拟节点对象，并基于该虚拟节点对象，使用fields({rect:true,dataset:true,…})方法来获取该虚拟节点对象的样式属性信息，即获取到font-size、color、data-text以及该虚拟节点对象距离根节点的坐标偏移量等样式属性信息。在获取到以上这些节点样式属性信息之后，根据绘制内容的实际需要，调用CanvasContext.setFontSize、CanvasContext.fillText、CanvasContext.setFillStyle等canvas的相关API，依次在画布上绘制出节点信息及其包含的文字。以此继续遍历，直至遍历到全部虚拟节点对象中最后一个虚拟节点对象，并在画布上依次将全部虚拟节点对象的节点属性信息全部绘制完成，以此绘制出触发借款合同协议展示时的页面，即绘制出用户在勾选“阅读并同意协议”之前的页面展示状态，并基于借款合同协议展示时的页面生成对应的存证文件，即生成用户在勾选“阅读并同意协议”之前的页面展示状态的存证文件。

此外，用户在阅读借款合同协议的过程中或者在阅读完借款合同协议后，对借款合同协议的弹窗页面下方的“阅读并同意协议”进行勾选。此时，小程序的逻辑层在监测到用户的勾选操作后，会使用小程序的API，即使用wx.createSelectorQuery().selectAll(‘xxx’)来获取选择器名称为“xxx”匹配的全部虚拟节点对象，将选择器匹配的全部虚拟节点对象中第一个匹配出的虚拟节点作为根节点，并基于该根节点，获取该根节点的width和height属性。然后，在遍历根节点后，继续遍历下一个虚拟节点对象，并基于该虚拟节点对象，使用fields({rect:true,dataset:true,…})方法来获取该虚拟节点对象的样式属性信息，即获取到font-size、color、data-text以及该虚拟节点对象距离根节点的坐标偏移量等样式属性信息。在获取到以上这些节点样式属性信息之后，根据绘制内容的实际需要，调用CanvasContext.setFontSize、CanvasContext.fillText、CanvasContext.setFillStyle等canvas的相关API，依次在画布上绘制出节点信息及其包含的文字。以此继续遍历，直至遍历到全部虚拟节点对象中最后一个虚拟节点对象，并在画布上依次将全部虚拟节点对象的节点属性信息全部绘制完成，以此绘制出对借款合同协议进行确认后的页面，即绘制出用户在勾选“阅读并同意协议”之后的页面展示状态，并基于借款合同协议确认后的页面生成对应的存证文件，即生成用户在勾选“阅读并同意协议”之后的页面展示状态的存证文件。

在生成用户勾选“阅读并同意协议”之前的页面展示状态的存证文件和用户勾选“阅读并同意协议”之后的页面展示状态的存证文件后，将这两个存证文件发送给小程序后台进行存储，如此就可以及时准确地将用户授权的关键操作过程存证起来，以便为后续进行明确针对合同协议的授权操作发生争议时的责任归属提供支持。

需要说明的是，本发明还可以通过一种实施方式来实现Step4和Step5获取WXML标签节点的样式属性信息。即，通过使用小程序所在应用平台提供的拓展组件wxml-to-canvas来实现。开发者可通过npm包管理器(JavaScript提供的包管理工具)来安装这个组件包，然后在需要进行存证的页面中配置usingComponents引入该组件，最后在需要生成存证文件的位置，通过函数调用的方式传入待存证的页面模板及内容还有WXSS样式。其中，WXML-to-canvas实现WXML到canvas转换的原理，是通过内置的一个语法分析器xml-parser来分析和提取调用函数传入的模板字符和样式字符，从这些字符串中通过正则表达式匹配的方式提取到WXML标签、标签包含的内容和该节点的WXSS样式属性。开发者在调用该组件函数生成canvas的时候，需要将整个待绘制区域的WXML模板、动态内容和节点对应的WXSS样式都作为函数的变量传入到转换函数中运行。也就是说，开发者除了按照设计稿编写WXML静态模板代码和WXSS样式代码之外，还需要将这些WXML模板和WXSS样式代码维护在一个可访问的变量中，拼接上动态获取的内容，将变量作为工具函数的入参。

上述实施例表明，小程序前端在监测到存证事件触发后，从小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息。再根据各虚拟节点及各虚拟节点的样式属性信息，绘制与展示页面对应的存证文件。然后，将存证文件发送至小程序前端对应的小程序后台进行存储。由于该方法是在小程序前端生成存证文件，而小程序后台只负责存储存证文件，因此小程序后台并不知道存证文件的存证内容，所以在需要对存证内容进行更改时，可以只需要直接更改小程序前端展示的存证内容，并不需要同时在小程序后台进行更改，如此可以降低存证文件的维护成本。

基于相同的技术构思，图3示例性的示出了本发明实施例提供的一种小程序中存证文件的生成装置，该装置可以执行小程序中存证文件的生成方法的流程。

如图3所示，该装置包括：

确定单元301，用于在监测到存证事件触发后，从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息；

处理单元302，用于根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件；将所述存证文件发送至所述小程序前端对应的小程序后台。

可选地，所述确定单元301具体用于：

通过小程序逻辑层中预先设置的选择器，从所述小程序前端的展示页面的标签描述文本中，查找符合所述选择器的各虚拟节点并获取所述各虚拟节点的样式属性信息。

可选地，所述处理单元302具体用于：

调用小程序框架中的绘图组件，以控制所述绘图组件根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件。

可选地，所述处理单元302具体用于：

按照所述各虚拟节点在所述标签描述文本中的顺序，根据所述各虚拟节点的样式属性信息依次绘制所述各虚拟节点，从而得到与所述展示页面对应的存证文件。

可选地，所述处理单元302还用于：

在所述小程序的小程序逻辑层中预先设置选择器；

在所述小程序的各展示页面的标签描述文本中设置关联有所述选择器的各虚拟节点；

所述处理单元302还用于：

将所述选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点；

基于所述根节点所具有的样式属性信息，构建用于绘制所述存证文件的绘图区域；

在所述绘图区域中，按照所述各虚拟节点中除所述根节点以外的其它虚拟节点在所述标签描述文本中的顺序，并根据所述其它虚拟节点的样式属性信息依次绘制所述其它虚拟节点。

可选地，所述处理单元302还用于：

在将所述选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点的步骤之前，引入离屏canvas实例，以用于在绘制存证文件时构建与所述根节点的样式属性信息匹配的绘图区域；

根据实际的业务应用场景，定义用于监测存证事件触发的事件监测函数。

可选地，所述处理单元302具体用于：

所述存证事件包括存证对象展示事件和存证对象确认事件；

所述存证文件包括与所述存证对象展示事件对应的存证触发页面，和与所述存证对象确认事件对应的存证确认页面。

基于相同的技术构思，图4示例性的示出了本发明实施例提供的另一种小程序中存证文件的生成装置，该装置可以执行小程序中存证文件的生成方法的流程。

如图4所示，该装置包括：

接收单元401，用于接收小程序前端发送的存证文件；

存储单元402，用于对所述存证文件进行存储；

其中，所述存证文件是所述小程序前端根据各虚拟节点及各虚拟节点的样式属性信息绘制的；所述各虚拟节点及所述各虚拟节点的样式属性信息是所述小程序前端在监测到存证事件触发后从所述小程序前端的展示页面的标签描述文本中获取的。

基于相同的技术构思，本发明实施例还提供了一种计算设备，如图5所示，包括至少一个处理器501，以及与至少一个处理器连接的存储器502，本发明实施例中不限定处理器501与存储器502之间的具体连接介质，图5中处理器501和存储器502之间通过总线连接为例。总线可以分为地址总线、数据总线、控制总线等。

在本发明实施例中，存储器502存储有可被至少一个处理器501执行的指令，至少一个处理器501通过执行存储器502存储的指令，可以执行前述的小程序中存证文件的生成方法中所包括的步骤。

其中，处理器501是计算设备的控制中心，可以利用各种接口和线路连接计算设备的各个部分，通过运行或执行存储在存储器502内的指令以及调用存储在存储器502内的数据，从而实现数据处理。可选的，处理器501可包括一个或多个处理单元，处理器501可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理下发指令。可以理解的是，上述调制解调处理器也可以不集成到处理器501中。在一些实施例中，处理器501和存储器502可以在同一芯片上实现，在一些实施例中，它们也可以在独立的芯片上分别实现。

处理器501可以是通用处理器，例如中央处理器(CPU)、数字信号处理器、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本发明实施例中公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合小程序中存证文件的生成方法实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

存储器502作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块。存储器502可以包括至少一种类型的存储介质，例如可以包括闪存、硬盘、多媒体卡、卡型存储器、随机访问存储器(Random AccessMemory，RAM)、静态随机访问存储器(Static Random Access Memory，SRAM)、可编程只读存储器(Programmable Read Only Memory，PROM)、只读存储器(Read Only Memory，ROM)、带电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、磁性存储器、磁盘、光盘等等。存储器502是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。本发明实施例中的存储器502还可以是电路或者其它任意能够实现存储功能的装置，用于存储程序指令和/或数据。

基于相同的技术构思，本发明实施例还提供了一种计算机可读存储介质，其存储有可由计算设备执行的计算机程序，当所述程序在所述计算设备上运行时，使得所述计算设备执行上述小程序中存证文件的生成方法的步骤。

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

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

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

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

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

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

Claims (10)

1.一种小程序中存证文件的生成方法，其特征在于，包括：

小程序前端在监测到存证事件触发后，从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息；

所述小程序前端根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件；

所述小程序前端将所述存证文件发送至所述小程序前端对应的小程序后台。

2.如权利要求1所述的方法，其特征在于，所述从小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息，包括：

所述小程序前端通过小程序逻辑层中预先设置的选择器，从所述小程序前端的展示页面的标签描述文本中，查找符合所述选择器的各虚拟节点并获取所述各虚拟节点的样式属性信息。

3.如权利要求1所述的方法，其特征在于，所述小程序前端根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件，包括：

所述小程序前端调用小程序框架中的绘图组件，以控制所述绘图组件根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件。

4.如权利要求3所述的方法，其特征在于，所述根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件，包括：

按照所述各虚拟节点在所述标签描述文本中的顺序，根据所述各虚拟节点的样式属性信息依次绘制所述各虚拟节点，从而得到与所述展示页面对应的存证文件。

5.如权利要求4所述的方法，其特征在于，在从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息之前，还包括：

在所述小程序的小程序逻辑层中预先设置选择器；

在所述小程序的各展示页面的标签描述文本中设置关联有所述选择器的各虚拟节点；

按照所述各虚拟节点在所述标签描述文本中的顺序，根据所述各虚拟节点的样式属性信息依次绘制所述各虚拟节点，包括：

将所述选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点；

基于所述根节点所具有的样式属性信息，构建用于绘制所述存证文件的绘图区域；

在所述绘图区域中，按照所述各虚拟节点中除所述根节点以外的其它虚拟节点在所述标签描述文本中的顺序，并根据所述其它虚拟节点的样式属性信息依次绘制所述其它虚拟节点。

6.如权利要求5所述的方法，其特征在于，在将所述选择器匹配出的各虚拟节点中的第一个虚拟节点作为根节点之前，所述方法还包括：

引入离屏canvas实例，以用于在绘制存证文件时构建与所述根节点的样式属性信息匹配的绘图区域；

根据实际的业务应用场景，定义用于监测存证事件触发的事件监测函数。

7.如权利要求1至6任一项所述的方法，其特征在于，所述存证事件包括存证对象展示事件和存证对象确认事件；

所述存证文件包括与所述存证对象展示事件对应的存证触发页面，和与所述存证对象确认事件对应的存证确认页面。

8.一种小程序中存证文件的生成装置，其特征在于，包括：

确定单元，用于在监测到存证事件触发后，从所述小程序前端的展示页面的标签描述文本中确定出各虚拟节点及各虚拟节点的样式属性信息；

处理单元，用于根据所述各虚拟节点及所述各虚拟节点的样式属性信息，绘制与所述展示页面对应的存证文件；将所述存证文件发送至所述小程序前端对应的小程序后台。

9.一种计算设备，其特征在于，包括至少一个处理器以及至少一个存储器，其中，所述存储器存储有计算机程序，当所述程序被所述处理器执行时，使得所述处理器执行权利要求1至7任一权利要求所述的方法。

10.一种计算机可读存储介质，其特征在于，其存储有可由计算设备执行的计算机程序，当所述程序在所述计算设备上运行时，使得所述计算设备执行权利要求1至7任一权利要求所述的方法。

Images