[发明专利]一种多平台小程序及H5页面适配的方法及系统

权利要求书

1.一种基于小程序语法实现多平台小程序及H5应用适配的系统，其特征是，包括：gaea配置模块、gaea解析器模块和gaea编译器模块；

所述gaea配置模块用于构建整个项目源码编译过程，包括：配置源码的根路径，源码的入口文件，源码解析所使用的loader即gaea解析器，源码编译所使用的plugin即gaea编译器，编译后导出的文件位置；

所述gaea解析器模块用于扫描根路径下所有的文件，根据源码的入口文件，解析出源码的依赖关系，植入H5运行环境，在内存中生成可执行的js文件所述gaea编译器模块，用于将gaea解析器模块解析生成的js文件，解析为抽象语法树，将指令和API调用对象替换为各平台小程序的指令和API调用对象，生成各平台小程序文件，分别输出到指定文件目录；

系统是基于webpack打包工具的loader和plugin机制，实现编译构建生成多个平台小程序源码的；

gaea编译配置是整个编译流程控制的配置文件，webpack通过该配置文件，获取整个源码文件资源，并从入口开始解析文件，使用gaea解析器，构建文件之间的依赖关系，并且植入gaea运行环境的单元，解析后生成可执行的js文件，存放到内存中；gaea编译器从内存中读取js文件，解析为抽象语法树，对指令和API调用对象进行替换，输出为各个平台的小程序源码，并导出到gaea编译配置中指定的目录位置；

gaea解析器是构建文件之间依赖关系以及编入gaea运行环境的单元，通过该解析器，扫描项目根目录下所有文件，解析各个文件模块之间的依赖关系，并将gaea运行环境的源码植入，生成为可执行的js文件并存放在内存中；

gaea编译器，是将js文件编译为各个平台小程序和H5应用源码的关键模块，通过该编译器，将内存中的js文件解析为抽象语法树，再将抽象语法树中的指令和API调用对象解析为各个平台中特有的指令和API调用对象，然后分别输出各小程序源码到指定的文件目录。

2.一种基于小程序语法实现多平台小程序及H5页面适配的方法，其特征是：基于现有的移动端多个平台小程序语法和开发规则，构建一套新的小程序规范即gaea规范，规范包括文件命名规范、语法规范；一套基础运行环境即gaea开发环境，用于开发调试阶段和编译为作为H5应用时的底层运行环境，具体包括基础组件、基础API、开发运行服务；

文件命名规范是指存放页面结构的文件命名为[pageName].gxml、存放页面样式的文件命名为[pageName].gcss；

语法规范是指在[pageName].gxml文件中所使用的指令使用g.开头；在[pageName].js文件中调用的API使用gaea.开头；

gaea开发环境包括的基础组件和基础API，是在H5环境下的具体实现，用于在开发调试阶段和编译为H5应用时，能够将小程序中页面效果还原在浏览器中；开发运行服务基于webpack的devServer，将当前的小程序源码以H5的方式启动，以便于在浏览器中调试；

用户需要开发并生成各个平台小程序的源码时，进入步骤1；

步骤 1：基于任一平台的小程序语法规范，按照正常开发流程初始化小程序源码目录和文件；

步骤 2：基于步骤1创建的小程序目录和文件，遵循 gaea规范，编写小程序应用源码；接收到开发调试命令后，进入步骤3；

步骤 3：基于步骤2编写的小程序应用源码，在根目录下使用npm安装gaea开发环境；

步骤 4：基于步骤3安装的gaea开发环境，运行该环境，启动一个http服务，开发者即可在浏览器中对小程序进行开发调试；

接收到编译多平台小程序源码命令后，进入步骤5；

步骤 5：使用nodejs执行webpack的gaea编译配置；

步骤 6：webpack在执行gaea的编译配置时，首先从入口文件开始，扫描项目中的所有文件，并构建项目文件的依赖关系；

步骤 7：基于步骤6构建的文件依赖关系，植入H5运行环境，并解析生成可执行的js文件存放于内存中；

步骤 8：基于步骤7在内存中生成的js文件，解析为抽象语法树；

步骤 9：基于步骤8解析出的抽象语法树，将g.开头的指令和gaea.开头的API调用，替换为各个平台小程序特有的指令和API调用；

步骤 10：将替换后的抽象语法树，编译为各平台小程序源码，分别输出到指定文件目录。

3.根据权利要求2所述的基于小程序语法实现多平台小程序及H5页面适配的方法，其特征是，基于小程序语法实现多平台小程序及H5页面适配的具体方法：

步骤 11：基于任一平台小程序语法，并遵循gaea规范，开发小程序应用；

步骤 12：在项目根目录下使用npm安装gaea开发环境；

步骤 13：运行gaea开发环境，该开发环境基于webpack的devServer；

步骤 14：gaea解析器扫描项目目录下所有文件，解析各文件依赖关系，并将gaea运行环境植入小程序的源码中，生成可执行的js文件到内存中；

步骤 15：gaea编译器读取内存中可执行的js文件，解析为抽象语法树，将小程序源码编译为H5应用代码，并存储在内存中；

步骤 16：webpack的devServer启动http服务，访问内存中的H5应用代码。