一种基于H5的跨终端自适应显示的方法及装置与流程

本发明实施例涉及智慧家居技术领域，尤其涉及一种基于h5的跨终端自适应显示的方法及装置。

背景技术：

目前开发人员在设计一款app的时候，基本都是优先在手机上进行开发，当手机上该款app开发成功后，若想将该款app移植到其它类型的终端上进行使用是，需要重新为该款app开发一套代码，重新设计ui，再进行开发。这种情况下会造成研发周期长，维护工作量大，浪费了大量时间和人力。

技术实现要素：

本发明实施例提供一种基于h5的跨终端自适应显示的方法及装置，用以实现同一款app在不同终端上自适应显示，提高app研发效率。

第一方面，本发明实施例提供一种基于h5的跨终端自适应显示的方法，包括：

终端在确定app启动时将终端的设备信息发送给后台，所述终端的设备信息包括终端类型，以使所述后台根据所述终端类型确定所述app的h5模板；

所述终端解析所述后台发送的所述app的h5模板，并根据所述终端的分辨率，确定出所述h5模板所需的css文件以及js文件列表；

所述终端根据所述h5模板所需的css文件以及js文件列表，从所述后台请求下载所述终端的分辨率对应的css文件和所述js文件列表对应的各js文件；

所述终端根据所述h5模板以及所述终端的分辨率对应的css文件和所述各js文件，加载所述app的h5页面。

上述技术方案中，通过将终端的终端类型发送给后台，从而得到适配该终端的app的h5模板，并基于终端的当前分辨率从后台拉取该h5模板所需的css文件和js文件，从而加载该app的h5页面，可以实现一次app的研发适配多种终端，无需针对不同的终端进行多次研发，从而提高app的研发效率，节省了人力和时间成本。

可选的，所述终端的设备信息还包括厂商和型号，以使所述后台根据所述终端类型、所述厂商和所述型号确定所述app的h5模板。

第二方面，本发明实施提供一种基于h5的跨终端自适应显示的方法，所述方法包括：

后台获取终端发送的设备信息；所述设备信息是所述终端在确定app启动时发送的，所述设备信息包括终端类型；

所述后台根据所述终端类型从模板库中确定出所述app对应的h5模板；

所述后台将所述app对应的h5模板发送给所述终端，以使所述终端解析所述app对应h5模板确定出所述h5模板所需的css文件以及js文件列表；

所述后台在接收到所述终端的下载请求后，将css渲染库和js脚本库中所述h5模板所需的css文件和js文件列表中各js文件发送给所述终端，以使所述终端加载所述app的h5页面。

可选的，所述后台根据所述终端类型从模板库中确定出所述app对应的h5模板，将所述app对应的h5模板发送给所述终端，包括：

所述后台根据所述终端类型从模板库中确定出所述app对应的h5模板的路由路径，将所述路由路径发送给所述终端，以使所述终端根据所述路由路径下载所述app对应的h5模板；

所述后台接收到所述终端下载h5模板的请求时将所述app对应的h5模板发送给所述终端。

可选的，所述设备信息还包括厂商和型号；

所述后台根据所述终端类型从模板库中确定出所述app对应的h5模板，包括：

所述后台依次根据所述终端类型、所述厂商和所述型号，从所述模板库中确定出所述app对应的h5模板。

第三方面，本发明实施例提供一种基于h5的跨终端自适应显示的装置，包括：

发送单元，用于在确定app启动时将终端的设备信息发送给后台，所述终端的设备信息包括终端类型，以使所述后台根据所述终端类型确定所述app的h5模板；

处理单元，用于解析所述后台发送的所述app的h5模板，并根据所述终端的分辨率，确定出所述h5模板所需的css文件以及js文件列表；根据所述h5模板所需的css文件以及js文件列表，从所述后台请求下载所述终端的分辨率对应的css文件和所述js文件列表对应的各js文件；根据所述h5模板以及所述终端的分辨率对应的css文件和所述各js文件，加载所述app的h5页面。

可选的，所述终端的设备信息还包括厂商和型号，以使所述后台根据所述终端类型、所述厂商和所述型号确定所述app的h5模板。

第四方面，本发明实施例提供一种基于h5的跨终端自适应显示的装置，包括：

获取单元，用于获取终端发送的设备信息；所述设备信息是所述终端在确定app启动时发送的，所述设备信息包括终端类型；

处理单元，用于根据所述终端类型从模板库中确定出所述app对应的h5模板；

发送单元，用于将所述app对应的h5模板发送给所述终端，以使所述终端解析所述app对应h5模板确定出所述h5模板所需的css文件以及js文件列表；在接收到所述终端的下载请求后，将css渲染库和js脚本库中所述h5模板所需的css文件和js文件列表中各js文件发送给所述终端，以使所述终端加载所述app的h5页面。

可选的，所述处理单元具体用于：

根据所述终端类型从模板库中确定出所述app对应的h5模板的路由路径，将所述路由路径发送给所述终端，以使所述终端根据所述路由路径下载所述app对应的h5模板；

接收到所述终端下载h5模板的请求时控制所述发送单元将所述app对应的h5模板发送给所述终端。

可选的，所述设备信息还包括厂商和型号；

所述处理单元具体用于：

依次根据所述终端类型、所述厂商和所述型号，从所述模板库中确定出所述app对应的h5模板。

第五方面，本发明实施例还提供一种计算设备，包括：

存储器，用于存储程序指令；

处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行上述基于h5的跨终端自适应显示的方法。

第六方面，本发明实施例还提供一种计算机可读非易失性存储介质，包括计算机可读指令，当计算机读取并执行所述计算机可读指令时，使得计算机执行上述基于h5的跨终端自适应显示的方法。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种系统架构的示意图；

图2为本发明实施例提供的一种基于h5的跨终端自适应显示的方法的流程示意图；

图3为本发明实施例提供的一种文件存储的目录组织的示意图；

图4为本发明实施例提供的一种css文件适配的示意图；

图5为本发明实施例提供的一种确定h5模板的路由路径的流程示意图；

图6为本发明实施例提供的一种基于h5的跨终端自适应显示的方法的流程示意图；

图7为本发明实施例提供的一种基于h5的跨终端自适应显示的装置的结构示意图；

图8为本发明实施例提供的一种基于h5的跨终端自适应显示的装置的结构示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

图1示例性的示出了本发明实施例所适用的一种系统架构，该系统架构可以包括多个终端100和后台200。

其中，多个终端100为不同类型的设备，例如可以为手机、电视、冰箱、洗衣机、魔镜等不同类型的设备，该多个终端100可以安装app。

该后台200为各终端100上安装的app对应的服务器，其后台200上设有h5模板库、css渲染库和js脚本库。其中h5模板库中存储有该app的不同终端类型对应的h5模板，每个h5模板对应一套css渲染库和一套js脚本库，每套css渲染库保存适应不同屏幕尺寸和分辨率的渲染文件。每套js脚本库保存了其对应h5模板需要关联的一组js脚本文件。

需要说明的是，上述图1所示的结构仅是一种示例，本发明实施例对此不做限定。

基于上述描述，图2详细的示出了本发明实施例提供的一种基于h5的跨终端自适应显示的方法的流程，该流程可以由基于h5的跨终端自适应显示的装置执行。下面将通过终端与后台交互的方式来描述app自适应显示的过程。

如图2所示，该流程具体包括：

步骤201，终端在确定app启动时将终端的设备信息发送给后台。

在本发明实施例中，当app在终端上启动时，会搜集终端的设备信息，然后上报给后台，该上报的设备信息可以包括终端类型。以使后台根据该终端类型从模板库中确定出该app对应的h5模板。

需要说明的是，该设备信息还可以包括厂商和型号，即为终端的厂商和终端的型号，例如该终端的设备类型可以为冰箱，厂商为冰箱的厂商，型号为该冰箱的型号。后台可以依次依据该终端类型、厂商和型号为该app选择适配的h5模板。通过厂商和型号可以定制化h5模板。

步骤202，后台根据所述终端类型从模板库中确定出所述app对应的h5模板。

后台在确定出app对应的h5模板时，若设备信息只包括终端类型，则后台直接根据该终端类型，确定h5模板。若设备信息还包括厂商和型号，则需要依次依据终端类型、厂商和型号来确定app对应的h5模板。

具体的，后台根据终端类型从模板库中确定出app对应的h5模板的路由路径，将路由路径发送给终端，以使终端根据路由路径下载app对应的h5模板，后台接收到终端下载h5模板的请求时将app对应的h5模板发送给终端。

在本发明实施例中，后台中设有资源库，分别为h5模板库、css渲染库和js脚本库。其中该后台可以为web服务器，其在存储网页文件时，可以按照如图3所示的目录组织进行存储，具体的：

1)根目录下的路由框架分3级：

1级路由：设备类型；

2级路由：通用设计，或者按照厂商进行路由；

3级路由：如果2级路由为厂商，则进入3级路由，包括通用设计，或者按照当前厂商下的不同型号进行路由。其中，厂商和型号的路由模式根据不同项目进行定制化实现。

2)通过路由框架后，就进入具体的h5+js+css组合的web实现框架了。

其中：

每一个设备类型对应的1级路由的common目录下，包含一整套完整的设计(h5+js+css)，这是通用显示的基础。

在通用设计基础上，如果有定制化的需求，将差异化的实现全部放到设备类型\厂商\型号对应的目录下。

3)css渲染库

css渲染库中的文件，按照hdpi、mdpi、ldpi的方式进行组织，以适配不同终端分辨率的显示。其中这个分辨率目录可以根据需要扩展，比如：xhdpi、xxhdpi等。

具体到某一分辨率目录下，保存的就是对应分辨率的所有相关css文件了。例如，mdpi下保持有1.css、2.css、3.css等渲染文件。

在设计h5模板时，可以预置根据不同分辨率调用不同css文件的处理，具体可以如图4所示。同时，css文件本身也可以通过响应式布局来实现不同分辨率屏幕的适配。响应式布局，使用css的@media规则，根据不同屏幕大小范围，编写多个css样式，来适应多种屏幕大小。

后台在查找h5模板路径时，具体可见如图5所示的流程，在具体实现时，可以通过自适应选择框架来实现，该自适应选择框架的前端对接用户，后端对接资源库(包括h5模板库、js脚本库和css渲染库)，当用户上报终端基础信息后，自适应选择框架要负责判断该把哪一个h5模板返回给终端。

如图5所示，具体流程包括：

步骤501，接收app上报基础信息的请求报文。

步骤502，解析报文，获取设备类型、厂商、型号信息。

步骤503，1级路由拼接，得到路由：设备类型/。

步骤504，查找资源库中是否存在与设备类型/厂商匹配的目录，若是，则转入步骤505，若否则转入步骤506。

步骤505，2级路由拼接，得到路由：设备类型/厂商。

步骤506，2级路由拼接，得到路由：设备类型/common。

步骤507，查找资源库是否存在与设备类型/厂商/型号匹配的目录，若是，则转入步骤508，若否则转入步骤509。

步骤508，3级路由拼接，得到路由：设备类型/厂商/型号。

步骤509，3级路由拼接，得到路由：设备类型/厂商/common。

步骤510，根据最终的路由，返回对应路由下的h5模板的路由路径(完整的路径+模板名称)。

需要说明的是，如果要启用厂商+型号的定制化方案，必须在对应路由路径下放置首页对应的h5模板，这是应用加载的入口。

步骤203，后台将所述app的h5模板发送给所述终端。

当后台确定出app的h5模板后，可以在接收到终端发送的下载h5模板的请求时将app的h5模板发送给终端。

步骤204，终端解析所述后台发送的所述app的h5模板，并根据所述终端的分辨率，确定出所述h5模板所需的css文件以及js文件列表。

终端可以解析后台发送的app的h5模板，然后根据h5模板中的配置，按照自身的分辨率，确定出该h5模板所需的css文件以及js文件列表。

步骤205，终端根据所述h5模板所需的css文件以及js文件列表，从所述后台请求下载所述终端的分辨率对应的css文件和所述js文件列表对应的各js文件。

终端需要向后台发送下载请求，从后台下载该终端的分辨率对应的css文件和所述js文件列表对应的各js文件。

步骤206，后台在接收到所述终端的下载请求后，将css渲染库和js脚本库中所述h5模板所需的css文件和js文件列表中各js文件发送给所述终端。

后台在接收到终端的下载请求之后，就可以将依据该下载请求将css渲染库和js脚本库对应的文件发送给终端。

步骤207，终端根据所述h5模板以及所述终端的分辨率对应的css文件和所述各js文件，加载所述app的h5页面。

当终端接收完所有的文件之后，就可以加载app的h5页面。

也就是说，终端启动加载app首页的过程可以为，首先上报终端基础信息，包括终端类型(与后台约定好的类型)、厂商、型号，获取后台返回的首页h5模板路径(包含完整路由的相对路径)，并下载h5模板；然后webview组件解析h5模板，根据h5模板中的配置按需拉取js+css文件；最后根据h5模板和拉取的js+css文件加载app的首页。

为了更好的解释本发明实施例，下面将在具体的实施场景下描述上述app自适应显示的流程。

如图6所示，具体包括：

步骤601，启动应用。

用户启动终端上的app。

步骤602，上报终端基础信息。

app搜集设备的基础信息并上报给后台，上报内容包括：终端类型、厂商、型号。

步骤603，解析上报内容，并找到终端对应的h5模板的路由路径。

自适应选择框架接收到app上报的信息，并进行解析，然后根据终端类型，到h5模板库中搜索对应的h5模板，得到终端对应的h5模板的路由路径。

步骤604，返回终端使用的h5模板的路由路径。

自适应选择框架向返回app终端使用的h5模板的路由路径。

步骤605，解析模板路径，并拼装完整地址。

app解析h5模板的路由路径，然后拼装完整地址。

步骤606，拉取h5模板。

app根据完整地址从h5模板库中拉取h5模板。

步骤607，返回h5模板。

h5模板库向app返回h5模板

步骤608，解析h5模板，根据终端当前的分辨率，拉取对应的css渲染文件。

app解析h5模板，根据模板中预定义的不同分辨率css文件，选择和自己分辨率匹配的css文件，向后台的css渲染库请求下载。

步骤609，拉取对应分辨率的css渲染文件。

app向后台的css渲染库拉取对应分辨率的css渲染文件。

步骤610，返回css渲染文件。

后台的css渲染库向app返回css渲染文件。

步骤611，解析h5模板，获取js脚本文件列表。

app解析h5模板，获取到js文件列表。

步骤612，依次拉取js脚本文件。

app到后台的js脚本库中依次拉取对应的js脚本文件。

步骤613，返回js脚本文件。

后台的js脚本库向app中返回js脚本文件。

步骤614，加载页面。

文件都获取完毕之后，app正常加载h5页面。后续页面跳转，也都是基于以上相同的流程进行页面加载。

上述实施例表明，终端在确定app启动时将终端的设备信息发送给后台，终端的设备信息包括终端类型，以使后台根据终端类型确定app的h5模板，解析后台发送的app的h5模板，并根据终端的分辨率，确定出h5模板所需的css文件以及js文件列表，根据h5模板所需的css文件以及js文件列表，从后台请求下载终端的分辨率对应的css文件和所述js文件列表对应的各js文件，根据h5模板以及终端的分辨率对应的css文件和所述各js文件，加载app的h5页面。通过将终端的终端类型发送给后台，从而得到适配该终端的app的h5模板，并基于终端的当前分辨率从后台拉取该h5模板所需的css文件和js文件，从而加载该app的h5页面，可以实现一次app的研发适配多种终端，无需针对不同的终端进行多次研发，从而提高app的研发效率，节省了人力和时间成本。

基于相同的技术构思，图7示例性的示出了本发明实施例提供的一种基于h5的跨终端自适应显示的装置的结构，该装置可以执行基于h5的跨终端自适应显示的流程。

如图7所示，该装置具体包括：

发送单元701，用于在确定app启动时将终端的设备信息发送给后台，所述终端的设备信息包括终端类型，以使所述后台根据所述终端类型确定所述app的h5模板；

处理单元702，用于解析所述后台发送的所述app的h5模板，并根据所述终端的分辨率，确定出所述h5模板所需的css文件以及js文件列表；根据所述h5模板所需的css文件以及js文件列表，从所述后台请求下载所述终端的分辨率对应的css文件和所述js文件列表对应的各js文件；根据所述h5模板以及所述终端的分辨率对应的css文件和所述各js文件，加载所述app的h5页面。

可选的，所述终端的设备信息还包括厂商和型号，以使所述后台根据所述终端类型、所述厂商和所述型号确定所述app的h5模板。

基于相同的技术构思，图8示例性的示出了本发明实施例提供的一种基于h5的跨终端自适应显示的装置的结构，该装置可以执行基于h5的跨终端自适应显示的流程。

如图8所示，该装置包括：

获取单元801，用于获取终端发送的设备信息；所述设备信息是所述终端在确定app启动时发送的，所述设备信息包括终端类型；

处理单元802，用于根据所述终端类型从模板库中确定出所述app对应的h5模板；

发送单元803，用于将所述app对应的h5模板发送给所述终端，以使所述终端解析所述app对应h5模板确定出所述h5模板所需的css文件以及js文件列表；在接收到所述终端的下载请求后，将css渲染库和js脚本库中所述h5模板所需的css文件和js文件列表中各js文件发送给所述终端，以使所述终端加载所述app的h5页面。

可选的，所述处理单元802具体用于：

根据所述终端类型从模板库中确定出所述app对应的h5模板的路由路径，将所述路由路径发送给所述终端，以使所述终端根据所述路由路径下载所述app对应的h5模板；

接收到所述终端下载h5模板的请求时控制所述发送单元803将所述app对应的h5模板发送给所述终端。

可选的，所述设备信息还包括厂商和型号；

所述处理单元802具体用于：

依次根据所述终端类型、所述厂商和所述型号，从所述模板库中确定出所述app对应的h5模板。

基于相同的技术构思，本发明实施例还提供了一种计算设备，包括：

存储器，用于存储程序指令；

处理器，用于调用存储器中存储的程序指令，按照获得的程序执行上述基于h5的跨终端自适应显示的方法。

基于相同的技术构思，本发明实施例还提供了一种计算机可读非易失性存储介质，包括计算机可读指令，当计算机读取并执行计算机可读指令时，使得计算机执行上述基于h5的跨终端自适应显示的方法。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。