CN116185406A - 一种TaroJS生态全局注入插件方法 - Google Patents

一种TaroJS生态全局注入插件方法 Download PDF

Info

Publication number
CN116185406A
CN116185406A CN202310130136.3A CN202310130136A CN116185406A CN 116185406 A CN116185406 A CN 116185406A CN 202310130136 A CN202310130136 A CN 202310130136A CN 116185406 A CN116185406 A CN 116185406A
Authority
CN
China
Prior art keywords
tarojs
vue
file
plug
ecological
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310130136.3A
Other languages
English (en)
Inventor
向成军
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Maxin Health Technology Co ltd
Original Assignee
Shanghai Maxin Health Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Maxin Health Technology Co ltd filed Critical Shanghai Maxin Health Technology Co ltd
Priority to CN202310130136.3A priority Critical patent/CN116185406A/zh
Publication of CN116185406A publication Critical patent/CN116185406A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Stored Programmes (AREA)

Abstract

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

Description

一种TaroJS生态全局注入插件方法
技术领域
本发明涉及插件加载相关领域，具体为一种TaroJS生态全局注入插件方法。
背景技术
taro是一套遵循React语法规范的多端开发解决方案。使用taro可以只用书写一套代码，再通过taro的编译工具，将源代码分别编译出在不同的端(微信/京东/百度/字节跳动小程序、h5、React-Native等)运行的代码,如果需要满足不同端都有所表现，taro可以极大的帮助我们。taro多与taro-ui结合开发，taro需要运行不同的命令，将taro代码编译成不同端的代码，然后在对应的开发工具中查看效果。其主要原因是Taro订制好一个统一的组件库标准，以及统一的API标准，在不同的端依靠它们的语法与能力去实现这个组件库与API，同时为不同的端编写相应的运行时框架，负责初始化等等操作，而TaroJS是在taro中引入js_Tarojs以解决在同时开发两个或多个Taro项目，但它们使用的Taro版本又不一致，每次运行一个项目可能就需要先重新安装一次Taro，而且多个项目不能同时运行的问题。
TaroJS也是一个开放式跨端跨框架解决方案，具有一套代码适配多端的能力。支持使用著名的前端框架Vue开发不同端的应用，极大的减少不同端的差异和学习成本，TaroJS主要存在三个阶段，开发阶段、编译阶段和运行时阶段，现有添加组件方案都是在开发阶段由开发逐一实现，当需要每个页面使用相同的组件时，先编写好组件，然后在需要使用的页面逐个添加，但上述方法存在一些缺陷，比如组件需逐个页面一一添加，过于繁琐；若后续需要修改组件内容也会逐个修改，会做很多重复性工作，难以维护，针对上述的一些缺陷，设计了一种TaroJS生态全局注入插件方法。
发明内容
本发明的目的在于提供一种TaroJS生态全局注入插件方法，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种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运行阶段页面已包含全局注入的组件。
优选的，所述步骤S1中公共组件具体的编写步骤为：首先安装Taro CLI；随后创建公共组件项目；对公共组件项目进行编写，其具体的代码如下：
Figure BDA0004083495560000021
Figure BDA0004083495560000031
优选的，所述步骤S1中公共组件可以是任何组件，如通用的容器组件和页面水印，且公共组件中的内容由用户自定义，无任何限制。
优选的，所述步骤S1中公用组件和Taro配置中的页面匹配规则为用户高度自定义，规则支持使用正则和函数回调形式，所述步骤S5中公用属性为用户高度自定义。
优选的，所述步骤S2中预设插件所需的配置具体包括组件名、插入类型和位置。
优选的，所述步骤S3中与规则相匹配的文件自动注入公共组件，其中公共组件无需逐个引用，其具体代码如下：
import{createApp}from‘vue’；
import Container from‘@/src/components/Container.vue’；
createApp().component(‘Container’,Container)。
优选的，所述步骤S4对.vue文件进行解析具体为：首先通过Webpack对.vue文件进行打包，然后Webpack使用Loader和Plugin处理解析.vue文件，其具体代码如下：
Figure BDA0004083495560000032
Figure BDA0004083495560000041
优选的，所述步骤S6的template动态节点和节点数据采用JavaScript进行数据动态渲染
与现有技术相比，本发明的有益效果是：
1、本发明通过使用TaroJS的开放式跨端跨框架解决方案，具有一套代码适配多端的能力，使整个插件插入方法使用成本更低，同时无需开发逐个页面一一开发。
2、本发明在TaroJS的编译阶段，通过用户在编写的页面匹配规则匹配到.vue文件中，只有与规则相匹配的.vue文件才会自动注入公共组件，而公共组件无需逐个引用，实现一处配置全局生效，有效提高了整个系统的维护性。
3、本发明通过公用组件和Taro配置中的页面匹配规则为用户高度自定义，且规则支持使用正则和函数回调形式，又公用属性也为用户高度自定义，从而使整个系统方法可自定义度高，方便灵活使用。
附图说明
图1为本发明的工作流程示意图；
图2为本发明的工作原理结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1-2，本发明提供一种技术方案：一种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运行阶段页面已包含全局注入的组件。
进一步的，步骤S1中公共组件具体的编写步骤为：首先安装Taro CLI；随后创建公共组件项目；对公共组件项目进行编写，其具体的代码如下：
Figure BDA0004083495560000051
进一步的，步骤S1中公共组件可以是任何组件，如通用的容器组件和页面水印，且公共组件中的内容由用户自定义，无任何限制。
进一步的，步骤S1中公用组件和Taro配置中的页面匹配规则为用户高度自定义，规则支持使用正则和函数回调形式，步骤S5中公用属性为用户高度自定义。
进一步的，步骤S2中预设插件所需的配置具体包括组件名、插入类型和位置。
进一步的，步骤S3中与规则相匹配的文件自动注入公共组件，其中公共组件无需逐个引用，其具体代码如下：
import{createApp}from‘vue’；
import Container from‘@/src/components/Container.vue’；
createApp().component(‘Container’,Container)。
进一步的，步骤S4对.vue文件进行解析具体为：首先通过Webpack对.vue文件进行打包，然后Webpack使用Loader和Plugin处理解析.vue文件，其具体代码如下：
Figure BDA0004083495560000061
Figure BDA0004083495560000071
进一步的，步骤S6的template动态节点和节点数据采用JavaScript进行数据动态渲染。
本发明通过使用TaroJS的开放式跨端跨框架解决方案，具有一套代码适配多端的能力，使整个插件插入方法使用成本更低，同时无需开发逐个页面一一开发；在TaroJS的编译阶段，通过用户在编写的页面匹配规则匹配到.vue文件中，只有与规则相匹配的.vue文件才会自动注入公共组件，而公共组件无需逐个引用，实现一处配置全局生效，有效提高了整个系统的维护性；通过公用组件和Taro配置中的页面匹配规则为用户高度自定义，且规则支持使用正则和函数回调形式，又公用属性也为用户高度自定义，从而使整个系统方法可自定义度高，方便灵活使用。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (8)

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；随后创建公共组件项目；对公共组件项目进行编写，其具体的代码如下：
Figure FDA0004083495550000011
3.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S1中公共组件可以是任何组件，且公共组件中的内容由用户自定义，无任何限制。
4.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S1中公用组件和Taro配置中的页面匹配规则为用户高度自定义，规则支持使用正则和函数回调形式，所述步骤S5中公用属性为用户高度自定义。
5.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S2中预设插件所需的配置具体包括组件名、插入类型和位置。
6.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S3中与规则相匹配的文件自动注入公共组件，其中公共组件无需逐个引用，其具体代码如下：
import{createApp}from‘vue’；
importContainerfrom‘@/src/components/Container.vue’；
createApp().component(‘Container’,Container)。
7.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S4对.vue文件进行解析具体为：首先通过Webpack对.vue文件进行打包，然后Webpack使用Loader和Plugin处理解析.vue文件，其具体代码如下：
Figure FDA0004083495550000021
Figure FDA0004083495550000031
8.根据权利要求1所述的一种TaroJS生态全局注入插件方法，其特征在于：所述步骤S6的template动态节点和节点数据采用JavaScript进行数据动态渲染。
CN202310130136.3A 2023-02-17 2023-02-17 一种TaroJS生态全局注入插件方法 Pending CN116185406A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310130136.3A CN116185406A (zh) 2023-02-17 2023-02-17 一种TaroJS生态全局注入插件方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310130136.3A CN116185406A (zh) 2023-02-17 2023-02-17 一种TaroJS生态全局注入插件方法

Publications (1)

Publication Number Publication Date
CN116185406A true CN116185406A (zh) 2023-05-30

Family

ID=86445828

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310130136.3A Pending CN116185406A (zh) 2023-02-17 2023-02-17 一种TaroJS生态全局注入插件方法

Country Status (1)

Country Link
CN (1) CN116185406A (zh)

Similar Documents

Publication Publication Date Title
US8028276B1 (en) Method and system for generating a test file
US7610545B2 (en) Annotations for tracking provenance
US10698682B1 (en) Computerized software development environment with a software database containing atomic expressions
US7716246B2 (en) Dynamic mechanism for providing metadata
US9182980B2 (en) Expansion and reduction of source code for code refactoring
CN108139891B (zh) 用于生成建议以纠正未定义标记错误的方法和系统
US7240340B2 (en) System and method for browse information parsing without compilation
US20100088676A1 (en) Comparing and merging structured documents syntactically and semantically
US20130332449A1 (en) Generating data processing code from a directed acyclic graph
US20150242194A1 (en) System for Translating Diverse Programming Languages
JP2005011345A (ja) コードセグメント作成方法及びそのシステム
US7962919B2 (en) Apparatus and method for modifying an initial event queue for extending an XML processor's feature set
WO2019005228A1 (en) AUTOMATED ADAPTATION OF A SOURCE CODE IN ORDER TO INJECT FUNCTIONS BETWEEN VERSIONS OF A PLATFORM
US20130152061A1 (en) Full fidelity parse tree for programming language processing
US20140298290A1 (en) Identification of code changes using language syntax and changeset data
CN114153459A (zh) 接口文档生成方法及装置
US8914782B2 (en) Optimization of declarative queries
US7657869B2 (en) Integration of external tools into an existing design environment
CN113138755A (zh) 一种json序列化和反序列化的优化方法及系统
CN111158665B (zh) 代码生成方法及装置、电子设备和存储介质
US9747085B2 (en) Source code generation from prototype source
US9697021B2 (en) Modifiable high-level intermediate representation of source code
CN116185406A (zh) 一种TaroJS生态全局注入插件方法
Visser Understanding software through linguistic abstraction
US8056063B2 (en) Method and apparatus minimizing code duplication in a statically typeable language program

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination