H5页面的多平台运行方法及装置与流程

本发明涉及计算机互联网技术领域，特别涉及一种h5页面的多平台运行方法及装置。

背景技术：

随着移动应用技术的快速发展，hybirdapp(混合开发)从开发层面呈现“一次开发，多处运行”的机制，跨平台的开发是目前乃至未来发展的趋势。同时，越来越多的优秀app为web前端开发者开放出js-sdk，以方便开发者使用。例如：微信jssdk、支付宝alipayjssdk及jsapi等。

但是，现有的技术中，大多数平台开放的js-sdk由于开发风格迥异，导致调用的api也不同。开发者想要将h5页面运行在该应用中，必须调用相对应平台的js-sdkapi，否则无法实现预想的功能。例如：在微信中完美运行的h5页面在支付宝中不经过大量修改，就无法实现预想功能。这种情形违背了“一次开发，多处运行”的本意，给web前端开发者带来学习成本的同时，也增加了开发成本。面对众多平台风格迥异的js-sdk带来的不同开发方式，如何以尽可能少的改动实现一套h5页面能够在多平台运行，对于web前端开发者来说是一件迫在眉睫的事。

技术实现要素：

本发明要解决的技术问题是在改动较少的情况下，如何实现一套h5页面能够在多平台运行。

为了解决上述技术问题，本发明的技术方案为：

一种h5页面的多平台运行方法，包括步骤：

将至少两个平台发布的js-sdk进行重新封装，形成一中间件，并输出所述中间件的api；

将所述中间件引入页面中；

接收待发布平台的初始化参数，通过所述中间件对传入的初始化参数进行校验识别；

当校验识别通过时，调用所述中间件的api，由所述中间件的api关联到待发布平台js-sdk的api；

添加对应代码以实现对应功能。

优选地：从不同平台开放的js-sdk中选出相同功能，在中间件中以代理的形式定义一方法，以封装各功能，形成中间件，并输出api。

优选地：从不同平台开放的js-sdk中选出相同功能，根据xx.navigator.useragent的值判断当前页面所处客户端环境，根据客户端环境调用对应的平台js-sdk，以封装各功能，形成中间件，并输出api。

优选地：通过所述中间件对传入的初始化参数进行校验识别后，当初始化参数的校验识别未通过时，则显示初始化参数错误，并结束任务。

优选地：中间件根据初始化参数至欲发布的平台进行权限校验，以实现调用对应平台的js-sdk。

本发明还提出了一种h5页面的多平台运行装置，包括：

中间件模块：将至少两个平台发布的js-sdk进行重新封装，形成一中间件，并输出所述中间件的api；

页面引入模块：将所述中间件引入页面中；

校验模块：接收待发布平台的初始化参数，通过所述中间件对传入的初始化参数进行校验识别；

api关联模块：当校验识别通过时，调用所述中间件的api，由所述中间件的api关联到待发布平台js-sdk的api；

添加模块：添加对应代码以实现对应功能。

优选地：所述中间件模块中，从不同平台开放的js-sdk中选出相同功能，在中间件中以代理的形式定义一方法，以封装各功能，形成中间件，并输出api。

优选地：所述中间件模块中，从不同平台开放的js-sdk中选出相同功能，根据xx.navigator.useragent的值判断当前页面所处客户端环境，根据客户端环境调用对应的平台js-sdk，以封装各功能，形成中间件，并输出api。

优选地：通过所述中间件对传入的初始化参数进行校验识别后，当初始化参数的校验识别未通过时，则显示初始化参数错误，并结束任务。

优选地：所述api校验模块中，中间件根据初始化参数至欲发布的平台进行权限校验，以实现调用对应平台的js-sdk。

采用上述技术方案，将至少两个平台发布的js-sdk进行重新封装，进而形成一个中间件。在使用时，将中间件传入要发布的平台的初始参数进行校验，通过中间件的api关联对应的平台api，实现添加对应代码以实现对应功能。在h5页面尽可能少改动代码的情况下，本发明技术方案实现了h5页面完美运行在多平台上的一种方法。整个集成过程中仅仅多引入一个中间件，不增加额外的开发难度，不仅减少web前端开发者的学习成本，还提高了web前端开发者的开发效率，同时也变相提高了h5页面的利用率。

附图说明

图1为本发明多平台运行方法一实施例的流程图；

图2为本发明多平台运行装置一实施例的模块示意图。

图中，10-中间件模块，20-页面引入模块，30-校验模块，40-api关联模块，50-添加模块。

具体实施方式

下面结合附图对本发明的具体实施方式作进一步说明。在此需要说明的是，对于这些实施方式的说明用于帮助理解本发明，但并不构成对本发明的限定。此外，下面所描述的本发明各个实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互组合。

本发明主要目的是解决如何高效便捷将一套h5页面运行在不同平台，运用场景可以包括h5页面、微信公众号开发、支付宝生活号、hybirdapp等，此处不一一列举。

在本发明的一实施例中，在开发h5页面时，通过使用本发明实现的中间件进行页面的代码编写，从而运行在不同平台。其具体的集成步骤如下：

本发明基于不同平台开放的js-sdk选出具有相同功能的方法，在中间件中以代理的形式定义一方法。该方法首先根据xx.navigator.useragent的值判断当前页面所处客户端环境，然后根据客户端环境调用对应平台js-sdk，以此形式封装各个功能，形成中间件，输出api。web前端开发者只需预先了解该中间件的api使用方式即可。开发人员将本发明实现的中间件引入页面，传入欲发布平台的初始化参数(初始化参数需要根据欲发布平台的要求传递)，中间件根据初始化参数去欲发布平台校验权限，从而实现调用对应平台的js-sdk。本实施例实现的中间件对传入的初始化参数进行校验，如果错误，则将错误抛出，将错误信息推送、显示，并结束任务；如果初始化参数校验正确，则识别欲调用的平台js-sdk；通过调用中间件api，中间件api关联到欲调用平台js-sdk中相对应的api，根据调用api后的返回结果，添加相对应的业务代码，即可实现调用欲调用平台js-sdkapi的功能。本技术方案无需大量修改开发代码，即可实现一套h5代码，运行多平台，达到真正实现“一次开发，多处运行”的目的。

参照图1，本发明的另一实施例中，该多平台运行方法包括步骤：

s10：将至少两个平台发布的js-sdk进行重新封装，形成一中间件，并输出中间件的api；需要说明的是，平台发布的js-sdk可以包括微信jssdk、支付宝alipayjssdk及jsapi等，此处不一一列举。

s20：将中间件引入页面中；

s30：接收传入的待发布平台的初始化参数，通过中间件对传入的初始化参数进行校验识别；

s40：当校验识别通过时，则识别欲调用的平台js-sdk，调用中间件的api，由中间件的api关联到待发布平台js-sdk的api；

s50：添加对应代码以实现对应功能，该代码为实现对应功能的代码。

具体地，从不同平台开放的js-sdk中选出相同功能，在中间件中以代理的形式定义一方法，以封装各功能，形成中间件，并输出api。

进一步地，从不同平台开放的js-sdk中选出相同功能，根据xx.navigator.useragent的值判断当前页面所处客户端环境，根据客户端环境调用对应的平台js-sdk，以封装各功能，形成中间件，并输出api。

具体地，通过中间件对传入的初始化参数进行校验识别后，当初始化参数的校验识别未通过时，则显示初始化参数错误，并结束任务。

具体地，中间件根据初始化参数至欲发布的平台进行权限校验，以实现调用对应平台的js-sdk。

采用上述技术方案，将至少两个平台发布的js-sdk进行重新封装，进而形成一个中间件。在使用时，将中间件传入要发布的平台的初始参数进行校验，通过中间件的api关联对应的平台api，进而添加对应代码以实现对应功能。在h5页面尽可能少改动代码的情况下，本发明技术方案实现了h5页面完美运行在多平台上的一种方法。整个集成过程中仅仅多引入一个中间件，不增加额外的开发难度，所需工作量较少，不仅减少web前端开发者的学习成本，还提高了web前端开发者的开发效率，同时也变相提高了h5页面的利用率。

参照图2，本发明还提出了一种h5页面的多平台运行装置，包括：

中间件模块10：将至少两个平台发布的js-sdk进行重新封装，形成一中间件，并输出中间件的api；封装时，从不同平台开放的js-sdk中选出相同功能，在中间件中以代理的形式定义一方法，以封装各功能。页面引入模块20：将中间件引入页面中；校验模块30：接收待发布平台的初始化参数，通过中间件对传入的初始化参数进行校验识别；api关联模块40：当校验识别通过时，调用中间件的api，由中间件的api关联到待发布平台js-sdk的api；添加模块50：添加对应代码以实现对应功能。

进一步地，中间件模块10中，从不同平台开放的js-sdk中选出相同功能，根据xx.navigator.useragent的值判断当前页面所处客户端环境，根据客户端环境调用对应的平台js-sdk，以封装各功能，形成中间件，并输出api。

进一步地，通过中间件对传入的初始化参数进行校验识别后，当初始化参数的校验识别未通过时，则显示初始化参数错误，并结束任务。

进一步地，api校验模块30中，中间件根据初始化参数至欲发布的平台进行权限校验，以实现调用对应平台的js-sdk。

以上的h5页面的多平台运行装置，通过将至少两个平台js-sdk重新封装入一个中间件中，形成一个至少包括两个平台js-sdk的中间件。在页面中引入中间件，传入初始化参数，调用该中间件api，通过初始化参数识别出欲调用的平台js-sdk，即可实现调用欲调用平台js-sdkapi的功能，最后通过添加对应的代码来实现相应的功能。本技术方案实现了一套h5代码运行多平台，无需大量修改开发代码，真正实现了“一次开发，多处运行”的目的，同时还提高了web前端开发者的开发效率。

以上结合附图对本发明的实施方式作了详细说明，但本发明不限于所描述的实施方式。对于本领域的技术人员而言，在不脱离本发明原理和精神的情况下，对这些实施方式进行多种变化、修改、替换和变型，仍落入本发明的保护范围内。