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

有效

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

本發明提供了一種基于HTML5的界面交互及展示系統、方法，該系統包括控件初始化模塊等，所述控件初始化模塊負責初始化控件，將頁面div初始化為一個2乘以2的二維頁面，并且給出配置入口，由用戶定義頁面之間的交互方式，并且生成配置文件保存；所述事件接收模塊負責接收用戶的操作事件，將相關的事件發送到數據處理模塊；所述數據處理模塊負責處理接收到的事件，將相應的頁面元素放入二維布局的div中；所述緩存模塊負責將已經展示過得頁面元素及內容保存在本地客戶端。本發明擺脫單一的操作方式，大大增強了Web的界面交互的用戶體驗。

技術領域

本發明涉及一種界面交互及展示系統、方法，具體地，涉及一種基于HTML5的界面交互及展示系統、方法。

背景技術

隨著互聯網的飛速發展，瀏覽器不再僅僅用來表示Web內容，隨著HTML5的技術問世，Web進入了一個成熟的應用平臺，在HTML5平臺上，視頻、音頻、圖像、動畫以及交互都被標準化。HTML5可以讓你擺脫對平臺的依賴，用戶打開瀏覽器，直接就可以訪問你的應用，HTML5可以做到跨平臺，多數核心代碼不用重寫，在許多地方都可以用到，包括移動應用、移動網站、PC網站、各種瀏覽器插件，甚至可以用WebKit封裝作為跨平臺的應用程序。對于用戶來說，提高了用戶體驗，加強了視覺感受，HTML5技術在移動端，能夠讓應用程序回歸到網頁，并對網頁的功能進行擴展，用戶不需要下載客戶端或插件就能夠觀看視頻、玩游戲，操作更加簡單，用戶體驗更好。如今已進入后Web2.0時代，人機交互已經成為常態，不能滿足于網頁上簡單的圖片和文字展示，用戶更希望能有更加豐富的界面交互方式。因此，為了迎合互聯網技術的發展，本發明研發一種基于HTML5的界面交互技術及展示方法，由于HTML5的跨平臺、跨終端的特性，也使該界面交互及展示方法具備了跨平臺、跨終端的特性，并提供了適用于鼠標操作或適用于觸摸屏操作的兩種用戶操作習慣，擺脫單一的操作方式，大大增強了Web的界面交互的用戶體驗。

發明內容

針對現有技術中的缺陷，本發明的目的是提供一種基于HTML5的界面交互及展示系統、方法，其由于HTML5的跨平臺、跨終端的特性，也使該界面交互及展示方法具備了跨平臺、跨終端的特性，并提供了適用于鼠標操作或適用于觸摸屏操作的兩種用戶操作習慣，擺脫單一的操作方式，大大增強了Web的界面交互的用戶體驗。

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

優選地，所述二維頁面在一個HTML5內容中做到上下與左右滑動自由切換，用戶隨意的定義交互方式，擺脫單一的模式。

優選地，所述事件接收模塊接收會時刻監聽用戶操作行為，當用戶在電腦或者移動終端上做了交互行為，事件接收模塊會立刻接收到交互事件，同時會將用戶交互時滑動的距離與速度記錄下來形成相關數據，并且將該交互事件相關信息傳遞給數據處理模塊。

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

本發明還提供一種基于HTML5的界面交互及展示方法，其特征在于，包括以下步驟：