動態生成響應式網頁的方法及裝置製造方法
2023-05-03 21:21:56 3
動態生成響應式網頁的方法及裝置製造方法
【專利摘要】本發明提供了一種動態生成響應式網頁的方法和一種動態生成響應式網頁的裝置，其中，所述動態生成響應式網頁的方法，包括：加載HTML文件，對所述HTML文件進行解析，以得到多個XML文檔對象；根據所述多個XML文檔對象中每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類；根據特殊對象的匹配方法在所述多個XML文檔對象中匹配所述特殊對象，並將匹配到的所述特殊對象按照類型進行再次分類；根據所述多個XML文檔對象的分類情況，對每類所述XML文檔對象進行處理，以生成所述響應式網頁。本發明的技術方案降低了響應式網頁的開發門檻，提高了響應式網頁的開發效率。
【專利說明】動態生成響應式網頁的方法及裝置
【技術領域】
[0001]本發明涉及計算機【技術領域】，具體而言，涉及一種動態生成響應式網頁的方法和一種動態生成響應式網頁的裝置。
【背景技術】
[0002]隨著手機、平板等各種具有不同屏幕尺寸的顯示設備的發展，傳統的固定寬度的靜態網頁由於不能適應屏幕的變化，導致用戶體驗效果不佳，因此能夠針對各種終端和瀏覽器的不同顯示樣式進行自適應的響應式網頁應運而生，但是開發一個支持響應式網頁的應用程式的技術門檻很高，缺少有效的編程方法將多個普通的靜態網頁的HTML (HyperText Markup Language,超文本標記語言)文件轉化為響應式網頁,並且效率低下,不靈活。
[0003]因此，如何能夠靈活地生成響應式網頁，同時降低響應式網頁的開發門檻，提高響應式網頁的開發效率成為亟待解決的技術問題。
【發明內容】
[0004]本發明正是基於上述技術問題，提出了一種新的動態生成響應式網頁的方案，降低了響應式網頁的開發門檻，提高了響應式網頁的開發效率。
[0005]有鑑於此，本發明提出了一種動態生成響應式網頁的方法，包括:加載HTML文件，對所述HTML文件進行解析，以得到多個XML文檔對象；根據所述多個XML文檔對象中每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類；根據特殊對象的匹配方法在所述多個XML文檔對象中匹配所述特殊對象，並將匹配到的所述特殊對象按照類型進行再次分類；根據所述多個XML文檔對象的分類情況，對每類所述XML文檔對象進行處理，以生成所述響應式網頁。
[0006]在該技術方案中，通過將所述HTML文件解析成多個XML(ExtensibIe MarkupLanguage，可擴展標記語言)文檔對象，能夠在XML文檔下對文檔對象進行分類，並實現其它程序對文檔對象的搜索,通過每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類，並按照類型對特殊對象再次分類，能夠靈活地對不同屬性、不同類型的XML文檔對象進行不同的處理(如根據實際終端屏幕與瀏覽器的顯示屬性進行相應的處理)，進而使之生成的響應式網頁能夠適應具有不同顯示屬性的終端屏幕與瀏覽器，降低了響應式網頁的開發門檻，提高了響應式網頁的開發效率。
[0007]在上述技術方案中，優選地，生成所述響應式網頁的步驟具體為:針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理，以生成與每個所述終端的顯示屬性相對應的網頁。
[0008]在該技術方案中，通過根據不同終端的顯示屬性，對每類XML對象進行優化，能夠使得每類文檔對象轉換為適應於具有不同顯示屬性的終端的文檔對象，從而使得最終生成的網頁能夠適應於具有不同顯示屬性的終端，進而帶給用戶最佳的視覺體驗。其中，不同終端具有不同的顯示屬性包括終端系統平臺、屏幕大小與長寬比例、顯示方向等。
[0009]在上述技術方案中，優選地，針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理的步驟具體為:根據每個所述終端的屏幕比例和顯示方向，設定對應的網頁內容區域的大小和每類所述XML文檔對象的顯示方式。
[0010]在該技術方案中，根據獲取到的不同終端的屏幕比例和顯示方向，對網頁內容區域的大小和每類XML文檔對象的顯示方式進行設定，使得最終生成的響應式網頁能夠自適應於具有不同屏幕比例和顯示方向的終端，進而提高用戶的視覺體驗。
[0011 ] 在上述技術方案中，優選地，對所述HTML文件進行解析，得到的所述多個XML文檔對象的結構為樹形結構；設定每類所述XML文檔對象的顯示方式的步驟具體為:根據每個所述終端的屏幕比例和顯示方向，設定所述樹形結構中根節點的顯示尺寸；根據所述根節點的顯示尺寸，依次遍歷所述多個XML文檔對象，以設置所述多個XML文檔對象中每個XML文檔對象的顯示尺寸。
[0012]在該技術方案中，通過根據設定的所述樹形結構中根節點的顯示尺寸，遍歷所述多個XML文檔對象，以設置每個XML文檔對象的顯示尺寸，使得能夠自動對每個XML文檔對象的顯示尺寸進行設置，進而提高響應式網頁的生成效率，提高用戶體驗。
[0013]在上述技術方案中，還包括:檢測瀏覽器支持的顯示樣式；根據所述瀏覽器支持的顯示樣式，對所述多個XML文檔對象進行處理，以使處理後的所述多個XML文檔對象的顯示樣式適應於所述瀏覽器支持的顯示樣式。
[0014]在該技術方案中，通過根據瀏覽器支持的顯示樣式對多個XML文檔對象進行處理，使得XML文檔對象的顯示樣式能夠適應於不同的瀏覽器，同時也能夠解決不同瀏覽器的兼容問題，提高了用戶的使用體驗。
[0015]根據本發明的第二方面，還提出了一種動態生成響應式網頁的裝置，包括:用於加載HTML文件；用於對所述HTML文件進行解析，以得到多個XML文檔對象；用於根據所述多個XML文檔對象中每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類，並用於根據特殊對象的匹配方法在所述多個XML文檔對象中匹配所述特殊對象，並將匹配到的所述特殊對象按照類型進行再次分類；用於根據所述多個XML文檔對象的分類情況，對每類所述XML文檔對象進行處理，以生成所述響應式網頁。
[0016]在該技術方案中，通過將所述HTML文件解析成多個XML文檔對象，能夠在XML文檔下對文檔對象進行分類，並實現對文檔對象的搜索，通過每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類，並按照類型對特殊對象再次分類，能夠靈活地對不同屬性、不同類型的XML文檔對象進行不同的處理(如根據實際終端屏幕與瀏覽器的顯示屬性進行相應的處理)，進而使之生成的響應式網頁能夠適應具有不同顯示屬性的終端屏幕與瀏覽器，降低了響應式網頁的開發門檻，提高了響應式網頁的開發效率。
[0017]在上述技術方案中，優選地，所述處理單元208具體用於:針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理，以生成與每個所述終端的顯示屬性相對應的網頁。
[0018]在該技術方案中，通過根據不同終端的顯示屬性，對每類XML對象進行優化，能夠使得每類文檔對象轉換為適應於具有不同顯示屬性的終端的文檔對象，從而使得最終生成的網頁能夠適應於具有不同顯示屬性的終端，從而帶給用戶最佳的視覺體驗。其中，不同終端具有不同的顯示屬性包括終端系統平臺、屏幕大小與長寬比例、顯示方向等。
[0019]在上述技術方案中，優選地，所述處理單元208具體還用於:根據每個所述終端的屏幕比例和顯示方向，設定對應的網頁內容區域的大小和每類所述XML文檔對象的顯示方式。
[0020]在該技術方案中，根據獲取到的不同終端的屏幕比例和顯示方向，對網頁內容區域的大小和每類XML文檔對象的顯示方式進行設定使得最終生成的響應式網頁能夠自適應於具有不同屏幕比例和顯示方向的終端。
[0021 ] 在上述技術方案中，優選地，所述解析單元204具體用於，對所述HTML文件進行解析，得到的所述多個XML文檔對象的結構為樹形結構；所述處理單元具體還用於，根據每個所述終端的屏幕比例和顯示方向，設定所述樹形結構中根節點的顯示尺寸，並用於根據所述根節點的顯示尺寸，依次遍歷所述多個XML文檔對象，以設置所述多個XML文檔對象中每個XML文檔對象的顯示尺寸。
[0022]在該技術方案中，通過根據設定的所述樹形結構中根節點的顯示尺寸，遍歷所述多個XML文檔對象，以設置每個XML文檔對象的顯示尺寸，使得能夠自動對每個XML文檔對象的顯示尺寸進行設置，進而提高響應式網頁的生成效率，提高用戶體驗。
[0023]在上述技術方案中，優選地，還包括:檢測單元210，用於檢測瀏覽器支持的顯示樣式；所述處理單元208具體還用於，根據所述瀏覽器支持的顯示樣式，對所述多個XML文檔對象進行處理，以使處理後的所述多個XML文檔對象的顯示樣式適應於所述瀏覽器支持的顯示樣式。
[0024]在該技術方案中，通過根據瀏覽器支持的顯示樣式對多個XML文檔對象進行處理，使得XML文檔對象的顯示樣式能夠適應於不同的瀏覽器，同時也能夠解決不同瀏覽器的兼容問題，進而提高了用戶的使用體驗。
[0025]通過以上技術方案，能夠靈活地對不同屬性、不同類型的XML文檔對象進行不同的處理，進而使之生成的響應式網頁能夠適應具有不同顯示屬性的終端屏幕與瀏覽器，降低了響應式網頁的開發門檻，提高了響應式網頁的開發效率。
【專利附圖】
【附圖說明】
[0026]圖1示出了根據本發明的一個實施例的動態生成響應式網頁的方法的示意流程圖；
[0027]圖2示出了根據本發明的一個實施例的動態生成響應式網頁的裝置的示意框圖；
[0028]圖3示出了根據本發明的一個實施例的動態生成響應式網頁的裝置的總體架構示意圖；
[0029]圖4是根據本發明的一個實施例的動態生成響應式網頁的裝置的具體結構示意圖；
[0030]圖5示出了根據本發明的一個實施例的HTML文件解析過程示意圖；
[0031]圖6示出了根據本發明的一個實施例的響應式元素歸集模塊的結構示意圖；
[0032]圖7示出了根據本發明的一個實施例的動態轉換與生成模塊的結構示意圖；
[0033]圖8示出了根據本發明的一個實施例的流式布局轉換的過程示意圖。
【具體實施方式】
[0034]為了能夠更清楚地理解本發明的上述目的、特徵和優點，下面結合附圖和【具體實施方式】對本發明進行進一步的詳細描述。需要說明的是，在不衝突的情況下，本申請的實施例及實施例中的特徵可以相互組合。
[0035]在下面的描述中闡述了很多具體細節以便於充分理解本發明，但是，本發明還可以採用其他不同於在此描述的其他方式來實施，因此，本發明的保護範圍並不受下面公開的具體實施例的限制。
[0036]圖1示出了根據本發明的一個實施例的動態生成響應式網頁的方法的示意流程圖。
[0037]如圖1所示，根據本發明的一個實施例的動態生成響應式網頁的方法，包括:步驟102，加載HTML文件，對所述HTML文件進行解析，以得到多個XML文檔對象；步驟104，根據所述多個XML文檔對象中每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類；步驟106，根據特殊對象的匹配方法在所述多個XML文檔對象中匹配所述特殊對象，並將匹配到的所述特殊對象按照類型進行再次分類；步驟108，根據所述多個XML文檔對象的分類情況，對每類所述XML文檔對象進行處理，以生成所述響應式網頁。
[0038]在該技術方案中，通過將所述HTML文件解析成多個XML文檔對象，能夠在XML文檔下對文檔對象進行分類，並實現對文檔對象的搜索，通過每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類，並按照類型對特殊對象再次分類，能夠靈活地對不同屬性、不同類型的XML文檔對象進行不同的處理(如根據實際終端屏幕與瀏覽器的顯示屬性進行相應的處理)，進而使之生成的響應式網頁能夠適應具有不同顯示屬性的終端屏幕與瀏覽器，降低了響應式網頁的開發門檻，提高了響應式網頁的開發效率。
[0039]在上述技術方案中，優選地，生成所述響應式網頁的步驟具體為:針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理，以生成與每個所述終端的顯示屬性相對應的網頁。
[0040]在該技術方案中，通過根據不同終端的顯示屬性，對每類XML對象進行優化，能夠使得每類文檔對象轉換為適應於具有不同顯示屬性的終端的文檔對象，從而使得最終生成的網頁能夠適應於具有不同顯示屬性的終端，進而帶給用戶最佳的視覺體驗。其中，不同終端具有不同的顯示屬性包括終端系統平臺、屏幕大小與長寬比例、顯示方向等。
[0041]在上述技術方案中，優選地，針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理的步驟具體為:根據每個所述終端的屏幕比例和顯示方向，設定對應的網頁內容區域的大小和每類所述XML文檔對象的顯示方式。
[0042]在該技術方案中，根據獲取到的不同終端的屏幕比例和顯示方向，對網頁內容區域的大小和每類XML文檔對象的顯示方式進行設定，使得最終生成的響應式網頁能夠自適應於具有不同屏幕比例和顯示方向的終端，進而提高用戶的視覺體驗。
[0043]在上述技術方案中，優選地，對所述HTML文件進行解析，得到的所述多個XML文檔對象的結構為樹形結構；設定每類所述XML文檔對象的顯示方式的步驟具體為:根據每個所述終端的屏幕比例和顯示方向，設定所述樹形結構中根節點的顯示尺寸；根據所述根節點的顯示尺寸，依次遍歷所述多個XML文檔對象，以設置所述多個XML文檔對象中每個XML文檔對象的顯示尺寸。
[0044]在該技術方案中，通過根據設定的所述樹形結構中根節點的顯示尺寸，遍歷所述多個XML文檔對象，以設置每個XML文檔對象的顯示尺寸，使得能夠自動對每個XML文檔對象的顯示尺寸進行設置，進而提高響應式網頁的生成效率，提高用戶體驗。
[0045]在上述技術方案中，還包括:檢測瀏覽器支持的顯示樣式；根據所述瀏覽器支持的顯示樣式，對所述多個XML文檔對象進行處理，以使處理後的所述多個XML文檔對象的顯示樣式適應於所述瀏覽器支持的顯示樣式。
[0046]在該技術方案中，通過根據瀏覽器支持的顯示樣式對多個XML文檔對象進行處理，進而使得XML文檔對象的顯示樣式能夠適應於不同的瀏覽器，同時也能夠解決不同瀏覽器的兼容問題，提高了用戶的使用體驗。
[0047]圖2示出了根據本發明的一個實施例的動態生成響應式網頁的裝置的示意框圖。
[0048]如圖2所示，根據本發明的一個實施例的動態生成響應式網頁的裝置200，包括:加載單元202，用於加載HTML文件；解析單元204，用於對所述HTML文件進行解析，以得到多個XML文檔對象；分類單元206，用於根據所述多個XML文檔對象中每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類，並用於根據特殊對象的匹配方法在所述多個XML文檔對象中匹配所述特殊對象，並將匹配到的所述特殊對象按照類型進行再次分類；處理單元208，用於根據所述多個XML文檔對象的分類情況，對每類所述XML文檔對象進行處理，以生成所述響應式網頁。
[0049]在該技術方案中，通過將所述HTML文件解析成多個XML文檔對象，能夠在XML文檔下對文檔對象進行分類，並實現其它程序對文檔對象的搜索，通過每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類，並按照類型對特殊對象再次分類，能夠靈活地對不同屬性、不同類型的XML文檔對象進行不同的處理(如根據實際終端屏幕與瀏覽器的顯示屬性機芯響應的處理)，進而使之生成的響應式網頁能夠適應具有不同顯示屬性的終端屏幕與瀏覽器，降低了響應式網頁的開發門榲，提高了響應式網頁的開發效率。
[0050]在上述技術方案中，優選地，所述處理單元208具體用於:針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理，以生成與每個所述終端的顯示屬性相對應的網頁。
[0051]在該技術方案中，通過根據不同終端的顯示屬性，對每類XML對象進行優化，能夠使得每類文檔對象轉換為適應於具有不同顯示屬性的終端的文檔對象，從而使得最終生成的網頁能夠適應於具有不同顯示屬性的終端，進而帶給用戶最佳的視覺體驗。其中，不同終端具有不同的顯示屬性包括終端系統平臺、屏幕大小與長寬比例、顯示方向等。
[0052]在上述技術方案中，優選地，所述處理單元208具體還用於:根據每個所述終端的屏幕比例和顯示方向，設定對應的網頁內容區域的大小和每類所述XML文檔對象的顯示方式。
[0053]在該技術方案中，根據獲取到的不同終端的屏幕比例和顯示方向，對網頁內容區域的大小和每類XML文檔對象的顯示方式進行設定，使得最終生成的響應式網頁能夠自適應於具有不同屏幕比例和顯示方向的終端，進而提高用戶的視覺體驗。
[0054]在上述技術方案中，優選地，所述解析單元204具體用於，對所述HTML文件進行解析，得到的所述多個XML文檔對象的結構為樹形結構；所述處理單元具體還用於，根據每個所述終端的屏幕比例和顯示方向，設定所述樹形結構中根節點的顯示尺寸，並用於根據所述根節點的顯示尺寸，依次遍歷所述多個XML文檔對象，以設置所述多個XML文檔對象中每個XML文檔對象的顯示尺寸。
[0055]在該技術方案中，通過根據設定的所述樹形結構中根節點的顯示尺寸，遍歷所述多個XML文檔對象，以設置每個XML文檔對象的顯示尺寸，使得能夠對每個XML文檔對象的顯示尺寸進行設置的繁瑣步驟，進而提高響應式網頁的生成效率，提高用戶體驗。
[0056]在上述技術方案中，優選地，還包括:檢測單元210，用於檢測瀏覽器支持的顯示樣式；所述處理單元208具體還用於，根據所述瀏覽器支持的顯示樣式，對所述多個XML文檔對象進行處理，以使處理後的所述多個XML文檔對象的顯示樣式適應於所述瀏覽器支持的顯示樣式。
[0057]在該技術方案中，通過根據瀏覽器支持的顯示樣式對多個XML文檔對象進行處理，使得XML文檔對象的顯示樣式能夠適應於不同的瀏覽器，同時也能夠解決不同瀏覽器的兼容問題，提高了用戶的使用體驗。
[0058]圖3示出了根據本發明的一個實施例的動態生成響應式網頁的裝置的總體架構示意圖。
[0059]如圖3所示，實現動態生成響應式網頁，首先是通過內容獲取模塊302獲取內容來源，內容既可以是空白文檔也可以是既有傳統網頁。在此基礎上文件解析模塊304對內容進行讀取和解析。通過文件解析模塊304將文本字符串解析為XML對象，為後面的動態生成與轉換做準備。
[0060]動態生成模塊306在響應式元素歸集模塊3062中的響應式規則字典集的支持下，對元素進行歸集，並通過動態轉換與生成模塊3064添加和轉換為響應式元素。最後輸出成響應式網頁應用程式，如果是對於複雜的結構轉換通過自定義解析和生成規則，以實現功能的擴展。
[0061]圖4是根據本發明的一個實施例的動態生成響應式網頁的裝置的具體結構示意圖。
[0062]如圖4所示，針對動態生成響應式網頁的裝置的每一個模塊進行詳細說明:
[0063]內容獲取模塊302:
[0064]對於內容來源，提供了多種方式。既可以是空白文檔也可以是既有傳統網頁。既支持本地文件，還可以是URL地址。
[0065]文件解析模塊304:
[0066]內容通過文本流的方式讀取到內存，通過關鍵字符判斷和正則表達驗證，循環分析HTML文本。將文本轉換成對象，並轉換成樹形XML文檔對象。
[0067]如果是空白文檔，系統會自動生成標準HTML的結構，標準HTML結構包括:文檔聲明、根結構、頭結構、主體結構；否則將對文本進行解析，在解析過程中生成元素的對象，對象類型包括:文件、元素、解釋、文本。
[0068]文件解析模塊304的處理流程如圖5所示，包括:
[0069]步驟502，讀取HTML文件為文本。
[0070]步驟504，判斷HTML文件是否為空白文檔，若是，執行步驟506，若否，執行步驟508。
[0071]步驟506，生成基本結構。
[0072]步驟508，通過關鍵字符判斷和正則表達式驗證，循環分析HTML文本。
[0073]步驟510，處理元素大小位置屬性。
[0074]步驟512，將HTML文本轉換為XML對象，並轉換成樹形XML。
[0075]步驟514，搜索XML文檔對象，並進行分組。
[0076]在後續的流式布局轉換中需要知道元素的大小位置，因此如果元素指定了大小位置屬性，則在每個解析對象上添加記錄元素的大小位置的屬性。另外為了對元素進行響應式轉換與生成，需要對元素進行分組，具體可參照圖4所示。由於解析後的對象是XML文檔對象，所以支持搜索。一個解析對象可表示為:
[0077]
[0078]
[0079]
[0080]〈內容/>
[0081]〈分組/>
[0082]
[0083]
[0084]動態生成模塊306:
[0085]此模塊包含響應式元素歸集、動態轉換與生成和響應式規則字典集三個部分。響應式規則字典集部分定義了解析的匹配條件、生成的響應式內容等。響應式元素歸集部分根據響應式規則字典集對XML文檔的解析對象再次進行歸集，將特殊處理的圖片、導航信息等內容歸集為獨立集合，供動態轉換與生成部分處理。動態轉換與生成部分搜索分組，重新動態生成響應式解析對象代替舊有的解析對象。
[0086]A、響應式規則字典集結構如下:
[0087]主集合:[關鍵字]，[元素類型]，[分組]，[查詢條件]，[標準值]，[序號]
[0088]子集合:[關鍵字]，[屬性名]，[內容]，[序號]
[0089]響應式規則字典集定義了所有響應式最佳實踐的定義，包括媒體查詢、網頁樣式處理、網頁腳本處理等規則定義。
[0090]B、響應式元素歸集模塊3062的結構如圖6所示，對於HTML解析過程中的分組，對生成響應式網頁來說是不夠的。還需要進行二次分組，分組內容包括視頻、音頻的媒體標籤、圖片集合、導航菜單與結構布局定義。由於導航和結構布局的生成方式多種多樣，本裝置系統預置支持了有限的幾種典型模式。可以通過歸集擴展模塊來自定義擴展匹配條件及轉換內容規則，提供更加靈活的方式滿足個性化需求。
[0091]C、動態轉換與生成模塊3064的結構如圖7所示，其中:
[0092](I)文檔聲明處理模塊是給瀏覽器提供信息，告訴瀏覽器用「標準模式」渲染頁面。通過「doctype聲明」分組找到相應解析對象，將響應式規則字典集中的對應屬性賦值，如果文檔聲明不存在則添加標準值。
[0093](2)媒體查詢處理模塊可以實現根據設備顯示的特性為其設定顯示樣式。例如，可以僅使用幾行代碼，就可以根據諸如視口寬度、屏幕比例、設備方向(橫向或縱向)等特性來改變頁面內容的顯示方式。通過視口配置表和網頁樣式處理模塊，查詢「Meta元信息」、「Style樣式」分組，可以生成不同視口下連結的樣式文件或者內聯樣式內容。
[0094]媒體查詢目前的效果更像是一個自適應設計，而且過多的樣式會造成頁面加載變慢。因此接下來還需要網頁腳本處理模塊和流式布局轉換模塊來進一步完善。
[0095](3)使用百分比布局創建流動的彈性界面，同時使用媒體查詢來限制元素的變動範圍。將這兩者組合到一起構成了響應式設計的核心。流式布局轉換模塊將遍歷樹形XML文檔對象，將每個解析對象的大小屬性從具體單位(如像素)轉換為相對尺寸。如果是布局轉換為百分比，如果是字體轉換為em測量單位。公式如下:
[0096]目標元素大小+上下文元素大小=百分比(相對尺寸)
[0097]流式布局轉換的整體流程如圖8所示，具體包括:
[0098]步驟802，讀取當前XML文檔對象。
[0099]步驟804，判斷當前XML文檔對象是否為根對象，若是，則執行步驟806，若否，執行步驟808。
[0100]步驟806，默認以100%的百分比布局或Iem處理對象。
[0101]步驟808，獲取父對象信息。
[0102]步驟810，生成當前對象的布局。
[0103]步驟812，判斷XML文檔對象是否為圖片，若是，則執行步驟814;否則，執行步驟816。
[0104]步驟814，設置圖片大小的閾值。
[0105]步驟816,更新當前對象。
[0106]步驟818，判斷是否有下個對象，若是，則執行步驟802，若否，結束。
[0107]經過流式布局轉換模塊的處理，內容已能夠基本自動適應視口的變化，隨著用戶增大或者減小字體，使用流式布局的元素的寬度也會等比例地變化。另外，只需要調整初始化時的基準，其餘部分就會自動地進行調整，而且是按比例調整的。
[0108](4)跨瀏覽器處理模塊是為了解決老版本瀏覽器不支持媒體查詢等新特性，造成顯示錯誤的問題。跨瀏覽器處理模塊還利用膩子腳本(polyfill)來補平老版本瀏覽器的缺陷，使生成的響應式網頁可以在多種設備和瀏覽器下獲得相同的功能。跨瀏覽器處理模塊與網頁腳本處理模塊一起處理相關腳本，通過檢測機制，按需加載響應式網頁所需要的樣式和腳本內容。通過腳本獲取視口實際大小加載樣式，模擬媒體查詢等。
[0109]通過這兩個模塊，可以讓動態生成的網頁可以在不同類型、不用版本的瀏覽器下，對媒體查詢特徵提供支持，並且可以對如媒體查詢的樣式文件，按需加載。
[0110]如:通過定義load方法，對特性進行test檢測，如果滿足條件則加載需要的內容。
[0111](5)通過流式布局轉換模塊，圖片已經隨著流動布局相應縮放。但是圖片尺寸必須比其顯示尺寸更大以保證渲染效果。另外在小設備上顯示大圖片也會帶來性能的問題。為了解決該問題，可以為不同的屏幕尺寸提供不同的圖片，這種解決方案允許基於一組屏幕尺寸斷點，根據用戶需要為其提供不同的圖片。這就需要彈性圖片處理模塊。
[0112]將圖片的來源抽離出來，使用關鍵字代替，再通過腳本統一調用服務端的處理邏輯。傳遞屏幕大小給伺服器，伺服器創建並緩存一張縮放後的圖片。圖片一旦被創建，就會被保存到伺服器指定文件夾中，這樣就不必在第二次用到它們時再次生成了。這裡還有另外一個配置選項可以用來指定瀏覽器可以緩存多久圖片。
[0113]儘管不可能在每一個圖片大小都進行動態縮放給瀏覽器顯示，但是，結合媒體查詢、流式布局，生成某斷點下最接近的尺寸圖片，保證了圖片的清晰度，同時帶來最佳性能。
[0114](6)不是每一次生成都需要用到所有模塊，通過生成配置表可以選擇使用哪些模塊來處理來源文檔。導航處理模塊和結構布局模塊與其他模塊類似處理邏輯，導航處理模塊負責將頁面導航轉換為一個下拉菜單。在視口很小不足以顯示完整導航內容或者顯示體驗不佳時，自動顯示為下拉菜單。結構布局模塊負責將元素類型進行轉換，以符合全新的語義化。本裝置對頁面導航、結構布局預置了固定的轉換類型，可以通過生成擴展模塊，根據實際需求自定義擴展。
[0115]至此，通過以上模塊的一系列處理，我們可以動態的將文檔內容生成為響應式的網頁應用程式。兼顧了可配置、可擴展性。大大提高了前端應用開發效率。
[0116]以上結合附圖詳細說明了本發明的技術方案，由於現有技術中，對於響應式網頁的應用程式的開發技術門檻很高，且對於普通網頁轉換為響應式網頁處理都是在原有網頁的HTML程序之內進行操作的，因而不能實現對多個HTML程序進行統一轉換，導致不能有效率地將大量的普通HTML文件轉換成能夠適應不同終端、不同瀏覽器的響應式網頁。因此，本發明提出了一種動態生成響應式網頁的方案，能夠靈活地對不同屬性、不同類型的XML文檔對象進行不同的處理，進而使之生成的響應式網頁能夠適應具有不同顯示屬性的終端屏幕與瀏覽器，降低了響應式網頁的開發門檻，提高了響應式網頁的開發效率。
[0117]以上所述僅為本發明的優選實施例而已，並不用於限制本發明，對於本領域的技術人員來說，本發明可以有各種更改和變化。凡在本發明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發明的保護範圍之內。
【權利要求】
1.一種動態生成響應式網頁的方法，其特徵在於，包括: 加載HTML文件，對所述HTML文件進行解析，以得到多個XML文檔對象； 根據所述多個XML文檔對象中每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類； 根據特殊對象的匹配方法在所述多個XML文檔對象中匹配所述特殊對象，並將匹配到的所述特殊對象按照類型進行再次分類； 根據所述多個XML文檔對象的分類情況，對每類所述XML文檔對象進行處理，以生成所述響應式網頁。
2.根據權利要求1所述的動態生成響應式網頁的方法，其特徵在於，生成所述響應式網頁的步驟具體為: 針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理，以生成與每個所述終端的顯示屬性相對應的網頁。
3.根據權利要求2所述的動態生成響應式網頁的方法，其特徵在於，針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理的步驟具體為: 根據每個所述終端的屏幕比例和顯示方向，設定對應的網頁內容區域的大小和每類所述XML文檔對象的顯示方式。
4.根據權利要求3所述的動態生成響應式網頁的方法，其特徵在於，對所述HTML文件進行解析，得到的所述多個XML文檔對象的結構為樹形結構； 設定每類所述XML文檔對象的顯示方式的步驟具體為: 根據每個所述終端的屏幕比例和顯示方向，設定所述樹形結構中根節點的顯示尺寸； 根據所述根節點的顯示尺寸，依次遍歷所述多個XML文檔對象，以設置所述多個XML文檔對象中每個XML文檔對象的顯示尺寸。
5.根據權利要求1至4中任一項所述的動態生成響應式網頁的方法，其特徵在於，還包括: 檢測瀏覽器支持的顯示樣式； 根據所述瀏覽器支持的顯示樣式，對所述多個XML文檔對象進行處理，以使處理後的所述多個XML文檔對象的顯示樣式適應於所述瀏覽器支持的顯示樣式。
6.一種動態生成響應式網頁的裝置，其特徵在於，包括: 加載單元，用於加載HTML文件； 解析單元，用於對所述HTML文件進行解析，以得到多個XML文檔對象； 分類單元，用於根據所述多個XML文檔對象中每個XML文檔對象的屬性信息對所述多個XML文檔對象進行分類，並用於根據特殊對象的匹配方法在所述多個XML文檔對象中匹配所述特殊對象，並將匹配到的所述特殊對象按照類型進行再次分類； 處理單元，用於根據所述多個XML文檔對象的分類情況，對每類所述XML文檔對象進行處理，以生成所述響應式網頁。
7.根據權利要求6所述的動態生成響應式網頁的裝置，其特徵在於，所述處理單元具體用於: 針對不同終端的顯示屬性，對每類所述XML文檔對象進行相應的優化處理，以生成與每個所述終端的顯示屬性相對應的網頁。
8.根據權利要求7所述的動態生成響應式網頁的裝置，其特徵在於，所述處理單元具體還用於: 根據每個所述終端的屏幕比例和顯示方向，設定對應的網頁內容區域的大小和每類所述XML文檔對象的顯示方式。
9.根據權利要求8所述的動態生成響應式網頁的裝置，其特徵在於，所述解析單元具體用於，對所述HTML文件進行解析，得到的所述多個XML文檔對象的結構為樹形結構； 所述處理單元具體還用於，根據每個所述終端的屏幕比例和顯示方向，設定所述樹形結構中根節點的顯示尺寸，並用於根據所述根節點的顯示尺寸，依次遍歷所述多個XML文檔對象，以設置所述多個XML文檔對象中每個XML文檔對象的顯示尺寸。
10.根據權利要求6至9中任一項所述的動態生成響應式網頁的裝置，其特徵在於，還包括: 檢測單元，用於檢測瀏覽器支持的顯示樣式； 所述處理單元具體還用於，根據所述瀏覽器支持的顯示樣式，對所述多個XML文檔對象進行處理，以使處理後的所述多個XML文檔對象的顯示樣式適應於所述瀏覽器支持的顯示樣式。
【文檔編號】G06F9/44GK104267941SQ201410479018
【公開日】2015年1月7日 申請日期:2014年9月18日 優先權日:2014年9月18日
【發明者】包文哲 申請人:用友優普信息技術有限公司