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

权利要求书

1.一种生成骨架屏的代码的方法，其特征在于，包括：

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

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

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

2.如权利要求1所述的方法，其特征在于，所述组件对应的ReactElement对象为所述组件对应的JSON对象；

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

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

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

3.如权利要求2所述的方法，其特征在于，所述组件和所述组件的各子组件根据层级关系组成ReactElement组件树；

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

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

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

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

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

4.如权利要求3所述的方法，其特征在于，所述生成所述组件对应的骨架节点，包括：

获取所述组件对应的生成函数，将所述组件的组件样式输入至所述生成函数中，生成所述组件对应的骨架节点；所述生成函数用于指示所述组件对应的骨架节点的生成规则。

5.如权利要求1至4任一项所述的方法，其特征在于，所述生成所述业务代码对应的骨架屏的代码之后，还包括：

确定所述业务代码中的标注位置；所述标注位置用于指示所述业务代码中嵌入所述骨架屏的代码的位置；

将所述骨架屏的代码嵌入至所述标注位置，以便于在获取到所述业务代码对应的业务数据之前将所述骨架屏渲染显示在前端界面。

6.如权利要求5所述的方法，其特征在于，所述将所述骨架屏渲染显示在前端界面，包括：

通过所述前端界面所在平台对应的React库提供的方法，调用所述前端界面所在平台的接口将所述骨架屏的代码在所述前端界面上渲染显示。

7.一种生成骨架屏的装置，其特征在于，包括：

获取单元、处理单元；

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

所述处理单元，用于根据所述组件的描述信息，生成所述组件对应的ReactElement对象；根据所述组件对应的ReactElement对象，生成所述业务代码对应的骨架屏的代码。

8.如权利要求7所述的装置，其特征在于，所述组件对应的ReactElement对象为所述组件对应的JSON对象；

所述处理单元具体用于：

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

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