基于H5的跨终端自适应显示的方法及装置.pdf

《基于H5的跨终端自适应显示的方法及装置.pdf》由会员分享，可在线阅读，更多相关《基于H5的跨终端自适应显示的方法及装置.pdf（16页完成版）》请在专利查询网上搜索。

1、(19)中华人民共和国国家知识产权局 (12)发明专利申请 (10)申请公布号 (43)申请公布日 (21)申请号 202010199211.8 (22)申请日 2020.03.20 (71)申请人 青岛聚好联科技有限公司 地址 266101 山东省青岛市崂山区松岭路 399号 (72)发明人 李媛媛 (74)专利代理机构 北京同达信恒知识产权代理 有限公司 11291 代理人 张怀阳 (51)Int.Cl. G06F 9/451(2018.01) G06F 16/958(2019.01) (54)发明名称 一种基于H5的跨终端自适应显示的方法及 装置 (57)摘要 本发明公开了一种基于H5的。

2、跨终端自适应 显示的方法及装置， 该方法包括终端在确定APP 启动时将终端的设备信息发送给后台， 终端的设 备信息包括终端类型， 以使后台根据终端类型确 定APP的H5模板， 解析后台发送的APP的H5模板， 并根据终端的分辨率， 确定出H5模板所需的CSS 文件以及JS文件列表， 根据H5模板以及终端的分 辨率对应的CSS文件和所述各JS文件， 加载APP的 H5页面。 通过将终端的终端类型发送给后台， 从 而得到适配该终端的APP的H5模板， 并基于终端 的当前分辨率从后台拉取该H5模板所需的CSS文 件和JS文件， 从而加载该APP的H5页面， 可以提高 APP的研发效率， 节省了人力和。

3、时间成本。 权利要求书2页 说明书8页 附图5页 CN 111427645 A 2020.07.17 CN 111427645 A 1.一种基于H5的跨终端自适应显示的方法， 其特征在于， 包括： 终端在确定APP启动时将终端的设备信息发送给后台， 所述终端的设备信息包括终端 类型， 以使所述后台根据所述终端类型确定所述APP的H5模板； 所述终端解析所述后台发送的所述APP的H5模板， 并根据所述终端的分辨率， 确定出所 述H5模板所需的CSS文件以及JS文件列表； 所述终端根据所述H5模板所需的CSS文件以及JS文件列表， 从所述后台请求下载所述 终端的分辨率对应的CSS文件和所述JS文件。

4、列表对应的各JS文件； 所述终端根据所述H5模板以及所述终端的分辨率对应的CSS文件和所述各JS文件， 加 载所述APP的H5页面。 2.如权利要求1所述的方法， 其特征在于， 所述终端的设备信息还包括厂商和型号， 以 使所述后台根据所述终端类型、 所述厂商和所述型号确定所述APP的H5模板。 3.一种基于H5的跨终端自适应显示的方法， 其特征在于， 所述方法包括： 后台获取终端发送的设备信息； 所述设备信息是所述终端在确定APP启动时发送的， 所 述设备信息包括终端类型； 所述后台根据所述终端类型从模板库中确定出所述APP对应的H5模板； 所述后台将所述APP对应的H5模板发送给所述终端， 。

5、以使所述终端解析所述APP对应H5 模板确定出所述H5模板所需的CSS文件以及JS文件列表； 所述后台在接收到所述终端的下载请求后， 将CSS渲染库和JS脚本库中所述H5模板所 需的CSS文件和JS文件列表中各JS文件发送给所述终端， 以使所述终端加载所述APP的H5页 面。 4.如权利要求3所述的方法， 其特征在于， 所述后台根据所述终端类型从模板库中确定 出所述APP对应的H5模板， 将所述APP对应的H5模板发送给所述终端， 包括： 所述后台根据所述终端类型从模板库中确定出所述APP对应的H5模板的路由路径， 将 所述路由路径发送给所述终端， 以使所述终端根据所述路由路径下载所述APP对。

6、应的H5模 板； 所述后台接收到所述终端下载H5模板的请求时将所述APP对应的H5模板发送给所述终 端。 5.如权利要求3或4所述的方法， 其特征在于， 所述设备信息还包括厂商和型号； 所述后台根据所述终端类型从模板库中确定出所述APP对应的H5模板， 包括： 所述后台依次根据所述终端类型、 所述厂商和所述型号， 从所述模板库中确定出所述 APP对应的H5模板。 6.一种基于H5的跨终端自适应显示的装置， 其特征在于， 包括： 发送单元， 用于在确定APP启动时将终端的设备信息发送给后台， 所述终端的设备信息 包括终端类型， 以使所述后台根据所述终端类型确定所述APP的H5模板； 处理单元， 。

7、用于解析所述后台发送的所述APP的H5模板， 并根据所述终端的分辨率， 确 定出所述H5模板所需的CSS文件以及JS文件列表； 根据所述H5模板所需的CSS文件以及JS文 件列表， 从所述后台请求下载所述终端的分辨率对应的CSS文件和所述JS文件列表对应的 各JS文件； 根据所述H5模板以及所述终端的分辨率对应的CSS文件和所述各JS文件， 加载所 述APP的H5页面。 权利要求书 1/2 页 2 CN 111427645 A 2 7.如权利要求6所述的装置， 其特征在于， 所述终端的设备信息还包括厂商和型号， 以 使所述后台根据所述终端类型、 所述厂商和所述型号确定所述APP的H5模板。 8。

8、.一种基于H5的跨终端自适应显示的装置， 其特征在于， 包括： 获取单元， 用于获取终端发送的设备信息； 所述设备信息是所述终端在确定APP启动时 发送的， 所述设备信息包括终端类型； 处理单元， 用于根据所述终端类型从模板库中确定出所述APP对应的H5模板； 发送单元， 用于将所述APP对应的H5模板发送给所述终端， 以使所述终端解析所述APP 对应H5模板确定出所述H5模板所需的CSS文件以及JS文件列表； 在接收到所述终端的下载 请求后， 将CSS渲染库和JS脚本库中所述H5模板所需的CSS文件和JS文件列表中各JS文件发 送给所述终端， 以使所述终端加载所述APP的H5页面。 9.一种。

9、计算设备， 其特征在于， 包括： 存储器， 用于存储程序指令； 处理器， 用于调用所述存储器中存储的程序指令， 按照获得的程序执行权利要求1至5 任一项所述的方法。 10.一种计算机可读非易失性存储介质， 其特征在于， 包括计算机可读指令， 当计算机 读取并执行所述计算机可读指令时， 使得计算机执行如权利要求1至5任一项所述的方法。 权利要求书 2/2 页 3 CN 111427645 A 3 一种基于H5的跨终端自适应显示的方法及装置 技术领域 0001 本发明实施例涉及智慧家居技术领域， 尤其涉及一种基于H5的跨终端自适应显示 的方法及装置。 背景技术 0002 目前开发人员在设计一款AP。

10、P的时候， 基本都是优先在手机上进行开发， 当手机上 该款APP开发成功后， 若想将该款APP移植到其它类型的终端上进行使用是， 需要重新为该 款APP开发一套代码， 重新设计UI， 再进行开发。 这种情况下会造成研发周期长， 维护工作量 大， 浪费了大量时间和人力。 发明内容 0003 本发明实施例提供一种基于H5的跨终端自适应显示的方法及装置， 用以实现同一 款APP在不同终端上自适应显示， 提高APP研发效率。 0004 第一方面， 本发明实施例提供一种基于H5的跨终端自适应显示的方法， 包括： 0005 终端在确定APP启动时将终端的设备信息发送给后台， 所述终端的设备信息包括 终端类。

11、型， 以使所述后台根据所述终端类型确定所述APP的H5模板； 0006 所述终端解析所述后台发送的所述APP的H5模板， 并根据所述终端的分辨率， 确定 出所述H5模板所需的CSS文件以及JS文件列表； 0007 所述终端根据所述H5模板所需的CSS文件以及JS文件列表， 从所述后台请求下载 所述终端的分辨率对应的CSS文件和所述JS文件列表对应的各JS文件； 0008 所述终端根据所述H5模板以及所述终端的分辨率对应的CSS文件和所述各JS文 件， 加载所述APP的H5页面。 0009 上述技术方案中， 通过将终端的终端类型发送给后台， 从而得到适配该终端的APP 的H5模板， 并基于终端的。

12、当前分辨率从后台拉取该H5模板所需的CSS文件和JS文件， 从而加 载该APP的H5页面， 可以实现一次APP的研发适配多种终端， 无需针对不同的终端进行多次 研发， 从而提高APP的研发效率， 节省了人力和时间成本。 0010 可选的， 所述终端的设备信息还包括厂商和型号， 以使所述后台根据所述终端类 型、 所述厂商和所述型号确定所述APP的H5模板。 0011 第二方面， 本发明实施提供一种基于H5的跨终端自适应显示的方法， 所述方法包 括： 0012 后台获取终端发送的设备信息； 所述设备信息是所述终端在确定APP启动时发送 的， 所述设备信息包括终端类型； 0013 所述后台根据所述终。

13、端类型从模板库中确定出所述APP对应的H5模板； 0014 所述后台将所述APP对应的H5模板发送给所述终端， 以使所述终端解析所述APP对 应H5模板确定出所述H5模板所需的CSS文件以及JS文件列表； 0015 所述后台在接收到所述终端的下载请求后， 将CSS渲染库和JS脚本库中所述H5模 说明书 1/8 页 4 CN 111427645 A 4 板所需的CSS文件和JS文件列表中各JS文件发送给所述终端， 以使所述终端加载所述APP的 H5页面。 0016 可选的， 所述后台根据所述终端类型从模板库中确定出所述APP对应的H5模板， 将 所述APP对应的H5模板发送给所述终端， 包括： 。

14、0017 所述后台根据所述终端类型从模板库中确定出所述APP对应的H5模板的路由路 径， 将所述路由路径发送给所述终端， 以使所述终端根据所述路由路径下载所述APP对应的 H5模板； 0018 所述后台接收到所述终端下载H5模板的请求时将所述APP对应的H5模板发送给所 述终端。 0019 可选的， 所述设备信息还包括厂商和型号； 0020 所述后台根据所述终端类型从模板库中确定出所述APP对应的H5模板， 包括： 0021 所述后台依次根据所述终端类型、 所述厂商和所述型号， 从所述模板库中确定出 所述APP对应的H5模板。 0022 第三方面， 本发明实施例提供一种基于H5的跨终端自适应显。

15、示的装置， 包括： 0023 发送单元， 用于在确定APP启动时将终端的设备信息发送给后台， 所述终端的设备 信息包括终端类型， 以使所述后台根据所述终端类型确定所述APP的H5模板； 0024 处理单元， 用于解析所述后台发送的所述APP的H5模板， 并根据所述终端的分辨 率， 确定出所述H5模板所需的CSS文件以及JS文件列表； 根据所述H5模板所需的CSS文件以 及JS文件列表， 从所述后台请求下载所述终端的分辨率对应的CSS文件和所述JS文件列表 对应的各JS文件； 根据所述H5模板以及所述终端的分辨率对应的CSS文件和所述各JS文件， 加载所述APP的H5页面。 0025 可选的， 。

16、所述终端的设备信息还包括厂商和型号， 以使所述后台根据所述终端类 型、 所述厂商和所述型号确定所述APP的H5模板。 0026 第四方面， 本发明实施例提供一种基于H5的跨终端自适应显示的装置， 包括： 0027 获取单元， 用于获取终端发送的设备信息； 所述设备信息是所述终端在确定APP启 动时发送的， 所述设备信息包括终端类型； 0028 处理单元， 用于根据所述终端类型从模板库中确定出所述APP对应的H5模板； 0029 发送单元， 用于将所述APP对应的H5模板发送给所述终端， 以使所述终端解析所述 APP对应H5模板确定出所述H5模板所需的CSS文件以及JS文件列表； 在接收到所述终。

17、端的下 载请求后， 将CSS渲染库和JS脚本库中所述H5模板所需的CSS文件和JS文件列表中各JS文件 发送给所述终端， 以使所述终端加载所述APP的H5页面。 0030 可选的， 所述处理单元具体用于： 0031 根据所述终端类型从模板库中确定出所述APP对应的H5模板的路由路径， 将所述 路由路径发送给所述终端， 以使所述终端根据所述路由路径下载所述APP对应的H5模板； 0032 接收到所述终端下载H5模板的请求时控制所述发送单元将所述APP对应的H5模板 发送给所述终端。 0033 可选的， 所述设备信息还包括厂商和型号； 0034 所述处理单元具体用于： 0035 依次根据所述终端类。

18、型、 所述厂商和所述型号， 从所述模板库中确定出所述APP对 说明书 2/8 页 5 CN 111427645 A 5 应的H5模板。 0036 第五方面， 本发明实施例还提供一种计算设备， 包括： 0037 存储器， 用于存储程序指令； 0038 处理器， 用于调用所述存储器中存储的程序指令， 按照获得的程序执行上述基于 H5的跨终端自适应显示的方法。 0039 第六方面， 本发明实施例还提供一种计算机可读非易失性存储介质， 包括计算机 可读指令， 当计算机读取并执行所述计算机可读指令时， 使得计算机执行上述基于H5的跨 终端自适应显示的方法。 附图说明 0040 为了更清楚地说明本发明实施。

19、例中的技术方案， 下面将对实施例描述中所需要使 用的附图作简要介绍， 显而易见地， 下面描述中的附图仅仅是本发明的一些实施例， 对于本 领域的普通技术人员来讲， 在不付出创造性劳动的前提下， 还可以根据这些附图获得其他 的附图。 0041 图1为本发明实施例提供的一种系统架构的示意图； 0042 图2为本发明实施例提供的一种基于H5的跨终端自适应显示的方法的流程示意 图； 0043 图3为本发明实施例提供的一种文件存储的目录组织的示意图； 0044 图4为本发明实施例提供的一种CSS文件适配的示意图； 0045 图5为本发明实施例提供的一种确定H5模板的路由路径的流程示意图； 0046 图6为。

20、本发明实施例提供的一种基于H5的跨终端自适应显示的方法的流程示意 图； 0047 图7为本发明实施例提供的一种基于H5的跨终端自适应显示的装置的结构示意 图； 0048 图8为本发明实施例提供的一种基于H5的跨终端自适应显示的装置的结构示意 图。 具体实施方式 0049 为了使本发明的目的、 技术方案和优点更加清楚， 下面将结合附图对本发明作进 一步地详细描述， 显然， 所描述的实施例仅仅是本发明一部分实施例， 而不是全部的实施 例。 基于本发明中的实施例， 本领域普通技术人员在没有做出创造性劳动前提下所获得的 所有其它实施例， 都属于本发明保护的范围。 0050 图1示例性的示出了本发明实施。

21、例所适用的一种系统架构， 该系统架构可以包括 多个终端100和后台200。 0051 其中， 多个终端100为不同类型的设备， 例如可以为手机、 电视、 冰箱、 洗衣机、 魔镜 等不同类型的设备， 该多个终端100可以安装APP。 0052 该后台200为各终端100上安装的APP对应的服务器， 其后台200上设有H5模板库、 CSS渲染库和JS脚本库。 其中H5模板库中存储有该APP的不同终端类型对应的H5模板， 每个 H5模板对应一套CSS渲染库和一套JS脚本库， 每套CSS渲染库保存适应不同屏幕尺寸和分辨 说明书 3/8 页 6 CN 111427645 A 6 率的渲染文件。 每套JS。

22、脚本库保存了其对应H5模板需要关联的一组JS脚本文件。 0053 需要说明的是， 上述图1所示的结构仅是一种示例， 本发明实施例对此不做限定。 0054 基于上述描述， 图2详细的示出了本发明实施例提供的一种基于H5的跨终端自适 应显示的方法的流程， 该流程可以由基于H5的跨终端自适应显示的装置执行。 下面将通过 终端与后台交互的方式来描述APP自适应显示的过程。 0055 如图2所示， 该流程具体包括： 0056 步骤201， 终端在确定APP启动时将终端的设备信息发送给后台。 0057 在本发明实施例中， 当APP在终端上启动时， 会搜集终端的设备信息， 然后上报给 后台， 该上报的设备信。

23、息可以包括终端类型。 以使后台根据该终端类型从模板库中确定出 该APP对应的H5模板。 0058 需要说明的是， 该设备信息还可以包括厂商和型号， 即为终端的厂商和终端的型 号， 例如该终端的设备类型可以为冰箱， 厂商为冰箱的厂商， 型号为该冰箱的型号。 后台可 以依次依据该终端类型、 厂商和型号为该APP选择适配的H5模板。 通过厂商和型号可以定制 化H5模板。 0059 步骤202， 后台根据所述终端类型从模板库中确定出所述APP对应的H5模板。 0060 后台在确定出APP对应的H5模板时， 若设备信息只包括终端类型， 则后台直接根据 该终端类型， 确定H5模板。 若设备信息还包括厂商和。

24、型号， 则需要依次依据终端类型、 厂商 和型号来确定APP对应的H5模板。 0061 具体的， 后台根据终端类型从模板库中确定出APP对应的H5模板的路由路径， 将路 由路径发送给终端， 以使终端根据路由路径下载APP对应的H5模板， 后台接收到终端下载H5 模板的请求时将APP对应的H5模板发送给终端。 0062 在本发明实施例中， 后台中设有资源库， 分别为H5模板库、 CSS渲染库和JS脚本库。 其中该后台可以为WEB服务器， 其在存储网页文件时， 可以按照如图3所示的目录组织进行 存储， 具体的： 0063 1)根目录下的路由框架分3级： 0064 1级路由： 设备类型； 0065 2。

25、级路由： 通用设计， 或者按照厂商进行路由； 0066 3级路由： 如果2级路由为厂商， 则进入3级路由， 包括通用设计， 或者按照当前厂商 下的不同型号进行路由。 其中， 厂商和型号的路由模式根据不同项目进行定制化实现。 0067 2)通过路由框架后， 就进入具体的h5+js+css组合的web实现框架了。 0068 其中： 0069 每一个设备类型对应的1级路由的common目录下， 包含一整套完整的设计(h5+js+ css)， 这是通用显示的基础。 0070 在通用设计基础上， 如果有定制化的需求， 将差异化的实现全部放到设备类型厂 商型号对应的目录下。 0071 3)CSS渲染库 0。

26、072 CSS渲染库中的文件， 按照hdpi、 mdpi、 ldpi的方式进行组织， 以适配不同终端分辨 率的显示。 其中这个分辨率目录可以根据需要扩展， 比如： xhdpi、 xxhdpi等。 0073 具体到某一分辨率目录下， 保存的就是对应分辨率的所有相关CSS文件了。 例如， 说明书 4/8 页 7 CN 111427645 A 7 mdpi下保持有1.css、 2.css、 3.css等渲染文件。 0074 在设计H5模板时， 可以预置根据不同分辨率调用不同CSS文件的处理， 具体可以如 图4所示。 同时， CSS文件本身也可以通过响应式布局来实现不同分辨率屏幕的适配。 响应式 布局。

27、， 使用CSS的media规则， 根据不同屏幕大小范围， 编写多个CSS样式， 来适应多种屏幕 大小。 0075 后台在查找H5模板路径时， 具体可见如图5所示的流程， 在具体实现时， 可以通过 自适应选择框架来实现， 该自适应选择框架的前端对接用户， 后端对接资源库(包括H5模板 库、 JS脚本库和CSS渲染库)， 当用户上报终端基础信息后， 自适应选择框架要负责判断该把 哪一个H5模板返回给终端。 0076 如图5所示， 具体流程包括： 0077 步骤501， 接收APP上报基础信息的请求报文。 0078 步骤502， 解析报文， 获取设备类型、 厂商、 型号信息。 0079 步骤503，。

28、 1级路由拼接， 得到路由： 设备类型/。 0080 步骤504， 查找资源库中是否存在与设备类型/厂商匹配的目录， 若是， 则转入步骤 505， 若否则转入步骤506。 0081 步骤505， 2级路由拼接， 得到路由： 设备类型/厂商。 0082 步骤506， 2级路由拼接， 得到路由： 设备类型/common。 0083 步骤507， 查找资源库是否存在与设备类型/厂商/型号匹配的目录， 若是， 则转入 步骤508， 若否则转入步骤509。 0084 步骤508， 3级路由拼接， 得到路由： 设备类型/厂商/型号。 0085 步骤509， 3级路由拼接， 得到路由： 设备类型/厂商/co。

29、mmon。 0086 步骤510， 根据最终的路由， 返回对应路由下的H5模板的路由路径(完整的路径+模 板名称)。 0087 需要说明的是， 如果要启用厂商+型号的定制化方案， 必须在对应路由路径下放置 首页对应的H5模板， 这是应用加载的入口。 0088 步骤203， 后台将所述APP的H5模板发送给所述终端。 0089 当后台确定出APP的H5模板后， 可以在接收到终端发送的下载H5模板的请求时将 APP的H5模板发送给终端。 0090 步骤204， 终端解析所述后台发送的所述APP的H5模板， 并根据所述终端的分辨率， 确定出所述H5模板所需的CSS文件以及JS文件列表。 0091 终。

30、端可以解析后台发送的APP的H5模板， 然后根据H5模板中的配置， 按照自身的分 辨率， 确定出该H5模板所需的CSS文件以及JS文件列表。 0092 步骤205， 终端根据所述H5模板所需的CSS文件以及JS文件列表， 从所述后台请求 下载所述终端的分辨率对应的CSS文件和所述JS文件列表对应的各JS文件。 0093 终端需要向后台发送下载请求， 从后台下载该终端的分辨率对应的CSS文件和所 述JS文件列表对应的各JS文件。 0094 步骤206， 后台在接收到所述终端的下载请求后， 将CSS渲染库和JS脚本库中所述 H5模板所需的CSS文件和JS文件列表中各JS文件发送给所述终端。 009。

31、5 后台在接收到终端的下载请求之后， 就可以将依据该下载请求将CSS渲染库和JS 说明书 5/8 页 8 CN 111427645 A 8 脚本库对应的文件发送给终端。 0096 步骤207， 终端根据所述H5模板以及所述终端的分辨率对应的CSS文件和所述各JS 文件， 加载所述APP的H5页面。 0097 当终端接收完所有的文件之后， 就可以加载APP的H5页面。 0098 也就是说， 终端启动加载APP首页的过程可以为， 首先上报终端基础信息， 包括终 端类型(与后台约定好的类型)、 厂商、 型号， 获取后台返回的首页H5模板路径(包含完整路 由的相对路径)， 并下载H5模板； 然后web。

32、view组件解析H5模板， 根据H5模板中的配置按需拉 取JS+CSS文件； 最后根据H5模板和拉取的JS+CSS文件加载APP的首页。 0099 为了更好的解释本发明实施例， 下面将在具体的实施场景下描述上述APP自适应 显示的流程。 0100 如图6所示， 具体包括： 0101 步骤601， 启动应用。 0102 用户启动终端上的APP。 0103 步骤602， 上报终端基础信息。 0104 APP搜集设备的基础信息并上报给后台， 上报内容包括： 终端类型、 厂商、 型号。 0105 步骤603， 解析上报内容， 并找到终端对应的H5模板的路由路径。 0106 自适应选择框架接收到APP上。

33、报的信息， 并进行解析， 然后根据终端类型， 到H5模 板库中搜索对应的H5模板， 得到终端对应的H5模板的路由路径。 0107 步骤604， 返回终端使用的H5模板的路由路径。 0108 自适应选择框架向返回APP终端使用的H5模板的路由路径。 0109 步骤605， 解析模板路径， 并拼装完整地址。 0110 APP解析H5模板的路由路径， 然后拼装完整地址。 0111 步骤606， 拉取H5模板。 0112 APP根据完整地址从H5模板库中拉取H5模板。 0113 步骤607， 返回H5模板。 0114 H5模板库向APP返回H5模板 0115 步骤608， 解析H5模板， 根据终端当前。

34、的分辨率， 拉取对应的CSS渲染文件。 0116 APP解析H5模板， 根据模板中预定义的不同分辨率CSS文件， 选择和自己分辨率匹 配的CSS文件， 向后台的CSS渲染库请求下载。 0117 步骤609， 拉取对应分辨率的CSS渲染文件。 0118 APP向后台的CSS渲染库拉取对应分辨率的CSS渲染文件。 0119 步骤610， 返回CSS渲染文件。 0120 后台的CSS渲染库向APP返回CSS渲染文件。 0121 步骤611， 解析H5模板， 获取JS脚本文件列表。 0122 APP解析H5模板， 获取到JS文件列表。 0123 步骤612， 依次拉取JS脚本文件。 0124 APP到。

35、后台的JS脚本库中依次拉取对应的JS脚本文件。 0125 步骤613， 返回JS脚本文件。 0126 后台的JS脚本库向APP中返回JS脚本文件。 说明书 6/8 页 9 CN 111427645 A 9 0127 步骤614， 加载页面。 0128 文件都获取完毕之后， APP正常加载H5页面。 后续页面跳转， 也都是基于以上相同 的流程进行页面加载。 0129 上述实施例表明， 终端在确定APP启动时将终端的设备信息发送给后台， 终端的设 备信息包括终端类型， 以使后台根据终端类型确定APP的H5模板， 解析后台发送的APP的H5 模板， 并根据终端的分辨率， 确定出H5模板所需的CSS文。

36、件以及JS文件列表， 根据H5模板所 需的CSS文件以及JS文件列表， 从后台请求下载终端的分辨率对应的CSS文件和所述JS文件 列表对应的各JS文件， 根据H5模板以及终端的分辨率对应的CSS文件和所述各JS文件， 加载 APP的H5页面。 通过将终端的终端类型发送给后台， 从而得到适配该终端的APP的H5模板， 并 基于终端的当前分辨率从后台拉取该H5模板所需的CSS文件和JS文件， 从而加载该APP的H5 页面， 可以实现一次APP的研发适配多种终端， 无需针对不同的终端进行多次研发， 从而提 高APP的研发效率， 节省了人力和时间成本。 0130 基于相同的技术构思， 图7示例性的示出。

37、了本发明实施例提供的一种基于H5的跨 终端自适应显示的装置的结构， 该装置可以执行基于H5的跨终端自适应显示的流程。 0131 如图7所示， 该装置具体包括： 0132 发送单元701， 用于在确定APP启动时将终端的设备信息发送给后台， 所述终端的 设备信息包括终端类型， 以使所述后台根据所述终端类型确定所述APP的H5模板； 0133 处理单元702， 用于解析所述后台发送的所述APP的H5模板， 并根据所述终端的分 辨率， 确定出所述H5模板所需的CSS文件以及JS文件列表； 根据所述H5模板所需的CSS文件 以及JS文件列表， 从所述后台请求下载所述终端的分辨率对应的CSS文件和所述J。

38、S文件列 表对应的各JS文件； 根据所述H5模板以及所述终端的分辨率对应的CSS文件和所述各JS文 件， 加载所述APP的H5页面。 0134 可选的， 所述终端的设备信息还包括厂商和型号， 以使所述后台根据所述终端类 型、 所述厂商和所述型号确定所述APP的H5模板。 0135 基于相同的技术构思， 图8示例性的示出了本发明实施例提供的一种基于H5的跨 终端自适应显示的装置的结构， 该装置可以执行基于H5的跨终端自适应显示的流程。 0136 如图8所示， 该装置包括： 0137 获取单元801， 用于获取终端发送的设备信息； 所述设备信息是所述终端在确定 APP启动时发送的， 所述设备信息包。

39、括终端类型； 0138 处理单元802， 用于根据所述终端类型从模板库中确定出所述APP对应的H5模板； 0139 发送单元803， 用于将所述APP对应的H5模板发送给所述终端， 以使所述终端解析 所述APP对应H5模板确定出所述H5模板所需的CSS文件以及JS文件列表； 在接收到所述终端 的下载请求后， 将CSS渲染库和JS脚本库中所述H5模板所需的CSS文件和JS文件列表中各JS 文件发送给所述终端， 以使所述终端加载所述APP的H5页面。 0140 可选的， 所述处理单元802具体用于： 0141 根据所述终端类型从模板库中确定出所述APP对应的H5模板的路由路径， 将所述 路由路径发。

40、送给所述终端， 以使所述终端根据所述路由路径下载所述APP对应的H5模板； 0142 接收到所述终端下载H5模板的请求时控制所述发送单元803将所述APP对应的H5 模板发送给所述终端。 说明书 7/8 页 10 CN 111427645 A 10 0143 可选的， 所述设备信息还包括厂商和型号； 0144 所述处理单元802具体用于： 0145 依次根据所述终端类型、 所述厂商和所述型号， 从所述模板库中确定出所述APP对 应的H5模板。 0146 基于相同的技术构思， 本发明实施例还提供了一种计算设备， 包括： 0147 存储器， 用于存储程序指令； 0148 处理器， 用于调用存储器中。

41、存储的程序指令， 按照获得的程序执行上述基于H5的 跨终端自适应显示的方法。 0149 基于相同的技术构思， 本发明实施例还提供了一种计算机可读非易失性存储介 质， 包括计算机可读指令， 当计算机读取并执行计算机可读指令时， 使得计算机执行上述基 于H5的跨终端自适应显示的方法。 0150 本发明是参照根据本发明实施例的方法、 设备(系统)、 和计算机程序产品的流程 图和/或方框图来描述的。 应理解可由计算机程序指令实现流程图和/或方框图中的每一流 程和/或方框、 以及流程图和/或方框图中的流程和/或方框的结合。 可提供这些计算机程序 指令到通用计算机、 专用计算机、 嵌入式处理机或其他可编程。

42、数据处理设备的处理器以产 生一个机器， 使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实 现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。 0151 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特 定方式工作的计算机可读存储器中， 使得存储在该计算机可读存储器中的指令产生包括指 令装置的制造品， 该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或 多个方框中指定的功能。 0152 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上， 使得在计 算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处。

43、理， 从而在计算机或 其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一 个方框或多个方框中指定的功能的步骤。 0153 尽管已描述了本发明的优选实施例， 但本领域内的技术人员一旦得知了基本创造 性概念， 则可对这些实施例作出另外的变更和修改。 所以， 所附权利要求意欲解释为包括优 选实施例以及落入本发明范围的所有变更和修改。 0154 显然， 本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精 神和范围。 这样， 倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围 之内， 则本发明也意图包含这些改动和变型在内。 说明书 8/8 页 11 CN 111427645 A 11 图1 图2 说明书附图 1/5 页 12 CN 111427645 A 12 图3 图4 说明书附图 2/5 页 13 CN 111427645 A 13 图5 说明书附图 3/5 页 14 CN 111427645 A 14 图6 图7 说明书附图 4/5 页 15 CN 111427645 A 15 图8 说明书附图 5/5 页 16 CN 111427645 A 16 。