[發明專利]基于HTML5的界面交互及展示系統、方法

有效

• 申請號: 201710719256.1
• 申請日: 2017-08-21
• 公開（公告）號: CN107643911B
• 公開（公告）日: 2021-02-02
• 發明（設計）人: 覃云川;吳明致;吳畏;黃江;劉天旸
• 申請（專利權）人: 上海精靈天下數字技術有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F3/0481
• 代理公司: 上海漢聲知識產權代理有限公司 31236
• 代理人: 郭國中

1.一種基于HTML5的界面交互及展示系統，其特征在于，包括控件初始化模塊、事件接收模塊、數據處理模塊、緩存模塊、API接口模塊、渲染模塊、展示模塊，所述控件初始化模塊負責初始化控件，將頁面div初始化為一個2乘以2的二維頁面，并且給出配置入口，由用戶定義頁面之間的交互方式，并且生成配置文件保存；所述事件接收模塊負責接收用戶的操作事件，將相關的事件發送到數據處理模塊；所述數據處理模塊負責處理接收到的事件，將相應的頁面元素放入二維布局的div中；所述緩存模塊負責將已經展示過得頁面元素及內容保存在本地客戶端，所述API接口模塊用于于數據庫對接，提取所需頁面元素；所述渲染模塊負責將頁面元素進行渲染，達到用戶需要的視覺效果；所述展示模塊負責將完整的HTML5內容展示給用戶；

所述數據處理模塊接收到交互事件相關信息之后，會判斷交互事件的方向，分為四種情況：

一，如果交互是向上滑動，會將即將展示的頁面元素填充在2乘以2頁面div中的左上角div中，并且將展示頁面的下一頁元素填充在左下角div中，因為右上角與右下角內容與交互內容無關，所以不做任何操作；

二，如果交互是向下滑動，會將即將展示的頁面元素填充在2乘以2頁面div中的左下角div中，并且將展示頁面的下一頁元素填充在左上角div中，因為右上角與右下角內容與交互內容無關，所以不做任何操作；

三，如果交互是向左滑動，會將即將展示的頁面元素填充在2乘以2頁面div中的左上角div中，并且將展示頁面的下一頁元素填充在右上角div中，因為左下角與右下角內容與交互內容無關，所以不做任何操作；

四，如果交互是向右滑動，會將即將展示的頁面元素填充在2乘以2頁面div中的右上角div中，并且將展示頁面的下一頁元素填充在左上角div中，因為左下角與右下角內容與交互內容無關，所以不做任何操作；

數據處理模塊會按照順序給每一個頁面都加上自定義的ID號作為頁面唯一標識，如果即將展示的內容是緩存模塊中不存在的，會通過所述API接口模塊向數據庫提取相關元素，并且將相關頁面元素及內容放入所述緩存模塊中，避免重復讀取數據庫造成資源浪費。

2.根據權利要求1所述的基于HTML5的界面交互及展示系統，其特征在于，所述二維頁面在一個HTML5內容中做到上下與左右滑動自由切換，用戶隨意的定義交互方式，擺脫單一的模式。

3.根據權利要求1所述的基于HTML5的界面交互及展示系統，其特征在于，所述事件接收模塊接收會時刻監聽用戶操作行為，當用戶在電腦或者移動終端上做了交互行為，事件接收模塊會立刻接收到交互事件，同時會將用戶交互時滑動的距離與速度記錄下來形成相關數據，并且將該交互事件相關信息傳遞給數據處理模塊。

4.一種基于HTML5的界面交互及展示方法，其特征在于，運用權利要求1-3任一權利要求所述的基于HTML5的界面交互及展示系統執行如下步驟：

步驟一：控件初始化模塊初始化二維頁面，讀取制作內容時用戶定義的頁面交互配置文件，并且首頁內容加載完成；通過API接口模塊將首頁展示的內容從數據庫中提取出來，通過數據處理模塊填充進入左上角的頁面div中，并且根據載入的配置文件，將與首頁相關的其他頁面內容填入相應的二維頁面div中；

步驟二：事件接收模塊一直在監聽用戶行為，當用戶通過設備進行操作，事件接收模塊接收用戶操作事件傳遞給數據處理模塊；

步驟三：數據處理模塊收到用戶操作事件，根據交互方式，向API接口模塊申請頁面元素，API接口模塊根據要求從數據庫提取相關頁面元素傳遞給數據處理模塊，數據處理模塊向二維頁面div填充相關頁面元素；

步驟四：頁面元素填充結束后，渲染模塊對二維頁面進行渲染；

步驟五：渲染結束后，展示模塊將用戶操作之后的頁面展現出來。

5.根據權利要求4所述的基于HTML5的界面交互及展示方法，其特征在于，所述步驟三中，數據處理模塊需要通過頁面ID向緩存模塊獲取填充的頁面元素及內容是否已經存在，如果存在，則直接從緩存模塊中提取，如果不存在，則通過API接口模塊通過數據庫提取數據。