一种TaroJS生态全局注入插件方法技术

本发明专利技术涉及插件加载相关领域，具体为一种TaroJS生态全局注入插件方法，本发明专利技术通过使用TaroJS的开放式跨端跨框架解决方案，具有一套代码适配多端的能力，使整个插件插入方法使用成本更低，同时无需开发逐个页面一一开发；在TaroJS的编译阶段，通过用户在编写的页面匹配规则匹配到.vue文件中，只有与规则相匹配的.vue文件才会自动注入公共组件，而公共组件无需逐个引用，实现一处配置全局生效，有效提高了整个系统的维护性；通过公用组件和Taro配置中的页面匹配规则为用户高度自定义，且规则支持使用正则和函数回调形式，又公用属性也为用户高度自定义，从而使整个系统方法可自定义度高，方便灵活使用。方便灵活使用。方便灵活使用。

【技术实现步骤摘要】
一种TaroJS生态全局注入插件方法


[0001]本专利技术涉及插件加载相关领域，具体为一种TaroJS生态全局注入插件方法。

技术介绍

[0002]taro是一套遵循React语法规范的多端开发解决方案。使用taro可以只用书写一套代码，再通过taro的编译工具，将源代码分别编译出在不同的端(微信/京东/百度/字节跳动小程序、h5、React
‑
Native等)运行的代码,如果需要满足不同端都有所表现，taro可以极大的帮助我们。taro多与taro
‑
ui结合开发，taro需要运行不同的命令，将taro代码编译成不同端的代码，然后在对应的开发工具中查看效果。其主要原因是Taro订制好一个统一的组件库标准，以及统一的API标准，在不同的端依靠它们的语法与能力去实现这个组件库与API，同时为不同的端编写相应的运行时框架，负责初始化等等操作，而TaroJS是在taro中引入js_Tarojs以解决在同时开发两个或多个Taro项目，但它们使用的Taro版本又不一致，每次运行一个项目可能就需要先重新安装一次Taro，而且多个项目不能同时运行的问题。
[0003]TaroJS也是一个开放式跨端跨框架解决方案，具有一套代码适配多端的能力。支持使用著名的前端框架Vue开发不同端的应用，极大的减少不同端的差异和学习成本，TaroJS主要存在三个阶段，开发阶段、编译阶段和运行时阶段，现有添加组件方案都是在开发阶段由开发逐一实现，当需要每个页面使用相同的组件时，先编写好组件，然后在需要使用的页面逐个添加，但上述方法存在一些缺陷，比如组件需逐个页面一一添加，过于繁琐；若后续需要修改组件内容也会逐个修改，会做很多重复性工作，难以维护，针对上述的一些缺陷，设计了一种TaroJS生态全局注入插件方法。

技术实现思路

[0004]本专利技术的目的在于提供一种TaroJS生态全局注入插件方法，以解决上述
技术介绍
中提出的问题。
[0005]为实现上述目的，本专利技术提供如下技术方案：一种TaroJS生态全局注入插件方法，包括以下步骤：
[0006]步骤S1、用户首先根据自己的需求在TaroJS的开发阶段编写好公共组件及Taro配置中的页面匹配规则；
[0007]步骤S2、在步骤S1中组件和配置编写完成后，用户再根据自己需求在TaroJS的开发阶段编写好预设插件所需的配置；
[0008]步骤S3、在TaroJS的编译阶段，通过用户在步骤S1中编写的页面匹配规则匹配到.vue文件，其中只有与规则相匹配的.vue文件才会自动注入公共组件，而公共组件无需逐个引用；
[0009]步骤S4、对步骤S3中的.vue文件进行解析，得到template内节点信息；
[0010]步骤S5、将用户的在步骤S2中所编写的插件配置插入到步骤S3中.vue文件指定位
置并赋于用户在配置中定义的公用属性；
[0011]步骤S6、在TaroJS的运行阶段，Taro解析步骤S5中的.vue文件，然后.vue文件根据平台差异生成template动态节点和节点数据，此时TaroJS运行阶段页面已包含全局注入的组件。
[0012]优选的，所述步骤S1中公共组件具体的编写步骤为：首先安装Taro CLI；随后创建公共组件项目；对公共组件项目进行编写，其具体的代码如下：
[0013][0014][0015]优选的，所述步骤S1中公共组件可以是任何组件，如通用的容器组件和页面水印，且公共组件中的内容由用户自定义，无任何限制。
[0016]优选的，所述步骤S1中公用组件和Taro配置中的页面匹配规则为用户高度自定义，规则支持使用正则和函数回调形式，所述步骤S5中公用属性为用户高度自定义。
[0017]优选的，所述步骤S2中预设插件所需的配置具体包括组件名、插入类型和位置。
[0018]优选的，所述步骤S3中与规则相匹配的文件自动注入公共组件，其中公共组件无需逐个引用，其具体代码如下：
[0019]import{createApp}from
‘
vue
’
；
[0020]import Container from
‘
@/src/components/Container.vue
’
；
[0021]createApp().component(
‘
Container
’
,Container)。
[0022]优选的，所述步骤S4对.vue文件进行解析具体为：首先通过Webpack对.vue文件进行打包，然后Webpack使用Loader和Plugin处理解析.vue文件，其具体代码如下：
[0023][0024][0025]优选的，所述步骤S6的template动态节点和节点数据采用JavaScript进行数据动态渲染
[0026]与现有技术相比，本专利技术的有益效果是：
[0027]1、本专利技术通过使用TaroJS的开放式跨端跨框架解决方案，具有一套代码适配多端的能力，使整个插件插入方法使用成本更低，同时无需开发逐个页面一一开发。
[0028]2、本专利技术在TaroJS的编译阶段，通过用户在编写的页面匹配规则匹配到.vue文件中，只有与规则相匹配的.vue文件才会自动注入公共组件，而公共组件无需逐个引用，实现一处配置全局生效，有效提高了整个系统的维护性。
[0029]3、本专利技术通过公用组件和Taro配置中的页面匹配规则为用户高度自定义，且规则支持使用正则和函数回调形式，又公用属性也为用户高度自定义，从而使整个系统方法可自定义度高，方便灵活使用。
附图说明
[0030]图1为本专利技术的工作流程示意图；
[0031]图2为本专利技术的工作原理结构示意图。
具体实施方式
[0032]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于
本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0033]请参阅图1
‑
2，本专利技术提供一种技术方案：一种TaroJS生态全局注入插件方法，包括以下步骤：
[0034]步骤S1、用户首先根据自己的需求在TaroJS的开发阶段编写好公共组件及Taro配置中的页面匹配规则；
[0035]步骤S2、在步骤S1中组件和配置编写完成后，用户再根据自己需求在TaroJS的开发阶段编写好预设插件所需的配置；
[0036]步骤S3、在TaroJS的编译阶段，通过用户在步骤S1中编写的页面匹配规则匹配到.vue文件，其中只有与规则相匹配的.vue文件才会自动注入公共组件，而公共组件无需逐个引用；
[0037]步骤S4、对步骤S3中的.vue文件进行解析，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种TaroJS生态全局注入插件方法，其特征在于，包括以下步骤：步骤S1、用户首先根据自己的需求在TaroJS的开发阶段编写好公共组件及Taro配置中的页面匹配规则；步骤S2、在步骤S1中组件和配置编写完成后，用户再根据自己需求在TaroJS的开发阶段编写好预设插件所需的配置；步骤S3、在TaroJS的编译阶段，通过用户在步骤S1中编写的页面匹配规则匹配到.vue文件，其中只有与规则相匹配的.vue文件才会自动注入公共组件，而公共组件无需逐个引用；步骤S4、对步骤S3中的.vue文件进行解析，得到template内节点信息；步骤S5、将用户的在步骤S2中所编写的插件配置插入到步骤S3中.vue文件指定位置并赋于用户在配置中定义的公用属性；步骤S6、在TaroJS的运行阶段，Taro解析步骤S5中的.vue文件，然后.vue文件根据平台差异生成template动态节点和节点数据，此时TaroJS运行阶段页面已包含全局注入的组件。2.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S1中公共组件具体的编写步骤为：首先安装TaroCLI；随后创建公共组件项目；对公共组件项目进行编写，其具体的代码如下：3.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S1中公共组件可以是任何组件，且公共组件中的内容由用户自定义，无任何限制。4.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S1中公用组件和Taro配置中的页面匹...

【专利技术属性】
技术研发人员：向成军，
申请(专利权)人：上海镁信健康科技股份有限公司，
类型：发明
国别省市：