本發(fā)明屬于前端開發(fā)數(shù)據(jù)處理，具體涉及一種層級化配置h5頁面的方法和裝置。

背景技術(shù)：

1、針將h5頁面的開發(fā)，以往的傳統(tǒng)方案是：

2、首先，由ui設(shè)計師根據(jù)業(yè)務(wù)人員的需求及不同的宣傳、活動及營銷方案，對不同的h5頁面進行定制化的設(shè)計。其次，前端和后端開發(fā)工程師根據(jù)ui設(shè)計圖分別對每一個h5頁面進行前端頁面和后端接口開發(fā)。

3、發(fā)明人在開發(fā)設(shè)計h5頁面的過程中發(fā)現(xiàn)，以往的傳統(tǒng)方案至少存在如下缺點或現(xiàn)狀：

4、1)重復(fù)開發(fā)不同的定制化h5頁面。這些頁面的組成、樣式等變化較小，整體相差不大，對每一個新增的h5頁面都進行設(shè)計與開發(fā)，存在大量重復(fù)、繁瑣的工作，會拉長迭代和上線時間，加大時間成本，同時會增加設(shè)計和開發(fā)人員的工作量，加大人力成本。2)頁面層級不夠明顯，不利于用戶操作的先后順序；修改頁面時對整體布局影響較大，可拓展性、靈活性較差，層級間相對一致性不高。3)不具備便捷式一鍵生成h5頁面的功能，對用戶的操作流程沒有指引。4)此外，目前的h5頁面大多是單頁面形式，沒有進行頁面的框架層級劃分，看到的頁面都是扁平化的，單純的頁面信息層級展示，只能保證用戶閱讀和接收信息的順序，在視覺內(nèi)容層面進行設(shè)置，而忽視了開發(fā)產(chǎn)品過程中的交互框架層面，忽視了用戶操作的順暢性和確定性。

技術(shù)實現(xiàn)思路

1、基于上述說明，本發(fā)明實施例提供了一種層級化配置h5頁面的方法和裝置。

2、依據(jù)本發(fā)明的第一方面，提供的層級化配置h5頁面的方法，包括如下步驟：

3、將h5頁面的內(nèi)容進行解構(gòu)，由低到高劃分為模塊、組件和模板三個內(nèi)容層級；其中，模塊為h5頁面展示的最小單位，組件為編輯器配置的最小單位，組件由模塊構(gòu)成，模板由組件構(gòu)成；

4、將h5頁面根據(jù)不同功能和操作區(qū)域進行分層，由上至下劃分為遮罩層、全局層、內(nèi)容層和背景層四個框架層級；其中背景層和全局層用于配置全局屬性，內(nèi)容層用于配置組件，遮罩層用于配置信息確認和組件展示；

5、配置h5頁面時，在web配置端的可視化編輯器對h5頁面的內(nèi)容層配置組件，設(shè)置組件內(nèi)各模塊的屬性及內(nèi)容，所有配置信息同步存儲在臨時存儲器中，由處理器處理所述配置信息在web配置端的內(nèi)嵌h5頁面上進行效果的實時動態(tài)展示；整個h5頁面配置完成后，完整的頁面布局信息存進固定存儲器，展示時由處理器根據(jù)所述頁面布局信息動態(tài)加載組件，渲染成定制化h5頁面展示在客戶端。

6、依據(jù)本發(fā)明的第二方面，提供的層級化配置h5頁面的裝置，包括：

7、內(nèi)容解構(gòu)單元，用于將h5頁面的內(nèi)容進行解構(gòu)，由低到高劃分為模塊、組件和模板三個內(nèi)容層級；其中，模塊為h5頁面展示的最小單位，組件為編輯器配置的最小單位，組件由模塊構(gòu)成，模板由組件構(gòu)成；

8、框架分層單元，用于將h5頁面根據(jù)不同功能和操作區(qū)域進行分層，由上至下劃分為遮罩層、全局層、內(nèi)容層和背景層四個框架層級；其中背景層和全局層用于配置全局屬性，內(nèi)容層用于配置組件，遮罩層用于配置信息確認和組件展示；

9、可視化配置單元，用于配置h5頁面時，在web配置端的可視化編輯器中對h5頁面的內(nèi)容層配置組件，設(shè)置組件內(nèi)各模塊的屬性及內(nèi)容，所有配置信息同步存儲在臨時存儲器中，由處理器處理所述配置信息在web配置端的內(nèi)嵌h5頁面上進行效果的實時動態(tài)展示；整個h5頁面配置完成后，完整的頁面布局信息存進固定存儲器，展示時由處理器根據(jù)所述頁面布局信息動態(tài)加載組件，渲染成定制化h5頁面展示在客戶端。

10、本發(fā)明實施例的優(yōu)點及有益效果是：

11、本發(fā)明實施例提供的層級化配置h5頁面的方法和裝置，通過將h5頁面的內(nèi)容進行解構(gòu)，由低到高劃分為模塊、組件和模板三個內(nèi)容層級，能夠適配不同風(fēng)格的ui設(shè)計方案，滿足不同的定制化需求，避免了大量重復(fù)、繁瑣的工作；通過將h5頁面根據(jù)不同功能和操作區(qū)域進行分層，由上至下劃分為遮罩層、全局層、內(nèi)容層和背景層四個框架層級，大大提升了頁面的拓展性，增加了頁面的縱向深度，可實現(xiàn)多樣化需求的全覆蓋，同時各框架層級緊密聯(lián)系，在邏輯層面完善了可視化h5頁面配置實際使用時的合理性；而且通過對h5頁面進行內(nèi)容層級和框架層級劃分，能夠使頁面結(jié)構(gòu)清晰、職責(zé)邊界明確，而具體邏輯代碼中表現(xiàn)為抽取公共邏輯，合理封裝，能夠簡化代碼，提高配置效率，方便用戶進一步通過模板或者通過對頁面框架層級的初始設(shè)置，實現(xiàn)智能化一鍵生成h5頁面；在手動配置h5頁面時，通過在web配置端的可視化編輯器中對h5頁面的內(nèi)容層配置組件，對組件進行添加、編輯、刪除、移動等操作，設(shè)置組件內(nèi)各模塊的屬性及內(nèi)容，整個配置過程中做到了可視化，可以幫助用戶簡便、高效的完成定制化h5頁面配置。

技術(shù)特征：

1.一種層級化配置h5頁面的方法，其特征在于，包括：

2.根據(jù)權(quán)利要求1所述的方法，其特征在于，還包括：將h5頁面進行級聯(lián)式布局，其中一級頁面有且唯一，二級或更低一級頁面根據(jù)需求選擇是否配置，配置時通過將低一級頁面關(guān)聯(lián)到上一級頁面中的組件的模塊上，點擊模塊即可跳轉(zhuǎn)到相應(yīng)的低一級頁面。

3.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，還包括：對各個組件賦予動態(tài)優(yōu)先級，所述優(yōu)先級的計算方法如下：

4.根據(jù)權(quán)利要求3所述的方法，其特征在于，還包括：根據(jù)模板一鍵生成h5頁面，或者根據(jù)定制化配置需求確定出h5頁面的關(guān)鍵要素，根據(jù)關(guān)鍵要素生成最佳模塊個數(shù)、組件個數(shù)和頁面高度，對各個組件計算優(yōu)先級，根據(jù)各個組件的優(yōu)先級進行智能化排版，一鍵生成h5頁面。

5.根據(jù)權(quán)利要求3所述的方法，其特征在于，還包括：

6.一種層級化配置h5頁面的裝置，其特征在于，包括：

7.根據(jù)權(quán)利要求6所述的裝置，其特征在于，還包括：

8.根據(jù)權(quán)利要求6或7所述的裝置，其特征在于，還包括：

9.根據(jù)權(quán)利要求8所述的裝置，其特征在于，還包括：

10.根據(jù)權(quán)利要求8所述的裝置，其特征在于，還包括：

技術(shù)總結(jié)
本發(fā)明公開了一種層級化配置H5頁面的方法和裝置。其方法包括：將H5頁面的內(nèi)容進行解構(gòu)，由低到高劃分為模塊、組件和模板三個內(nèi)容層級；將H5頁面根據(jù)不同功能和操作區(qū)域進行分層，由上至下劃分為遮罩層、全局層、內(nèi)容層和背景層四個框架層級；配置H5頁面時，在Web配置端的可視化編輯器中對H5頁面的內(nèi)容層配置組件，設(shè)置組件內(nèi)各模塊的屬性及內(nèi)容，所有配置信息同步存儲在臨時存儲器中，由處理器處理后實時動態(tài)展示在內(nèi)嵌H5頁面上；整個H5頁面配置完成后，完整的頁面布局信息存進固定存儲器，展示時由處理器動態(tài)加載組件，渲染成客戶端的定制化H5頁面。采用本發(fā)明方案可使頁面結(jié)構(gòu)清晰、職責(zé)邊界明確，提高配置效率，實現(xiàn)智能化一鍵生成H5頁面。

技術(shù)研發(fā)人員：蘇皓然,王發(fā)明,張小菲,王坤鋒,施妍萍
受保護的技術(shù)使用者：中國郵政儲蓄銀行股份有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/9/17