[发明专利]将前端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属性，查找父级元素，并将所述列表作为所述父级元素新的子元素。