[发明专利]一种生成骨架屏的代码的方法及装置

说明书

本发明公开了一种生成骨架屏的代码的方法及装置，其中，方法包括：获取用于前端界面显示的业务代码，业务代码包括组件的描述信息，根据组件的描述信息，生成组件对应的ReactElement对象，根据组件对应的ReactElement对象，生成业务代码对应的骨架屏的代码。该技术方案无需开发人员人工编写骨架屏代码，降低开发成本。

技术领域

本发明实施例涉及金融科技(Fintech)领域，尤其涉及一种生成骨架屏的代码的方法及装置。

背景技术

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

骨架屏指的是在页面未渲染完成时，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户页面正在加载的错觉，待页面渲染完成之后再用页面替换骨架屏，从而减少页面白屏的时间，给用户带来更好的体验。

现有技术中，前端开发人员通过编写与真实页面结构一样的骨架屏的代码，用于在前端页面渲染真实数据之前进行渲染，等拿到真实数据之后切换渲染真实页面。但该方式需要开发人员大量编写重复性代码，每个前端页面需要编写一套对应的骨架屏代码，且一旦页面结构发生变化，开发人员需要针对发生变化后的页面结构重新调整骨架屏代码，维护成本高。

发明内容

本发明实施例提供一种生成骨架屏的代码的方法及装置，无需开发人员人工编写骨架屏代码，降低开发成本。

本发明实施例提供的一种生成骨架屏的代码的方法，包括：

获取用于前端界面显示的业务代码；所述业务代码包括组件的描述信息；

根据所述组件的描述信息，生成所述组件对应的ReactElement对象；

根据所述组件对应的ReactElement对象，生成所述业务代码对应的骨架屏的代码。

可选的，所述组件对应的ReactElement对象为所述组件对应的JSON对象；

所述根据所述组件的描述信息，生成所述组件对应的ReactElement对象，包括：

调用组件渲染接口，将所述组件的描述信息转换成所述组件对应的JSON对象；

若确定所述组件对应的JSON对象中包括所述组件的一级子组件的描述信息，则调用所述组件渲染接口，将所述一级子组件的描述信息转换成所述一级子组件对应的JSON对象，并进一步确定所述一级子组件对应的JSON对象中是否包括所述组件的二级子组件的描述信息，直至确定出所述组件的各子组件对应的JSON对象。

可选的，所述组件和所述组件的各子组件根据层级关系组成ReactElement组件树；

所述根据所述组件对应的ReactElement对象，生成所述业务代码对应的骨架屏的代码，包括：

从所述ReactElement组件树的根节点开始，从上到下遍历；针对所述ReactElement组件树中的任一个组件，执行下述操作：

确定所述组件对应的JSON对象中是否存在自定义属性，若是，则根据所述自定义属性，生成所述组件对应的骨架节点；

否则，根据所述组件对应的JSON对象中的组件类型，在确定生成所述组件对应的骨架节点之后，根据所述组件对应的JSON对象中的组件样式，生成所述组件对应的骨架节点；

根据所述组件对应的骨架节点，生成所述组件对应的骨架屏的代码。

可选的，所述生成所述组件对应的骨架节点，包括：