一種跨平臺頁面渲染系統技術方案

本發明專利技術提供一種跨平臺頁面渲染系統

【技術實現步驟摘要】
一種跨平臺頁面渲染系統、電子設備及存儲介質


[0001]本專利技術屬于互聯網領域，尤其涉及一種跨平臺頁面渲染系統
、
電子設備及存儲介質
。

技術介紹

[0002]傳統頁面開發流程是：運營人員提出需求
?
>
產品整理補充需求
?
>UI
設計師出設計圖
?
>
前端開發進行編碼
?
>
測試工程師進行測試
?
>
服務端部署
。
[0003]在這種開發流程下：做一個多平臺（例如：
H5
頁面
、
微信小程序和百度小程序）的活動頁面是需要針對多個平臺做重復的頁面開發，效率非常低
。

技術實現思路

[0004]為解決上述技術問題，本專利技術提出一種跨平臺頁面渲染系統
、
電子設備及存儲介質的技術方案
。
[0005]本專利技術第一方面公開了一種跨平臺頁面渲染系統，所述系統包括：頁面可視化編輯工具
、
存儲介質
、
通用解析器和渲染器；通過點擊或拖拽頁面可視化編輯工具內的預設組件模塊和頁面布局模塊，在設計器的頁面布局或自定義布局生成組件的預覽態，再通過拖拽頁面可視化編輯工具內的屬性編輯模塊對所述組件的屬性
、
事件和樣式進行修改并生成最終的頁面結構化數據；將所述頁面結構化數據存儲到存儲介質，移動端再向后臺請求數據后，經過所述通用解析器處理后再由各個平臺的渲染器動態渲染頁面
。
[0006]根據本專利技術第一方面的系統，所述通過點擊或拖拽頁面可視化編輯工具內的預設組件模塊和頁面布局模塊，在設計器的頁面布局或自定義布局生成組件的預覽態的方法包括：通過點擊或拖拽所述預設組件模塊觸發全局事件攔截分發器對事件進行解析后，得到要生成的組件類型和組件的預設數據；然后通過數據狀態管理器提供的插入數據方法在頁面級數據結構下的
components
的數組內插入組件的預設數據結構；所述頁面布局模塊會監聽到所述預設數據結構的變化后，遍歷頁面級數據結構下
components
數組所在的頁面布局或自定義布局后生成組件的預覽態，完成對頁面預覽態的展示
。
[0007]根據本專利技術第一方面的系統，所述對所述組件的屬性
、
事件和樣式進行修改的方法包括：通過屬性編輯模塊的內容設置模塊設置組件自定義的數據字段；通過屬性編輯模塊的樣式設置模塊設置組件
CSS
樣式的屬性；通過屬性編輯模塊的事件設置模塊設置組件行為動作事件
。
[0008]根據本專利技術第一方面的系統，所述頁面結構化數據的數據結構為：
頁面結構化數據的數據結構定義相當于樹狀結構的根節點；數據結構中定義的
components
數組為存放布局組件與基礎組件的數據結構，布局組件也存放基礎組件的數據結構，并形成一個樹狀結構；數據結構中定義的
config
是組件內容設置數據存儲對象；數據結構中定義的
style
是標準的
CSS
樣式的規范；數據結構中定義的
global
是頁面的全局變量
。
[0009]根據本專利技術第一方面的系統，所述通用解析器由獨立一段
javascript
腳本編寫，能夠在所有支持運行
javascript
的環境進行使用
。
[0010]根據本專利技術第一方面的系統，每個組件都設有獨立的
Parse
類，且都繼承于基礎類
BaseParse
；所述通用解析器解析頁面結構化數據中的
CSS
樣式，進行
CSS
樣式的屬性的單位換算，轉換為字符串類型的格式進行平臺適配；所述通用解析器將模版語法中的變量替換成全局變量的值，實現動態數據渲染
。
[0011]根據本專利技術第一方面的系統，所述渲染器預設布局組件和基礎組件的組件庫并實現與頁面可視化編輯工具的組件的預覽態效果一致；所述渲染器的遞歸循環頁面數據結構，根據組件類型創建組件庫內對應組件的實例掛載到容器上實現組件的渲染展示
。
[0012]根據本專利技術第一方面的系統，所述渲染器的全局
context
內置
API
請求方法
、triggerAction
觸發行為事件方法和
Provider。
[0013]本專利技術第二方面提供了一種電子設備，所述設備包括存儲器和處理器，所述存儲器上存儲有計算機程序，該計算機程序被所述處理器執行時，執行如本專利技術第一方面所述的一種跨平臺頁面渲染系統中的方法
。
[0014]本專利技術第三方面提供了一種存儲介質，該存儲介質存儲的計算機程序，能夠被一個或多個處理器執行，能夠用來實現如本專利技術第一方面所述的一種跨平臺頁面渲染系統中的方法
。
[0015]綜上，本專利技術提出的方案只需要實現對應平臺的渲染器部分即可實現跨平臺頁面的動態渲染，減少了重復開發的工作，提升了工作效率
。
附圖說明
[0016]為了更清楚地說明本專利技術具體實施方式或現有技術中的技術方案，下面將對具體實施方式或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖是本專利技術的一些實施方式，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他的附圖
。
[0017]圖1為根據本專利技術實施例的一種跨平臺頁面渲染系統的結構圖；圖2為根據本專利技術實施例的頁面可視化編輯工具的結構圖；圖3為根據本專利技術實施例的數據結構示意圖；圖4為根據本專利技術實施例的一種電子設備的結構圖
。
具體實施方式
[0018]為使本專利技術實施例的目的
、
技術方案和優點更加清楚，下面將結合本專利技術實施例中的附圖，對本專利技術實施例中的技術方案進行清楚
、
完整地描述，顯然，所描述的實施例只是本專利技術一部分實施例，而不是全部的實施例
。
基于本專利技術中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都屬于本專利技術保護的范圍
。
[0019]本專利技術第一方面公開了一種跨平臺頁面渲染系統，圖1為根據本專利技術實施例的一種跨平臺頁面渲染系統的結構圖，具體如圖1所示，所述系統包括：頁面可視化編輯工具
、
存儲介質
、
通用解析器和渲染器；通過點擊或拖拽頁面可視化編輯工具內的預設組件模塊和頁面布局模塊，在設計器的頁面布局或自定義布局生成組件的預覽態，再通過拖拽頁面可視化編輯工具內的屬性編輯模塊對所述組件的屬性
、
事件和樣式進行修改本文檔來自技高網...

【技術保護點】

【技術特征摘要】
1.
一種跨平臺頁面渲染系統，其特征在于，所述系統包括：頁面可視化編輯工具
、
存儲介質
、
通用解析器和渲染器；通過點擊或拖拽頁面可視化編輯工具內的預設組件模塊和頁面布局模塊，在設計器的頁面布局或自定義布局生成組件的預覽態，再通過拖拽頁面可視化編輯工具內的屬性編輯模塊對所述組件的屬性
、
事件和樣式進行修改并生成最終的頁面結構化數據；將所述頁面結構化數據存儲到存儲介質，移動端再向后臺請求數據后，經過所述通用解析器處理后再由各個平臺的渲染器動態渲染頁面
。2.
根據權利要求1所述的一種跨平臺頁面渲染系統，其特征在于，所述通過點擊或拖拽頁面可視化編輯工具內的預設組件模塊和頁面布局模塊，在設計器的頁面布局或自定義布局生成組件的預覽態的方法包括：通過點擊或拖拽所述預設組件模塊觸發全局事件攔截分發器對事件進行解析后，得到要生成的組件類型和組件的預設數據；然后通過數據狀態管理器提供的插入數據方法在頁面級數據結構下的
components
的數組內插入組件的預設數據結構；所述頁面布局模塊在監聽到所述預設數據結構的變化后，遍歷頁面級數據結構下
components
數組所在的頁面布局或自定義布局后生成組件的預覽態，完成對頁面預覽態的展示
。3.
根據權利要求2所述的一種跨平臺頁面渲染系統，其特征在于，所述對所述組件的屬性
、
事件和樣式進行修改的方法包括：通過屬性編輯模塊的內容設置模塊設置組件自定義的數據字段；通過屬性編輯模塊的樣式設置模塊設置組件
CSS
樣式的屬性；通過屬性編輯模塊的事件設置模塊設置組件行為動作事件
。4.
根據權利要求1所述的一種跨平臺頁面渲染系統，其特征在于，所述頁面結構化數據的數據結構為：頁面結構化數據的數據結構定義為樹狀結構的根節點；數據結構中定義的
components
數組是存放布局組件與基礎組件的數據結構，并形成一個樹狀結構；數據結構中定義的

【專利技術屬性】
技術研發人員：張嘉文，鄭輝，
申請(專利權)人：北京紛揚科技有限責任公司，
類型：發明
國別省市：