前端框架及开发方法、存储介质、电子设备专利检索-语言代码人工智能专利检索查询-专利查询网

前端 框架及开发方法、存储介质、电子设备

阅读：828发布：2020-05-12

专利汇可以提供前端框架及开发方法、存储介质、电子设备专利检索，专利查询，专利分析的服务。并且本发明公开了一种前端框架及开发方法、存储介质、电子设备，涉及软件技术，包括脚手架，提供开发的通用模块、基础配置；组件，包括标准工作组件，以及适于其他终端的业务工作组件；API模块，包括适用各个终端的通用API以及适用特定终端的专有API；构建平台，包括运行时模块以及编译器模块，运行时模块用于实现Vue.js终端与目标终端的映射关联，编译器模块用于将Vue.js语言的脚手架代码编译成适于目标终端语言的脚手架代码。通过运行时模块将目标终端各个功能模块与Vue.js终端下的各个功能模块进行映射关联，通过编译器模块将Vue.js语言的脚手架转化为适配终端的语言，将目标终端与Vue.js终端进行互通，实现了只开发一套代码，适配多种终端，开发成本低，适用广泛。，下面是前端框架及开发方法、存储介质、电子设备专利的具体信息内容。

权利要求

1.一种前端框架，基于Vue.js，其特征在于：包括
脚手架(1)，提供开发的通用模块、基础配置；
组件(2)，包括标准工作组件(2)，以及与标准工作组件(2)一一映射的、适于其他终端的业务工作组件(2)；
API模块，包括适用各个终端的通用API(3)以及适用特定终端的专有API(4)；
构建平台(5)，包括运行时模块以及编译器模块，运行时模块用于实现Vue.js终端与目标终端的映射关联，编译器模块用于将Vue.js语言的脚手架(1)代码编译成适于目标终端语言的脚手架(1)代码。
2.根据权利要求1所述的前端框架，其特征在于：所述运行时模块包括事件代理子模块、生命周期子模块以及数据同步子模块，
所述事件代理子模块统一开发注册的事件，将Vue.js终端的事件转化为目标终端的事件；
所述生命周期子模块将目标终端的生命周期映射到Vue.js终端的生命周期；
所述数据同步子模块修改Vue.js终端的同步项为目标终端的同步项。
3.根据权利要求1所述的前端框架，其特征在于：所述编译器模块包括小程序编译子模块、快应用编译子模块以及ReactNative编译子模块。
4.根据权利要求1所述的前端框架，其特征在于：还包括用于将适于目标终端的脚手架(1)、组件(2)、API模块打包生成可在目标终端运行源码的打包工具。
5.一种前端框架开发方法，其特征在于：基于如权利要求1中所述的前端框架，包括利用脚手架(1)提供的通用模块、基础配置进行新产品的开发；
利用构建平台(5)，通过编译器模块将Vue.js语言的脚手架(1)编译为适配目标终端的脚手架(1)，通过运行时模块将Vue.js终端与目标终端进行映射关联；
确定开发过程中涉及的通用API(3)、专有API(4)，以及与标准工作组件(2)映射的业务工作组件(2)；
将适配目标终端的脚手架(1)，开发过程涉及的通用API(3)、专有API(4)，以及与标准工作组件(2)映射的业务工作组件(2)打包生成适配目标终端的文件包。
6.根据权利要求5所述的前端框架开发方法，其特征在于：所述运行时模块包括事件代理子模块、生命周期子模块以及数据同步子模块，
所述事件代理子模块统一开发注册的事件，将Vue.js终端的事件转化为目标终端的事件；
所述生命周期子模块将目标终端的生命周期映射到Vue.js终端的生命周期；
所述数据同步子模块修改Vue.js终端的同步项为目标终端的同步项。
7.根据权利要求5所述的前端框架开发方法，其特征在于：所述编译器模块包括小程序编译子模块、快应用编译子模块以及ReactNative编译子模块。
8.根据权利要求7所述的前端框架开发方法，其特征在于：所述编译器模块脚手架(1)转化为对应目标终端的脚手架(1)包括：
将Vue.js语言的脚手架(1)源码解析成抽象语法树；
之后利用抽象语法树，生成对应目标终端的语言代码。
9.一种存储介质，其特征在于：存储有基于如权利要求1至4任一项前端框架开发的产品的源代码。
10.一种电子设备，其特征在于：包括存储器，所述存储器安装有基于如权利要求1至4任一项前端框架开发的产品。

说明书全文

前端框架及开发方法、存储介质、电子设备

技术领域

[0001] 本发明涉及软件技术，更具体地说，它涉及一种前端框架及开发方法、存储介质、电子设备。

背景技术

[0002] 如今，微信已然成为人们生活中一种重要的软件工具，不仅仅提供一种方便的沟通方式，内置的小程序还为各行各业提供一种新的信息呈现方式，让世界触手可及。

[0003] 小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新。对于前端开发者或团队来说，意味着要掌握的框架变多，需要重新花费昂贵的学习成本和试错成本。

[0004] 而伴随着行业竞争发展，百度小程序、头条小程序、快应用等终端陆续入局，各自推出了对应于各自终端的类小程序版本。在此之前，行业里采用比较多的是腾讯团队研发的wepy框架，是一种类vue的开发规范，花费wepy的学习成本，但只能适配到微信小程序端，诸如快应用、ReactNative等其他平台的产品不支持。

[0005] 于开发者而言，为了适应产品的多终端发展需求，又要进行新的框架学习和研究，这就造成产品开发成本的巨大提升。基于此，业务产品一般不会为每个终端都单独的进行开发工作，因此技术和成本问题也变相的限制了业务产品的发展。

发明内容

[0006] 针对现有技术存在的不足，本发明的第一目的在于提供一种前端框架，在开发时只需要使用一套开发语言，即可适用需要不同开发语言的多套终端，具有开发成本低，适用广泛的优点。

[0007] 为实现上述目的，本发明提供了如下技术方案：一种前端框架，基于Vue.js，包括
脚手架，提供开发的通用模块、基础配置；
组件，包括标准工作组件，以及与标准工作组件一一映射的、适于其他终端的业务工作组件；
API模块，包括适用各个终端的通用API以及适用特定终端的专有API；
构建平台，包括运行时模块以及编译器模块，运行时模块用于实现Vue.js终端与目标终端的映射关联，编译器模块用于将Vue.js语言的脚手架代码编译成适于目标终端语言的脚手架代码。

[0008] 采用上述技术方案，在进行开发时，脚手架提供开发过程中要用的各种模块、基础配置，方便业务开发者直接开始开发，专注于业务，而不用再花费额外时间去配置开发环境，进而提高开发效率。在组件方面，将组件分为两类，一类是利用Vue.js开发的标准工作组件，另一类是与标准工作组件一一映射的业务工作组件，业务工作组件采用其他语言开发，支持适配其他终端，而开发者只需掌握标准工作组件的一套规范即可，其他语言的业务工作组件通过内置的映射关系进行直接调用，无需额外进行重复开发，进一步提升开发效率。API按照适配终端多少来分为通用API、专有API，其中通用API适配于所支持列表内的各个终端，专业API适配于特定的终端，供开发者在开发时依据需要选用。而在上述各个模块开发完成后，利用内置的构建平台将目标终端与Vue.js终端的差异进行抹平或转化，具体的，通过运行时模块，将目标终端各个功能模块与Vue.js终端下的各个功能模块进行映射关联，而通过编译器模块将基于Vue.js语言开发的脚手架转化为适配终端的语言，将目标终端与Vue.js终端进行互通，实现了只开发一套代码，适配多种终端，开发成本低，适用广泛。

[0009] 进一步，所述运行时模块包括事件代理子模块、生命周期子模块以及数据同步子模块，所述事件代理子模块统一开发注册的事件，将Vue.js终端的事件转化为目标终端的事件；
所述生命周期子模块将目标终端的生命周期映射到Vue.js终端的生命周期；
所述数据同步子模块修改Vue.js终端的同步项为目标终端的同步项。

[0010] 采用上述技术方案，通过事件代理子模块将Vue.js终端的事件转化为目标终端的事件，通过生命周期子模块将目标终端的生命周期映射到Vue.js终端，通过数据同步子模块将修改Vue.js终端的同步项为目标终端的同步项，实现了目标终端与Vue.js终端的映射关联。

[0011] 进一步，所述编译器模块包括小程序编译子模块、快应用编译子模块以及ReactNative编译子模块。

[0012] 采用上述技术方案，分别将Vue.js语言的开发文件分别编译为适配小程序、快应用、ReactNative的代码文件，支持现今主流的终端平台。

[0013] 进一步，还包括用于将适于目标终端的脚手架、组件、API模块打包生成可在目标终端运行源码的打包工具。

[0014] 采用上述技术方案，通过打包工具将适于目标终端的脚手架、组件、API模块打包成对应的源码文件，减少其他流程，提升开发效率。

[0015] 针对现有技术存在的不足，本发明的第二目的在于提供一种前端框架开发方法，在开发时只需要使用一套开发语言，即可适用需要不同开发语言的多套终端，具有开发成本低，使用广泛的优点。

[0016] 为实现上述目的，本发明提供了如下技术方案：一种前端框架开发方法，基于如上技术方案所述的前端框架，包括
利用脚手架提供的通用模块、基础配置进行新产品的开发；
利用构建平台，通过编译器模块将Vue.js语言的脚手架编译为适配目标终端的脚手架，通过运行时模块将Vue.js终端与目标终端进行映射关联；
确定开发过程中涉及的通用API、专有API，以及与标准工作组件映射的业务工作组件；
将适配目标终端的脚手架，开发过程涉及的通用API、专有API，以及与标准工作组件映射的业务工作组件打包生成适配目标终端的文件包。

[0017] 采用上述技术方案，在进行开发时，利用脚手架提供的各种模块、基础配置直接进行开发，无需开发环境的构建和配置，方便业务开发者直接开始开发，提高开发效率。在组件方面，将组件分为两类，一类是利用Vue.js开发的标准工作组件，另一类是与标准工作组件一一映射的业务工作组件，业务工作组件采用其他语言开发，支持适配其他终端，而开发者只需掌握标准工作组件的一套规范即可，其他语言的业务工作组件通过内置的映射关系进行直接调用，无需额外进行重复开发，进一步提升开发效率。API按照适配终端多少来分为通用API、专有API，其中通用API适配于所支持列表内的各个终端，专业API适配于特定的终端，供开发者在开发时依据需要选用。而在上述各个模块开发完成后，利用内置的构建平台将目标终端与Vue.js终端的差异进行抹平或转化，具体的，通过运行时模块，将目标终端各个功能模块与Vue.js终端下的各个功能模块进行映射关联，而通过编译器模块将基于Vue.js语言开发的脚手架转化为适配终端的语言，将目标终端与Vue.js终端进行互通，最后将适配目标终端的各个功能模块的代码打包生成适配目标终端的文件包，实现了只开发一套代码，适配多种终端，开发成本低，适用广泛。

[0018] 进一步，所述运行时模块包括事件代理子模块、生命周期子模块以及数据同步子模块，所述事件代理子模块统一开发注册的事件，将Vue.js终端的事件转化为目标终端的事件；
所述生命周期子模块将目标终端的生命周期映射到Vue.js终端的生命周期；
所述数据同步子模块修改Vue.js终端的同步项为目标终端的同步项。

[0019] 采用上述技术方案，通过事件代理子模块将Vue.js终端的事件转化为目标终端的事件，通过生命周期子模块将目标终端的生命周期映射到Vue.js终端，通过数据同步子模块将修改Vue.js终端的同步项为目标终端的同步项，实现了目标终端与Vue.js终端的映射关联。

[0020] 进一步，所述编译器模块包括小程序编译子模块、快应用编译子模块以及ReactNative编译子模块。

[0021] 采用上述技术方案，将Vue.js语言的开发文件分别编译为适配小程序、快应用、ReactNative的代码文件，支持现今主流的终端平台。

[0022] 进一步，所述编译器模块脚手架转化为对应目标终端的脚手架包括：将Vue.js语言的脚手架源码解析成抽象语法树；
之后利用抽象语法树，生成对应目标终端的语言代码。

[0023] 采用上述技术方案，在进行脚手架的转化时，首先将Vue.js语言的脚手架源码解析成基本的抽象语法树，之后再转化为适应目标终端的语言代码，确保转化的准确无误。

[0024] 针对现有技术存在的不足，本发明的第三目的在于提供一种存储介质，存储有基于如上任一项技术方案所述前端框架开发的产品的源代码，该框架支持在开发时只需要使用一套开发语言，即可适用需要不同开发语言的多套终端，具有开发成本低，使用广泛的优点。

[0025] 针对现有技术存在的不足，本发明的第四目的在于提供一种电子设备，包括存储器，所述存储器安装有基于如上任一项技术方案所述前端框架开发的产品，该产品由一套开发语言开发，可适用不同开发语言的多套终端，具有开发成本低，使用广泛的优点。

[0026] 综上所述，本发明具有以下有益效果：1.脚手架提供开发过程中要用的各种模块、基础配置，方便业务开发者直接开始开发，专注于业务，而不用再花费额外时间去配置开发环境，提高开发效率；
2.业务工作组件采用其他语言开发，支持适配其他终端，而开发者只需掌握标准工作组件的一套规范即可，其他语言的业务工作组件通过内置的映射关系进行直接调用，无需额外进行重复开发，进一步提升开发效率；
3.利用内置的构建平台将目标终端与Vue.js终端的差异进行抹平或转化，具体的，通过运行时模块，将目标终端各个功能模块与Vue.js终端下的各个功能模块进行映射关联，而通过编译器模块将基于Vue.js语言开发的脚手架转化为适配终端的语言，将目标终端与Vue.js终端进行互通，实现了只开发一套代码，适配多种终端，开发成本低，适用广泛。
附图说明

[0027] 图1为本发明中前端框架的原理示意图；图2为本发明中脚手架的实现原理示意图；
图3为本发明中运行时模块的原理示意图；
图4为本发明中编译器模块的原理示意图，
图中：1、脚手架；2、组件；3、通用API；4、专有API；5、构建平台。

具体实施方式

[0028] 下面结合附图及实施例，对本发明进行详细描述。

[0029] 本具体实施例仅仅是对本发明的解释，其并不是对本发明的限制，本领域技术人员在阅读完本说明书后可以根据需要对本实施例做出没有创造性贡献的修改，但只要在本发明的权利要求范围内都受到专利法的保护。

[0030] 实施例1一种前端框架，基于Vue.js语言，供开发者开发以适配多套终端。参照图1，包括脚手架
1、组件2、API模块以及构建平台5。

[0031] 脚手架1提供开发过程中要用到的通用模块和基础配置，方便业务开发者直接做开发，专注于业务，而不用再花时间去配置开发环境。另外，在脚手架1中放置有一个demo，方便开发者理解框架的开发应用。

[0032] 参照图2，提供了脚手架1具体的实现步骤和方式。

[0033] 组件2包括标准工作组件2和业务工作组件2，其中标准工作组件2是以微信小程序的官方组件2规范为标准，基于Vue.js定制开发的一套公共组件2。而业务工作组件2是基于其他语言开发的适配于其他终端，并且与对应的标准工作组件2一一映射，其实质为标准工作组件2适配于其他终端的其他语言版本。对于业务开发者而言，只需要掌握前端框架这一种开发语言以及与微信小程序的开发规范相同的开发规范即可，节省开发的成本，提升开发的效率。

[0034] 作为一个具体示例，标准工作组件2包括基础组件2以及公共组件2，其中基础组件2包括视图容器组件2、内容组件2、表单组件2、导航组件2、媒体组件2、地图组件2等。公共组件2便于业务开发过程中的复用。

[0035] 视图容器组件2：类似于div标签的用途，用于包含元素。

[0036] 内容组件2：如p标签，用于包含文字。

[0037] 表单组件2：如button、form、input等表单相关的组件2。

[0038] 导航组件2：如navigator，底层其实是调用了各终端小程序api实现。

[0039] 媒体组件2：如image标签。

[0040] 地图组件2：如map。

[0041] API模块包括适用各个终端的通用API3以及适用特定终端的专有API4。

[0042] 通用API3用于抹平各个终端在API调用方式上的差异。原理是依据不同的终端平台各自生成对应该终端平台的api。具体的，前端框架对业务开发者提供统一的调用方式，在打包的时候由前端框架来做对应的api选择。

[0043] 具体实现示例，按不同js文件分类不同终端的api，如微信小程序分类下的api叫utilmp.js，其内封装了原生微信小程序相关的api调用实现；百度小程序分类下的api叫utildb.js，其内封装了原生百度小程序相关的api的调用实现。最后抽象和聚合不同终端的js，并依据选择输出的平台做适配。

[0044] 专有API4为无法通用的一些API，例如某些api在百度小程序平台没有，却在微信小程序平台有，这种类型的api就无法完成通用化。本前端框架特别提供专有api的能力，从而为业务开发者提供平台差异化的能力。

[0045] 构建平台5用于将基于Vue.js开发的业务产品真正转化为适于目标终端的业务产品，其中，目标终端包括H5、小程序、快应用、ReacNative。

[0046] 构建平台5包括运行时模块以及编译器模块两大核心模块。

[0047] 参照图3，运行时模块用于实现Vue.js终端与目标终端的映射关联，包括事件代理子模块、生命周期子模块以及数据同步子模块。

[0048] 事件代理子模块统一开发注册的事件，将Vue.js终端的事件转化为目标终端的事件。作为一个具体示例，用户交互触发的数据更新通过事件代理机制完成。在Vue.js代码中，事件响应函数对应到组件2的method，Vue.js自动维护了上下文环境。然而在小程序中并没有类似的机制，Vue.js执行环境中维护着一份实时的虚拟DOM，这与小程序的视图层完全对应，在小程序组件2节点上触发事件后，找到虚拟DOM上对应的节点，触发对应的事件；另外，Vue.js事件响应如果触发了数据更新，其生命周期函数更新将自动触发，在此函数上同步更新小程序数据，数据同步得以实现。

[0049] 生命周期子模块将目标终端的生命周期映射到Vue.js终端的生命周期。作为一个具体示例，生命周期子模块修改了Vue的建构配置，使之构建出符合小程序项目结构的代码格式。所以小程序转起来后先执行的也是小程序端的生命周期，生命周期子模块修改了Vue.jsruntime，使小程序端的运行时对应到前端框架运行时的生命周期。

[0050] 数据同步子模块修改Vue.js终端的同步项为目标终端的同步项。作为一个具体示例，Vue.js和小程序的数据彼此隔离，各自有不同的更新机制。数据同步子模块从生命周期和事件回调函数切入，在Vue.js触发数据更新时实现数据同步。小程序通过视图层呈现给用户、通过事件响应用户交互，Vue.js在后台维护着数据变更和逻辑。由于在小程序端是没有浏览器dom这样的概念的，所以Vue.js自带渲染视图的能力不适用小程序端，就需要改造，数据同步子模块修改了Vue.jsruntime实现，在Vue.js的生命周期中增加了更新小程序数据的逻辑。数据更新发端于小程序，处理自Vue.js，Vue.js数据变更后再同步到小程序。

[0051] 参照图1及图4，编译器模块用于将Vue.js语言的脚手架1代码编译成适于目标终端语言的脚手架1代码。编译器模块包括小程序编译子模块、快应用编译子模块以及ReactNative编译子模块。

[0052] 编译器模块利用vue模板编译器将vue的模板语法分析成ast，并将ast做处理转换成小程序视图层(xxml)语法。作为一个具体示例，编译器模块首先是遍历整个项目源码，将vue模板源码解析成三部分：标签、脚本和样式，其次会分别对这三部分做转换。标签会转换到前端框架原先已经内置好了的借助快应用自定义组件2的能力开发的一套基于微信小程序规范标准的快应用组件2。脚本的转换会关联到框架里已内置好了的快应用运行时，快应用运行时核心是架起vue实例，通过vue实例可以获得render函数和静态render函数，通过这两个函数就可以得到vue相关的数据、事件和方法等。快应用运行时提供通用的方法供视图层与逻辑层交互，相当于代理了vue实例，使得事件、数据同步、生命周期转起来。样式的转换比较简单，由于快应用的基准宽度是750px，与前端框架的规范标准一致，所以直接把源码的样式转到快应用的样式。

[0053] 作为一个具体示例，编译器模块对ReactNative的转换是基于抽象语法树（ast）,通过把vue模板转成ast得到vue实例、css、option部分，其次将vue实例、css、option部编译成native组件2，最后该组件2由thanos-core-rn的compiler生成到rn的项目结构里。

[0054] 前端框架还包括用于将适于目标终端的脚手架1、组件2、API模块打包生成可在目标终端运行源码的打包工具。

[0055] 前端框架提供了自定义插件的能力，现有插件有thanos-preload-plugin。主要解决小程序路由跳转，约有100-300ms（此以微信小程序为例，其它小程序可能不等）的初始化开销下个页面才会onLoad，一些异步操作（如加载主接口数据）其实可以在这100-300ms之前开始执行，而不用等到页面onLoad之后。原理是在初始化路由时，将对应路由的页面上注册的preload方法注册到全局变量内，key为路由地址，由当前页面触发路由跳转时触发preload方法，可自定义传参数。

[0056] 前端框架提供了自定义打点的能力，实现灵活的、多维度的埋点，为业务分析提供可靠的数据分析能力。实现原理是基于当前成熟的打点方案实现。

[0057] 实施例2一种前端框架开发方法，基于如实施例1中的前端框架，包括步骤S101至步骤S104。

[0058] 步骤S101：利用脚手架1提供的通用模块、基础配置进行新产品的开发。

[0059] 步骤S102：利用构建平台5，通过编译器模块将Vue.js语言的脚手架1编译为适配目标终端的脚手架1，通过运行时模块将Vue.js终端与目标终端进行映射关联。

[0060] 步骤S103：确定开发过程中涉及的通用API3、专有API4，以及与标准工作组件2映射的业务工作组件2。

[0061] 步骤S104：将适配目标终端的脚手架1，开发过程涉及的通用API3、专有API4，以及与标准工作组件2映射的业务工作组件2打包生成适配目标终端的文件包。

[0062] 具体的，运行时模块包括事件代理子模块、生命周期子模块以及数据同步子模块，事件代理子模块统一开发注册的事件，将Vue.js终端的事件转化为目标终端的事件；生命周期子模块将目标终端的生命周期映射到Vue.js终端的生命周期；
数据同步子模块修改Vue.js终端的同步项为目标终端的同步项。

[0063] 编译器模块包括小程序编译子模块、快应用编译子模块以及ReactNative编译子模块。

[0064] 具体的，编译器模块脚手架1转化为对应目标终端的脚手架1包括：将Vue.js语言的脚手架1源码解析成抽象语法树；
之后利用抽象语法树，生成对应目标终端的语言代码。

[0065] 实施例3一种存储介质，存储有基于实施例1中前端框架开发的产品的源代码。

[0066] 实施例4一种电子设备，包括存储器，存储器安装有基于实施例1中前端框架开发的产品。

[0067] 以上所述仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

标题	发布/更新时间	阅读量
硬件数据库的JDBC驱动方法及装置	2020-05-08	753
一种融合WiFiP2P的FOTA远程在线升级的方法	2020-05-16	450
一种基于手绘网页图像的前端工程化代码生成方法	2020-05-08	294
应用程序原生能力的调用方法、装置及电子设备	2020-05-11	439
可视化、自定义全景编辑方法、系统、存储介质及设备	2020-05-14	784
一种云接入点控制器中分布式数据的处理方法及装置	2020-05-15	385
一种基于仿真软件Simulink实时扩展RTX的飞行器实时仿真程序的编程方法	2020-05-13	844
一种晶片测试系统及测试方法	2020-05-17	349
基于已设置为铃声的音频保护方法、装置和计算机设备	2020-05-17	60
内存分配代码检测方法、装置、计算机设备及存储介质	2020-05-17	232

前端框架及开发方法、存储介质、电子设备

前端框架及开发方法、存储介质、电子设备

技术领域

背景技术

发明内容

具体实施方式

该功能需要专业版企业版VIP权限，您可以：