一种多平台小程序及H5页面适配的方法及系统与流程

本发明属于移动前端多平台适配技术领域，具体涉及一种对于多平台小程序及移动端h5页面适配的方法及系统，解决针对多个平台小程序和移动端h5页面需要实现多套前端源码的问题。

背景技术：

近些年来，随着移动互联网和终端设备的飞速发展，用户逐渐从电脑端转移到移动端，据中国互联网络信息中心(cnnic)完成的第44次《中国互联网络发展状况统计报告》中统计，截止2019年6月，中国移动互联网用户达到8.47亿。面对一个迅速走向移动化的世界，我们需要更多基于移动端的应用解决方案，来获得更多的流量，迅速的抢占用户市场。但是移动终端设备多种多样，不仅有不同的操作系统，更有不同的手机浏览器和屏幕尺寸，所以在开发移动端应用时，不仅要开发基于浏览器端访问的h5应用，还要针对ios和andriod系统开发体验性更好的原生应用或者混合应用，这对于研发来说，需要招聘更多不同方向的开发者，承担更多的人力成本，开发周期也会变得更长，与此同时，开发者为应对不同的系统，还需要花费更多的精力，进行各种适配调优，来提升用户使用体验。

面对以上的开发效率问题和各种用户体验问题，国内各大流量入口，微信、支付宝、百度、头条、qq等都基于自己的平台开发出了各自的小程序。这对于我们来说，虽然不再需要花费大量的人力和精力去适配优化各终端，就可以有效提升用户的使用体验，但是开发效率问题并未解决，因为如果我们希望在各大流量入口都有自己的应用，获取到更多的流量，就需要遵循每个平台的小程序语言规范和开发方式开发一套小程序源码，无法做到只用写一套源码，就可以生成多平台运行的源码，所以开发效率并未降低，反而可能由于更多的流量入口开发自己的小程序，导致我们的开发量增多。

如微信小程序和支付宝小程序为例：小程序兴起，很多传统的网站、app的功能被迁移到小程序上，如果想要在两个平台上都发布自己的小程序应用，就需要分别开发两份小程序源码，因为两个小程序语法和规范不一样，源码不可通用。

面对开发者需要针对不同的平台开发多套应用源码的问题，市面上也出现了一些解决方案和技术，比如基于react框架的taro、基于vue框架的uni-app等，这对于一个会使用react或者vue的开发者来说能够做到开发一套(react或vue应用)源码编译后，生成多个平台的小程序源码运行，是一种很不错的解决方案。但是对于更多不会使用这两种框架语法的开发者来说，问题还是无法解决，除非他们先去从头开始学习并能够熟练使用react或者vue框架语法中的任意一个，那么开发者就需要承担更多的学习和时间的成本。

术语解释，h5：指第5代html，也指用h5语言制作的一切数字产品。所谓html是“超文本标记语言”的英文缩写。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。上网所看到的网页，多数都是由html写成。它是一种高级网页开发技术，它不是一种标记语言，为下一代web提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多重要的功能。相比h4，h5有更多的交互和功能，并且支持在移动设备上支持多媒体。h5的应用很广泛，基于h5有很多产品载体，比如ppt、app等。

技术实现要素：

为解决上述一套小程序源码无法在多个平台适配运行的问题，本发明目的是，提出一种融合现有的微信、支付宝、百度、头条、qq等平台小程序规范(框架、语法、组件和api)，构建一套新的小程序规范的方法。同时设计了一套将基于新小程序规范开发的小程序源码编译为其他平台小程序源码的系统；旨在提供一种不依赖于第三方开发框架，而实现只用基于现有的小程序语法，遵循新的小程序规范写一套小程序代码就可以编译出多个平台小程序源码的方法及系统；同时此方法及系统将小程序代码与h5页面进行适配，使得小程序源码可在开发阶段通过浏览器调试，并可以编译后生成h5应用。

本发明提供的具体技术方案如下：一种多平台小程序及h5页面适配的方法，是基于本发明的系统，包括如下步骤：

基于现有的多个平台小程序语法和开发规则，构建一套跨平台(微信、支付宝、百度、头条、qq等)新的小程序规范(下文称gaea规范)，包括文件命名规范、语法规范；一套基础运行环境(下文称gaea开发环境)，用于开发阶段和编译为h5应用时使用，举出运行环境包括基础组件、基础api、开发运行服务；

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

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

gaea开发环境所包括的基础组件和基础api，在h5环境下的具体实现，用于在开发调试阶段和编译为h5应用时，能够将小程序中页面效果还原在浏览器中；开发运行服务基于webpack的devserver(webpack-dev-server将打包结果放在内存中，在每次webpack-dev-server接收到请求时都只是将内存中的打包结果返回给浏览器)，将当前的小程序源码以h5的方式启动，以便于在浏览器中调试。

基础组件包括：视图组件(cover-image、cover-view、scroll-view、swiper、swiper-item、view)，基本组件(icon、progress、rich-text、text、canvas、web-view)，表单组件(button、checkbox、checkbox-group、form、input、label、picker、picker-view、picker-view-column、radio、radio-group、slider、swith、textarea)，导航组件(navigator)，媒体组件(audio、camera、image、live-player、live-pusher、video)，地图组件(map)。

基础api包括：路由(switchtab、relaunch、redirectto、navigateto、navigateback)，系统(getsysteminfo、getsysteminfosync)，交互(showtoast、showmodal、showloading、showactionsheet、hidetoast、hideloading)，导航栏(shownavigationbarloading、setnavigationtitle、setnavigationbarcolor、hidenavigationbarloading、hidehomebutton)，背景(setbackgroundtextstyle、setbackgroundcolor)，底部导航栏(showtabbarreddot、showtabbar、settabbarstyle、settabbaritem、settabbarbadge、removetabbarbadge、hidetabbardot、hidetabbar)，网络(request、uploadfile)。

一种多平台小程序及h5页面适配的系统，包括：编译过程配置(下文称gaea编译配置)、源码解析器(下文称gaea解析器)、源码编译器(下文称gaea编译器)。

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

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

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

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

用户需要开发并生成多个平台(微信、支付宝、百度、头条、qq等)小程序的源码时，进入步骤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调用(比如编译为微信小程序源码时，将g；替换为wx:，将gaea.替换为wx.)。

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

有益效果：

1)本发明不是一种新的框架，而是一种实现方法及系统，与其他现有的解决方案相比(比如基于react的taro、基于vue的uni-app)，只用基于现有的小程序语法，并遵循gaea规范，不需要额外学习其他第三方框架语法，大大降低了开发跨多平台小程序的学习成本。尤其是用于微信、支付宝、百度、头条、qq等跨平台小程序开发的规范与系统。

2)与其他相关技术相比，基于gaea小程序语法规范而开发的小程序应用，项目结构与现有的各平台小程序结构一致，代码简单明了，更易于维护，复杂度显著降低。

3)本发明是一种融合现有的微信、支付宝、百度、头条、qq等平台小程序规范(框架、语法、组件和api)，构建一套新的小程序规范的方法。本发明方法所定义的规范与上述几个平台的小程序规范大体一致，仅在语法指令上稍有差异(比如微信小程序的指令以wx:开头，支付宝小程序的指令以a:开头，而新的小程序规范以g:开头；微信小程序使用wx.调用具体的api，支付宝小程序使用my.调用具体的api，而新的小程序规范使用gaea.调用具体的api)，通过尽量趋于一致的规范，使得会开发任意一种小程序的开发者，都能快速的使用该规范。

附图说明

图1为本发明实施例的开发阶段流程示意图；

图2为本发明实施例的编译阶段流程示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

如图1所示，本发明公开一种基于小程序语法，实现多平台小程序及h5页面适配的方法，包括：

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

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

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

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

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

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

如图2所示，本发明公开一种基于小程序语法，实现多平台小程序及h5应用适配的系统，主要包括：gaea配置模块21、gaea解析器模块22和gaea编译器模块23。

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

所属gaea解析器模块22，用于扫描根路径下所有的文件，根据源码的入口文件，解析出源码的依赖关系，织入h5运行环境，在内存中生成可执行的js文件

所属gaea编译器模块23，用于将gaea解析器模块22解析生成的js文件，解析为抽象语法树，将指令和api调用对象替换为各平台小程序的指令和api调用对象，生成各平台小程序文件，分别输出到指定文件目录。

本发明的具体实施方式及实施实例并不能概括本发明的保护范围，而应该以权利要求保护的范围为准。