[发明专利]小程序的界面渲染方法、装置、电子设备和存储介质

说明书

本公开提出一种小程序的界面渲染方法、装置、电子设备和存储介质，其中，方法包括：通过JavaScript引擎根据用户界面的历史页面数据以及服务端发送的用户界面的新页面数据，生成目标页面数据，并根据目标页面数据，确定用户界面的虚拟DOM书中的节点更改数据；将节点更改数据发送给界面渲染组件，以使界面渲染组件根据节点更改数据对用户界面进行渲染，以得到更新后的用户界面。由此，在刷新用户界面时，无需传输用户界面的全部页面数据，并且，无需由界面渲染组件构建虚拟DOM树，提高用户界面的展现效率，进而提高用户的交互体验度。

技术领域

本公开涉及计算机技术领域，尤其涉及一种小程序的界面渲染方法、装置、电子设备和存储介质。

背景技术

小程序，是指一种基于特定编程语言开发完成，无需下载和安装，就可以使用的移动端APP。小程序的最大特点是使用便捷，无需手动在移动端的操作系统中安装，通常小程序依托于大型APP作为载体进行使用。

相关技术中，渲染应用于平台级App的小程序的用户界面的一般过程，是由JavaScript 引擎接将用户界面对应的整个页面数据通过系统提供的桥接功能发送给页面渲染WebView 组件，然后，WebView组件根据整个页面数据生成新的虚拟Dom树根据新的虚拟Dom树以及历史虚拟Dom树对小程序的用户界面进行再次渲染。

然而，在实现本申请的过程中发明人发现上述渲染应用于平台级App的小程序的用户界面的方式至少存在以下问题：(1)JavaScript引擎与WebView组件之间每次传输均是用户界面的全量数据，传输页面数据耗时较长，在更新用户界面时，用户界面的更新时间较长；(2)在渲染用户界面时，WebView组件需要生成与用户界面对应的新虚拟Dom树，并需要新虚拟Dom树以及历史虚拟Dom树的对比来执行刷新页面DOM的操作。因此，在用户使用用于平台级App的小程序的过程中小程序的用户界面渲染时间较长，展现小程序用户界面的时间较长，影响了用户与界面之间的交互，用户的交互体验度不理想。

发明内容

本公开提供一种小程序的界面渲染方法、装置、电子设备和存储介质，能够解决JavaScript引擎与WebView组件之间每次传输均是用户界面的全量数据，从而造成用户界面的更新时间较长的问题。

本公开第一方面实施例提出了一种小程序的界面渲染方法，包括：接收服务端发送的用户界面的当前页面数据；获取上次保存的所述用户界面的历史页面数据；根据所述当前页面数据和所述历史页面数据生成目标页面数据；根据所述目标页面数据，确定所述用户界面的虚拟DOM树中的节点更改数据；；将所述节点更改数据发送给界面渲染组件，以使所述界面渲染组件根据所述节点更改数据对所述用户界面进行渲染，以得到更新后的用户界面。

在本公开的一个实施例中，所述根据所述目标页面数据，确定所述用户界面的虚拟 DOM树中的节点更改数据，包括：根据所述目标页面数据，生成所述用户界面的新虚拟DOM树；获取上次保存的所述用户界面的历史虚拟DOM树；将所述新虚拟DOM树和所述历史虚拟DOM树进行数据差异比对，以得到所述节点更改数据。

在本公开的一个实施例中，在所述将所述节点更改数据发送给界面渲染组件之后，所述方法还包括：根据所述目标页面数据更新所述历史页面数据；

根据所述新虚拟DOM树更新所述历史虚拟DOM树。

在本公开的一个实施例中，所述当前页面数据为增量数据时，所述方法还包括：接收所述界面渲染组件发送的刷新用户界面事件。