[發明專利]一種HybridAPP中CSS樣式兼容不同平臺的方法及系統

在審

• 申請號: 201710702934.3
• 申請日: 2017-08-16
• 公開（公告）號: CN107463383A
• 公開（公告）日: 2017-12-12
• 發明（設計）人: 張德平
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 四川省成都市天策商標專利事務所51213
• 代理人: 秦華云,吳瑞芳

技術領域

本發明涉及移動Hybrid APP前端技術領域，特別涉及一種Hybrid APP中CSS樣式兼容不同平臺的方法及系統。

背景技術

近些年來，隨著互聯網的高速發展，便攜式移動設備與互聯網的結合，大大的改變了我們的生活方式和工作方式，尤其是智能手機的快速普及，徹底顛覆了傳統手機只作為通訊工具這一概念；現在只要一部智能手機就可以完成過去很多需要打開個人電腦才能完成的事情，這使我們的工作生活和學習都變得越來越便捷，越來越多的服務提供商也看準移動互聯網的發展，借助智能手機的普及，推出了各種方便我們工作和生活的移動APP，我們只需要在手機上打開APP，不管何時何地就可以輕松實現購物、預訂酒店、購買車票機票、花費充值、繳納水電氣費等服務，十分便捷，因此受到了用戶的熱愛，也改變了我們的生活。

Hybrid App的興起是現階段移動互聯網產業的一種偶然。HTML5開發移動應用的可跨平臺和廉價的優勢讓眾多想進入移動互聯網領域的公司開始心動。正是在這樣是機緣巧合下，基于HTML5低成本跨平臺開發優勢又兼具Native App特質的Hybrid App技術進入混戰，并且很快吸引了越來越多的關注。大幅的降低了移動應用的開發成本，可以通過現有應用商店模式發行，在用戶桌面形成獨立入口等，讓Hybrid App成為解決移動應用開發困境不錯的選擇。

Hybrid App通常同時使用網頁語言與程序語言開發，通過應用商店區分移動操作系統分發，用戶需要安裝使用的移動應用。總體特性更接近Native App，但是因為同時使用了網頁語言編碼，所以開發成本和難度比Native App要小很多。因此，Hybrid App兼具了Native App的所有優勢，也兼具了使用HTML5跨平臺開發低成本的優勢。

但是，由于不同移動平臺之間存在的差異，導致Hybrid APP中的HTML頁面會在不同移動平臺上的表現有不同的表現，這給用戶造成了一定的不便。

發明內容

本發明的目的是克服上述背景技術中不足，提供一種Hybrid APP中CSS樣式兼容不同平臺的方法及系統，主要通過從HTML元素CSS樣式表入手，針對不同移動平臺，定義適配該平臺的CSS樣式表，以消除HTML頁面在不同移動平臺表現上的差異性。

為了達到上述的技術效果，本發明采取以下技術方案：

一種Hybrid APP中CSS樣式兼容不同平臺的方法，包含以下步驟：

A.建立HTML頁面文件和外部樣式表，確定操作平臺一為基準平臺及操作平臺一上HTML頁面定義的CSS樣式為基準樣式；

B.確定差異元素，其中，所述差異元素為HTML頁面包含的頁面元素中在其他操作平臺上展示時與在所述基準平臺上展示時展示樣式存在差異的元素；

C.確定各差異元素的標準樣式，并參照該標準樣式修改所有差異元素的展示樣式，使各差異元素在各操作平臺的展示樣式均與其標準樣式相同；

D.分別對各差異元素在各操作平臺的展示樣式進行命名，其中，將差異元素M在操作平臺N的展示樣式定義為classM_N；

E.在HTML頁面中定義JavaScript編碼，所述JavaScript編碼用于判斷加載所述HTML頁面的操作平臺為操作平臺一或操作平臺N；

F.加載HTML頁面，其中，顯示加載HTML頁面中包含的差異元素時，根據步驟E的判斷結果，選擇加載各差異元素與該操作平臺相對應的展示樣式進行展示。

進一步地，所述操作平臺包含Android平臺和iOS平臺。

同時，本發明還公開了一種Hybrid APP中CSS樣式兼容不同平臺的系統，包含組件生成模塊、差異診斷模塊、標準確定模塊、樣式調整模塊、平臺判定模塊、組件加載模塊；

所述組件生成模塊用于建立HTML頁面文件和外部樣式表；所述差異診斷模塊用于確定HTML頁面包含的頁面元素中在各操作平臺上展示時展示樣式存在差異的差異元素；所述標準確定模塊用于確定各差異元素在各操作平臺上展示時的標準樣式；所述樣式調整模塊用于將各差異元素在各操作平臺上的展示樣式調整為標準樣式；所述平臺判定模塊用于判定當前加載HTML頁面的操作平臺的類型；所述組件加載模塊用于加載HTML頁面；