具体实施方式

为了引用和清楚起见，下文中使用的技术名词的说明、简写或缩写总结如下：

Vue：是一套用于构建用户界面的渐进式框架；

AST：抽象语法树(Abstract Syntax Tree，AST)，是一种源代码的抽象语法结构的树状表示，这里特指编程语言的源代码；

html：超文本标记语言(Hyper Text Markup Language)，是一种标记语言，定义了网页内容的含义和结构。除HTML以外的其它技术则通常用来描述一个网页的表现与展示效果(如CSS)或功能与行为(如JavaScript)；

js：JavaScript，一种具有函数优先的轻量级，解释型或即时编译型的web编程语言；

css：层叠样式表(Cascading Style Sheets，CSS)，是一种样式表语言，用来描述HTML或XML(包括如SVG、MathML、XHTML之类的XML分支语言)文档的呈现；

json：是一种用来序列化对象、数组、数值、字符串、布尔值和null的语法规则。

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在描述本申请的技术方案前，首先对本申请的小程序开发方法的开发环境及应用环境进行简单介绍。依照本申请的小程序开发方法，开发者可在基于iMac、Windows、或Linux操作系统的计算机上进行开发。在开发完成后，输出的成品包(即小程序应用)需要运行在特定App客户端(包括Android、iOS)。该特定的App客户端是指已经接入符合本小程序规范的SDK、具备小程序运行的基础环境的App客户端。

请参阅图1，本申请提供的小程序开发方法，可以包括以下步骤：

步骤S100，基于预定义的工程模板，创建工程项目。

具体地，将参数配置插入至预定义的工程模板中，以生成工程项目，其中，该工程模板基于预定义的文件结构关系、文件格式和公共语法而创建。

通过预先定义好工程模板的文件结构关系和支持的文件格式、公共语法，使得用户在创建工程项目过程中，无需增加额外的项目编译配置文件、路由配置文件或平台兼容配置文件。

此外，对于工程项目所包含的文件，可以只包含入口文件、路由页面和自定义组件，使得整个工程项目的结构比较清晰简洁。

对于所支持的文件格式，可以包括html格式、js格式、json格式和css格式中的一种或多种。其中，为构建完整的工程项目，必须包含html格式语法、js格式语法和json格式语法的文件。css格式语法的文件作为页面样式描述的文件，可以根据具体需求来选用。

对于文件的功能构成，可以让每个文件承担的职责单一化，从而降低复杂度。例如，页面结构的组织可以由html格式的文件来描述，事件绑定和数据驱动页面动态变化展示可以由js格式的文件来描述，外部组件的配置、依赖的引入及导航UI的配置可以由json格式的文件来描述，页面样式的处理可以由css格式的文件来描述。

对于所支持的公共语法，可以包括一种或多种公共的语法，免去自定义的私有语法带来的学习成本。例如，支持所有W3C标准和ECMAScript规范支持的语法语言。

工程项目在后期的编译、打包阶段，会根据上述预定义的文件结构关系、文件格式和文件语法，对不符合要求的文件进行过滤并给予相应的提示。

步骤S200，生成符合公共语法规则的入口文件和路由配置信息。

具体地，对步骤S100中的工程项目进行解析，并按照预设的公共语法规则对其进行转换，以生成符合该公共语法规则的入口文件和路由配置信息。

通常地，入口文件可以包括程序入口文件和页面入口文件。其中，程序入口文件负责引入公共文件、添加全局配置以及对具体对象进行实例化；页面入口文件包括页面根组件，根组件负责导入所需的组件，并通过路由占位符为这些组件在具体页面中预留展示空间。

路由配置信息包括路由页面以及路由页面间的路由信息，以实现路由页面之间的跳转。

步骤S300，完成依赖注入(Dependency Injection)以及全局配置。

具体地，对于上述步骤的入口文件，本步骤可以向该入口文件注入工程项目所依赖的库和全局配置中的至少一种，得到处理后的入口文件。

其中，通过依赖注入，使得处理后的入口文件实现对所依赖的组件的调用；全局配置应用于工程项目中对各API、常量等对象的管理，此外，还可以适配于项目部署环境的变更。

步骤S400，生成小程序应用。

具体地，根据步骤S300中的处理后的入口文件和步骤S200中的路由配置信息，生成小程序应用。

经由上述的技术方案可知，本申请实施例提供的小程序开发方法通过预先设计好的文件结构关系、文件格式以及公共语法，来定义工程模板。基于该工程模板而创建的工程项目具有相同文件结构的目录体系，且其代码文件采用相同文件格式，并约束于相同的公共语法，使得工程项目的结构清晰简单，且遵循统一的开发风格，可维护性高。

此外，通过对工程项目进行解析，并按照预设的公共语法规则进行转换，以生成符合预设的公共语法规则的入口文件和路由配置信息；然后向入口文件注入工程项目所依赖的库和/或全局配置；最后组装打包生成小程序应用。该开发过程仅依赖于预设的公共语法规则进行，没有自定义的私有语法，降低了开发人员的学习成本。

下面以一个具体的例子来描述上述步骤S100中创建工程项目的过程。对于工程模板，预定义的文件结构关系如图2所示，包括入口文件(app.js、app.json和app.css)、项目配置文件(project.config.json)、页面目录(pages)、组件目录(components)和包结构(package.json)；预定义的文件格式包括js文件、css文件、json文件和html文件；预定义的公共语法规范为W3C标准和ECMAScript规范。

上述实施例中提及的公共语法规则，可以采用W3C、ECMAScript以及基于此的Vue语法等多种类型的公共语法。以下仅以Vue语法规则为例来介绍创建工程项目的过程。

Vue是一套用于构建用户界面的渐进式框架，其便于与第三方库或既有项目整合。此外，当与现代化的工具链以及各种支持类库结合使用时，Vue能够为复杂的单页应用提供驱动。

其中，Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

假设基于Vue框架来创建一个名称为Test的项目，在框架内部同时会通过create(projectName,options)函数来读取工程模板的文件结构，获取该文件结果下的目录，遍历该目录下的文件和文件内容，输出文件名和文件内容的映射。其中，文件结构如图2所示。

接着，读取package.json文件，将项目名称Test、项目预设的依赖信息、执行脚本数据与工程模版中的package.json文件重新组合，生成新的package.json文件。其中，图3示例了工程模版中package.json文件内容，图4示例了组合后的写入项目名称、注入执行命令和依赖的新的package.json文件。

根据命令执行的context上下文，获取当前项目创建的目录，将上述模版遍历后的数据，按照读取的对应关系，写入到该目录下。

在上述步骤S200中，可以有多种方法生成符合公共语法规则的入口文件。基于此，在一个可选的实施例中，上述步骤S200中对工程项目进行解析，并按照预设的公共语法规则对其进行转换，以生成符合该公共语法规则的入口文件的过程，可以包括：

A1，对该工程项目进行解析，得到原始入口文件；

A2，按照Vue语法和生命周期的转换规则对该原始入口文件的生命周期进行转换，并注入应用级生命周期，以生成符合Vue语法规则的入口文件。

具体地，通过A1解析出工程项目的app.js文件，该app.js文件原始开发代码中的生命周期为Vue生命周期，依照定义好的Vue生命周期与小程序生命周期的对应关系，对app.js的生命周期进行转换处理，并注入应用级生命周期，将处理后的app.js文件作为小程序注册的入口文件。

在上述A1中，可以通过如下函数对工程项目进行解析：

其中，compiler为webpack的模块，在apply方法内传入compiler，然后apply方法中可以使用compiler对象去监听webpack在不同时刻触发的各种事件。本方案中apply方法中执行run、watchRun和compilation钩子函数。this.name为自定义的插件名称，this._setConfig.bind()为自定义的处理解析项目配置的函数。

通过上述函数对项目中的html、css、js和json配置等文件进行解析，以便在下一步时根据不同文件类型进行对应处理。

在上述A2中，首先，可以通过如下函数对原始入口文件解析，并处理成符合Vue语法的入口文件：

其中，entryLoader方法接收解析的文件内容content，sourceMap参数用于映射实际代码。在entryLoader方法中，addDependency()方法注入配置文件，用于下一阶段处理时文件的监听。通过babel的babelTraverse方法，对appAST(app.js解析过对应的AST)进行编辑操作。

然后，通过如下函数对生命周期进行解析及转换：

['onLaunch','onShow','onHide','onBeforeDestroy'].find(name＝>name＝＝＝property.key.name)？okLifecycle.push(property):Properties.push(property)

其中，['onLaunch','onShow','onHide','onBeforeDestroy']为预设的小程序应用级生命周期函数名称，用find()方法来根据预设的生命周期函数名称在实际代码中解析转换小程序生命周期。

在上述A2中，通过注入应用级生命周期，解决了使用Vue开发H5页面时，缺少原生应用级生命周期的问题。在Vue基础上扩充了应用级生命周期，开发者在开发时除了能够使用Vue的生命周期，还可以使用应用的生命周期函数处理业务。

具体地，上述应用级生命周期的扩充方法可以为：在编译阶段时，注入小程序调用客户端能力的SDK，该SDK可使小程序具备原生应用的能力和生命周期监听处理能力。同时对开发的原始代码中的应用级生命周期函数按关键词识别后，根据定义的映射关系，处理为SDK中可识别的生命周期方法。

在上述步骤S200中，可以有多种方法生成符合公共语法规则的路由配置信息。基于此，在一个可选的实施例中，上述步骤S200中对工程项目进行解析，并按照预设的公共语法规则对其进行转换，以生成符合该公共语法规则的路由配置信息的过程，可以包括：

B1，对该工程项目进行解析，得到原始路由配置信息；

B2，按照Vue语法规则对该原始路由配置信息进行转换，以生成符合Vue语法规则的路由配置信息。

此外，基于上述实施方式，还可以在进入路由页面前的beforeEach方法中注入小程序navbar等UI类型处理方法，以实现路由页面的个性化展示、条件性跳转。

其中，在上述B1中，对工程项目进行解析以获取原始路由配置的过程，可以具体地通过如下函数来实现：

其中，babelParse()用于将路由配置字符串解析为AST，routerConfigString为路由配置字符串参数，sourceType为转换的类型；pages.forEach()对路由页面pages进行遍历，获取路由页面的配置文件路径。

读取项目中app.json的配置数据，将各页面配置数据转换为Vue语法的router配置，再将处理后的路由配置与入口文件进行组装。

在上述B2中，具体地，可以采用vue-router语法规则对该原始路由配置信息进行转换，以生成符合vue-router语法规则的路由配置信息。其中，vue-router是Vue提供的官方路由库，是Vue生态系统的一部分，它和Vue.js的核心深度集成，易于构建单页面应用。

在上述步骤S400中，可以有多种方法来生成小程序应用。基于此，在一个可选的实施例中，在上述步骤S400中根据处理后的入口文件和路由配置信息，生成小程序应用的过程，可以包括：

将该路由配置信息所对应的路由页面，按照所述路由配置信息组装成小程序页面，以及将该小程序页面、该处理后的入口文件打包成小程序应用。

其中，可以有多种方法实现小程序的组装。可选地，上述将该路由配置信息组装成小程序页面的过程，可以包括：

C1，根据该路由配置信息，获取路由页面；

C2，对该路由页面进行解析，获取路由页面的生命周期和组件信息；

C3，将路由页面的生命周期转换为应用级生命周期和Vue语法的生命周期，以及根据路由页面的组件信息，为路由页面注入相应的组件，得到处理后的路由页面；

C4，将该处理后的路由页面组装成符合Vue语法的单文件，由所述符合Vue语法的单文件构成小程序页面。

其中，上述C2中可以有多种方法获取路由页面的生命周期和组件信息。可选地，上述C2中对该路由页面进行解析，获取路由页面的生命周期和组件信息的过程，可以包括：

D1，对该路由页面的index.js文件进行解析，获取路由页面的生命周期；

D2，对该路由页面的index.json文件进行解析，获取路由页面的组件信息。

例如，在D1中，读取index.js文件的文件内容，获取该文件内所使用的vue生命周期和应用级生命周期函数名称，依照预设的对应关系对其进行转换。

在D2中，通过解析某个路由页面中的index.json文件，从该文件中获取usingComponents内容，则usingComponents内容即包含所使用的组件信息。

上述C3中可以有多种方法实现路由页面组件的注入。可选地，在上述C3中根据路由页面的组件信息，为路由页面注入相应的组件的过程，可以包括：

E1，根据路由页面的组件信息，判断所述路由页面是否包含自定义组件；

E2，若是，则通过抽象语法树AST将所述自定义组件注入至所述路由页面的index.js文件中。

具体地，在E2中，可以通过如下函数实现自定义组件的注入：

其中，routerPageLoader()方法同前述的entryLoader方法，接收路由页面的内容数据source和实际代码映射的sourceMap。ExpressionStatement为babel提供的方法，用来转换pageAST(路由页面中index.js对应的解析过的AST)中的生命周期函数。

上述C3中可以有多种方法实现路由页面生命周期的转换。可选地，在上述C3中将路由页面的生命周期转换为应用级生命周期和Vue语法的生命周期的过程，可以包括：

按照预设的路由页面的生命周期和应用级生命周期的对应关系，以及按照路由页面的生命周期和Vue语法的生命周期的对应关系，将路由页面的生命周期转换为相应的应用级生命周期和Vue语法的生命周期。

其中，应用级生命周期和Vue语法的生命周期共同构成小程序的生命周期。

具体地，在上述C3中可以通过如下函数实现路由页面生命周期的转换：

下面对本申请实施例提供的小程序开发装置进行描述，下文描述的小程序开发装置与上文描述的小程序开发方法可相互对应参照。

请参见图5，本申请实施例提供的小程序开发装置，可以包括：

构建单元11，用于将参数配置插入至预定义的工程模板中，以生成工程项目，其中，所述工程模板基于预定义的文件结构关系、文件格式和公共语法而创建；

转换单元12，用于对所述工程项目进行解析，并按照预设的公共语法规则进行转换，以生成符合所述公共语法规则的入口文件和路由配置信息；

注入单元13，用于向所述入口文件注入工程项目所依赖的库和/或全局配置，得到处理后的入口文件；

合成单元14，用于根据所述处理后的入口文件和所述路由配置信息，生成小程序应用。

在一个可选的实施例中，转换单元12对所述工程项目进行解析，并按照预设的公共语法规则进行转换，以生成符合所述公共语法规则的入口文件的过程，可以包括：

对所述工程项目进行解析，得到原始入口文件；

按照Vue语法规则和生命周期的转换对所述原始入口文件的生命周期进行转换，并注入应用级生命周期，以生成符合Vue公共语法规则的入口文件。

在一个可选的实施例中，转换单元12对所述工程项目进行解析，并按照预设的公共语法规则进行转换，以生成符合所述公共语法规则的路由配置信息的过程，可以包括：

所述工程项目进行解析，得到原始路由配置信息；

按照Vue语法规则对所述原始路由配置信息进行转换，以生成符合Vue语法规则的路由配置信息。

在一个可选的实施例中，合成单元14根据所述处理后的入口文件和所述路由配置信息，生成小程序应用的过程，可以包括：

将所述路由配置信息所对应的路由页面，按照所述路由配置信息组装成小程序页面，以及将所述小程序页面、所述处理后的入口文件打包成小程序应用。

在一个可选的实施例中，合成单元14将所述路由配置信息组装成小程序页面的过程，可以包括：

根据所述路由配置信息，获取路由页面；

对所述路由页面进行解析，获取路由页面的生命周期和组件信息；

将路由页面的生命周期转换为应用级生命周期和Vue语法的生命周期，以及根据路由页面的组件信息，为路由页面注入相应的组件，得到处理后的路由页面；

将所述处理后的路由页面组装成符合Vue语法的单文件，由所述符合Vue语法的单文件构成小程序页面。

在一个可选的实施例中，合成单元14对所述路由页面进行解析，获取路由页面的生命周期和组件信息的过程，可以包括：

对所述路由页面的index.js文件进行解析，获取路由页面的生命周期；

对所述路由页面的index.json文件进行解析，获取路由页面的组件信息。

在一个可选的实施例中，合成单元14根据路由页面的组件信息，为路由页面注入相应的组件的过程，可以包括：

根据路由页面的组件信息，判断所述路由页面是否包含自定义组件；

若是，则通过抽象语法树AST将所述自定义组件注入至所述路由页面的index.js文件中。

在一个可选的实施例中，合成单元14将路由页面的生命周期转换为应用级生命周期和Vue语法的生命周期的过程，可以包括：

按照预设的路由页面的生命周期和应用级生命周期的对应关系，以及按照路由页面的生命周期和Vue语法的生命周期的对应关系，将路由页面的生命周期转换为相应的应用级生命周期和Vue语法的生命周期。

其中，应用级生命周期和Vue语法的生命周期共同构成小程序的生命周期。

本申请实施例提供的小程序开发装置可应用于小程序开发装置设备，如工控电脑等。可选的，图6示出了小程序开发装置设备的硬件结构框图，参照图3，小程序开发装置设备的硬件结构可以包括：至少一个处理器21，至少一个通信接口22，至少一个存储器23和至少一个通信总线24。

在本申请实施例中，处理器21、通信接口22、存储器23、通信总线24的数量为至少一个，且处理器21、通信接口22、存储器23通过通信总线24完成相互间的通信；

处理器21可能是一个中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本申请实施例的一个或多个集成电路等；

存储器22可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)等，例如至少一个磁盘存储器；

其中，存储器23存储有程序，处理器21可调用存储器23存储的程序，所述程序用于：

将参数配置插入至预定义的工程模板中，以生成工程项目，其中，所述工程模板基于预定义的文件结构关系、文件格式和公共语法而创建；

对所述工程项目进行解析，并按照预设的公共语法规则进行转换，以生成符合所述公共语法规则的入口文件和路由配置信息；

向所述入口文件注入工程项目所依赖的库和/或全局配置，得到处理后的入口文件；

根据所述处理后的入口文件和所述路由配置信息，生成小程序应用。

可选的，所述程序的细化功能和扩展功能可参照上文描述。

综上所述：

本申请实施例通过预先设计好的文件结构关系、文件格式以及公共语法，来定义工程模板。基于该工程模板而创建的工程项目具有相同文件结构的目录体系，且其代码文件采用相同文件格式，并约束于相同的公共语法，使得工程项目的结构清晰简单，且遵循统一的开发风格，可维护性高。

此外，通过对工程项目进行解析，并按照预设的公共语法规则进行转换，以生成符合预设的公共语法规则的入口文件和路由配置信息；然后向入口文件注入工程项目所依赖的库和/或全局配置；最后组装打包生成小程序应用。该开发过程仅依赖于预设的公共语法规则进行，没有自定义的私有语法，降低了开发人员的学习成本。

进一步地，通过本申请所开发的小程序应用对宿主App依赖较低。对于接入了符合本申请的小程序开发规范SDK的各类平台的App，均能够将本申请所开发的小程序部署到这些平台的宿主App中，一次开发，可多平台复用，实现了小程序应用与多平台的互通兼容。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间可以根据需要进行组合，且相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。