[發明專利]一種基于H5的跨終端自適應顯示的方法及裝置

在審

• 申請號: 202010199211.8
• 申請日: 2020-03-20
• 公開（公告）號: CN111427645A
• 公開（公告）日: 2020-07-17
• 發明（設計）人: 李媛媛
• 申請（專利權）人: 青島聚好聯科技有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F16/958
• 代理公司: 北京同達信恒知識產權代理有限公司 11291
• 代理人: 張懷陽

本發明公開了一種基于H5的跨終端自適應顯示的方法及裝置，該方法包括終端在確定APP啟動時將終端的設備信息發送給后臺，終端的設備信息包括終端類型，以使后臺根據終端類型確定APP的H5模板，解析后臺發送的APP的H5模板，并根據終端的分辨率，確定出H5模板所需的CSS文件以及JS文件列表，根據H5模板以及終端的分辨率對應的CSS文件和所述各JS文件，加載APP的H5頁面。通過將終端的終端類型發送給后臺，從而得到適配該終端的APP的H5模板，并基于終端的當前分辨率從后臺拉取該H5模板所需的CSS文件和JS文件，從而加載該APP的H5頁面，可以提高APP的研發效率，節省了人力和時間成本。

技術領域

本發明實施例涉及智慧家居技術領域，尤其涉及一種基于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模板；