共享前端组件的渲染方法、装置、设备及存储介质制造方法及图纸

本发明专利技术涉及研发管理技术领域，公开了一种共享前端组件的渲染方法、装置、设备及存储介质，根据用户指令下载对应的前端组件进行渲染，提高了工作效率。本发明专利技术方法包括：设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据；根据预置JS对象和预置开发框架生成候选前端组件；根据入口函数、参数和候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；根据HTML代码片段动态渲染对应的初始化的候选前端组件，获取渲染后的目标前端组件；根据渲染后的目标前端组件，生成JS文件；获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，在预置页面中生成相对应的渲染后的目标前端组件。

Rendering methods, devices, devices and storage media of shared front-end components

【技术实现步骤摘要】
共享前端组件的渲染方法、装置、设备及存储介质
本专利技术涉及研发管理
，尤其涉及共享前端组件的渲染方法、装置、设备及存储介质。
技术介绍
在线客服系统是基于自然语言技术的多渠道、全天候的在线服务机器人，在线客服系统应用的领域非常广，尤其在金融行业应用的更加广泛，这种通过问答的形式解决用户各类问题，已经成为企业提升与客户沟通效率，减少沟通成本的重要支撑；在线客服系统涉及到众多的企业知识和用户数据，用户咨询的不同的问题会匹配到不同的知识和数据，这些知识和数据需要以不同的展示样式告知用户。传统的开发模式是当业务需要渲染一个特殊的知识时，将用户的问题传输到后台服务，机器人进行语义解析，匹配到对应的问题和答案，答案是一个指令标签，会通知大数据系统去查询用户的账单，然后将指令标签和用户的数据传给前端页面，前端页面根据指令标签渲染界面设计及数据。传统的开发模式用于一个业务领域需要一个在线客服机器人的情况，是可以保证工作效率的，如果多个不同的业务领域需要同时用到在线客服机器人为用户服务，在线客服机器人需要在不同的前端各自对同一个业务数据进行编码、解析和渲染，工作效率非常低。
技术实现思路
本专利技术的提供一种共享前端组件的渲染方法、装置、设备及存储介质，用于根据不同的JS对象采用统一的开发框架开发前端组件，并将前端组件打包为JS文件上传至资源共享平台，根据用户指令调用对应的JS文件。为本专利技术实施例的第一方面提供一种共享前端组件的渲染方法，包括：设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；根据所述预置JS对象和预置开发框架生成候选前端组件；根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。可选的，在本专利技术实施例第一方面的第一种实现方式中，所述根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件包括：将所述挂载节点值和所述渲染参数基础数据输入所述入口函数，为所述候选前端组件赋值，生成HTML代码片段；更新所述预置JS对象与入口函数，完成对所述候选前端组件的初始化，得到初始化的候选前端组件。可选的，在本专利技术实施例第一方面的第二种实现方式中，所述根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件包括：根据所述HTML代码片段生成界面UI节点，所述UI节点包括业务逻辑和层叠样式表CSS样式；将所述UI节点挂载到位置节点中，得到渲染后的目标前端组件，所述位置节点为初始化时传入挂载节点值的节点。可选的，在本专利技术实施例第一方面的第三种实现方式中，在所述设置开发框架的入口函数与JS对象的参数，所述参数包括入口函数的挂载节点值和渲染参数基础数据之前，所述方法还包括：定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；设置开发框架和开发框架的基础样式，获取预置开发框架。可选的，在本专利技术实施例第一方面的第四种实现方式中，所述设置开发框架和开发框架的基础样式，获取预置开发框架包括：设置开发框架为统一开发框架，所述统一开发框架为前端技术框架中的一种；调用flexible插件设置所述统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；将预置的尺寸比例，确定为所述设置后的统一开发框架的界面UI设计标准，得到预置开发框架。可选的，在本专利技术实施例第一方面的第五种实现方式中，所述根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成包括：将所述渲染后的目标前端组件挂载到全局对象中，得到挂载后的前端组件，所述全局对象为window对象；将所述挂载后的前端组件进行打包，得到打包文件；为所述打包文件配置组件名称，所述组件名称以所述打包文件的文件名称进行定义，得到JS文件；将所述JS文件上传至资源共享平台进行注册与发布，以实现对全部所述JS文件的存储。可选的，在本专利技术实施例第一方面的第六种实现方式中，所述获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件包括：获取用户指令，用户指令包括语音指令和文字指令；根据所述用户指令，在所述资源共享平台中搜寻与所述用户指令关联的JS文件，得到目标JS文件；从所述资源共享平台下载所述目标JS文件，并在预置页面中，根据所述目标JS文件渲染相对应的渲染后的目标前端组件。本专利技术实施例的第二方面提供一种共享前端组件的渲染装置，包括：设置单元，用于设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；第一生成单元，用于根据所述预置JS对象和预置开发框架生成候选前端组件；初始化单元，用于根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；渲染单元，用于根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；第二生成单元，用于根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；处理单元，用于获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。可选的，在本专利技术实施例第二方面的第一种实现方式中，初始化单元具体包括：第一生成模块，用于将所述挂载节点值和所述渲染参数基础数据输入所述入口函数，为所述候选前端组件赋值，生成HTML代码片段；更新模块，用于更新所述预置JS对象与入口函数，完成对所述候选前端组件的初始化，得到初始化的候选前端组件。可选的，在本专利技术实施例第二方面的第二种实现方式中，渲染单元具体包括：第二生成模块，用于根据所述HTML代码片段生成界面UI节点，所述UI节点包括业务逻辑和层叠样式表CSS样式；获取模块，用于将所述UI节点挂载到位置节点中，得到渲染后的目标前端组件，所述位置节点为初始化时传入挂载节点值的节点。可选的，在本专利技术实施例第二方面的第三种实现方式中，共享前端组件的渲染装置还包括：定义单元，用于定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；预设单元，用于设置开发框架和开发框架的基础样式，获取预置开发框架。可选的，在本专利技术实施例第二方面的第四种实现方式中，预设单元具体用于：设置开发框架为统一开发框架，所述统一开发框架为前端技术框架中的一种；调用flexible插件设置所述统一开发框架的根节点本文档来自技高网...

【技术保护点】
1.一种共享前端组件的渲染方法，其特征在于，包括：/n设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；/n根据所述预置JS对象和预置开发框架生成候选前端组件；/n根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；/n根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；/n根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；/n获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。/n

【技术特征摘要】
1.一种共享前端组件的渲染方法，其特征在于，包括：
设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；
根据所述预置JS对象和预置开发框架生成候选前端组件；
根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；
根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；
根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；
获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。


2.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，所述根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件包括：
将所述挂载节点值和所述渲染参数基础数据输入所述入口函数，为所述候选前端组件赋值，生成HTML代码片段；
更新所述预置JS对象与入口函数，完成对所述候选前端组件的初始化，得到初始化的候选前端组件。


3.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，所述根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件包括：
根据所述HTML代码片段生成界面UI节点，所述UI节点包括业务逻辑和层叠样式表CSS样式；
将所述UI节点挂载到位置节点中，得到渲染后的目标前端组件，所述位置节点为初始化时传入挂载节点值的节点。


4.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，在所述设置开发框架的入口函数与JS对象的参数，所述参数包括入口函数的挂载节点值和渲染参数基础数据之前，所述方法还包括：
定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；
设置开发框架和开发框架的基础样式，获取预置开发框架。


5.根据权利要求4所述的共享前端组件的渲染方法，其特征在于，所述设置开发框架和开发框架的基础样式，获取预置开发框架包括：
设置开发框架为统一开发框架，所述统一开发框架为前端技术框架中的一种；
调用flexible插件设置所述统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；
将预置的尺寸比例，确定为所述设置后的统一开发框架的界面UI设计标准，得到预置开发框架。

【专利技术属性】
技术研发人员：许海金，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：广东;44