将前端vue组件编译为原生组件的方法、装置、设备及介质与流程

技术特征：
1.一种将前端vue组件编译为原生组件的方法，其特征在于，包括：获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；根据所述vue组件地址查找对应的vue组件；基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及所述vue组件的样式代码编译成所述原生组件适用的语法。2.根据权利要求1所述的将前端vue组件编译为原生组件的方法，其特征在于，所述基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件，包括：创建一个以所述vue组件的名称为文件名且以html为扩展名的文件，得到第一文件；创建一个以js为扩展名且用于声明原生组件的类的文件，得到第二文件；将所述第二文件加载进所述第一文件中；向所述原生组件的类中增加基础内容，得到增加基础内容后的原生组件的类；其中，所述基础内容包括constructor函数，所述constructor函数用于获得继承类所有的静态属性和方法函数；基于所述vue组件的名称和所述增加基础内容后的原生组件的类，根据预设的定义方法生成初始原生组件。3.根据权利要求2所述的将前端vue组件编译为原生组件的方法，其特征在于，所述基于所述初始原生组件，根据原生组件的语法，将所述vue组件的页面展示模板代码编译成原生组件适用的语法，包括：将所述vue组件的页面展示模板标签内的所有内容以及所述页面展示模板标签本身复制到所述第一文件中；根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译。4.根据权利要求3所述的将前端vue组件编译为原生组件的方法，其特征在于，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：当在所述页面展示模板标签内查到@click关键字时，在所述@click所在标签上增加一个id属性；其中，若在所述页面展示模板标签内查到@click关键字，则认为所述页面展示模板绑定了点击事件；在所述点击事件触发后，获取执行所述点击事件函数的方法名；根据所述方法名查找得到所述方法对应的函数本体；将所述函数本体复制到回调函数的内容中；根据所述id属性，获取所述点击事件所在元素；在所述constructor函数内，通过添加事件监听的方法给所述元素添加点击事件；其中，所述点击事件触发时触发所述回调函数。5.根据权利要求3所述的将前端vue组件编译为原生组件的方法，其特征在于，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：当在所述页面展示模板标签内查到v-for关键字时，获取所述v-for属性对应的属性
值；所述属性值为数组类型的数据，所述数组类型的数据是一个变量的形式，表示通过遍历数组内所有元素并将每一个元素作为列表的一项；其中，若在所述页面展示模板标签内查到v-for关键字，则认为所述页面展示模板绑定了for循环标签；在所述v-for属性所在标签的父级标签上增加一个id属性；获取所述数组中每一元素展示的内容；根据预设的规则，对每一元素展示的内容进行转换，得到转换后每一元素展示的内容；在所述constructor函数内，以循环体循环的数据为所述数组、循环拼装的内容为所述转换后每一元素展示的内容生成一个for循环体，得到一列表；根据所述id属性，查找父级元素，并将所述列表作为所述父级元素新的子元素。6.根据权利要求3所述的将前端vue组件编译为原生组件的方法，其特征在于，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：当在所述页面展示模板标签内查找到插值表达式时，获取所述插值表达式内的变量以及所述变量的默认值；其中，若所述页面展示模板标签内查找到插值表达式，则认为所述页面展示模板绑定了插值表达式；将所述默认值复制到所述constructor函数内，作为所述原生组件初始化时定义的默认值；通过所述变量查找得到包含所述变量的方法函数；将所述方法函数复制到与所述constructor函数的同一个层级中，作为所述原生组件的静态方法函数。7.根据权利要求3所述的将前端vue组件编译为原生组件的方法，其特征在于，所述基于所述初始原生组件，根据原生组件语法，将所述vue组件的样式代码编译成所述原生组件适用的语法，具体包括：查找所述vue组件内部的样式标签，复制所述样式标签的所有内容；在所述页面展示模板标签内的顶层位置，生成一个新的样式标签；将所述样式标签的所有内容粘贴到所述新的样式标签内。8.一种将前端vue组件编译为原生组件的装置，其特征在于，包括：获取模块，用于获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；查找模块，用于根据所述vue组件地址查找对应的vue组件；初始化模块，用于基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；编译模块，用于基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及vue组件的样式代码编译成所述原生组件适用的语法。9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

技术总结
本发明涉及计算机技术领域，尤其涉及一种将前端vue组件编译为原生组件的方法、装置、设备及介质，所述方法包括：获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；根据所述vue组件地址查找对应的vue组件；基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及所述vue组件的样式代码编译成所述原生组件适用的语法。本发明实施例通过智能识别现有vue组件的语法，并按照原生组件的现有语法对其进行编译改造，使得现有的vue组件可以直接通过编译得到原生组件，如此，本发明实施例能够提高小型项目的开发效率以及减少应用加载的时间。应用加载的时间。应用加载的时间。


技术研发人员：黄康
受保护的技术使用者：平安普惠企业管理有限公司
技术研发日：2022.05.27
技术公布日：2022/8/9