[發(fā)明專利]一種在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的方法及系統(tǒng)

在審

• 申請?zhí)枺?/td>: 202010832448.5
• 申請日: 2020-08-18
• 公開（公告）號: CN112100555A
• 公開（公告）日: 2020-12-18
• 發(fā)明（設(shè)計）人: 高樂樂
• 申請（專利權(quán)）人: 北京思特奇信息技術(shù)股份有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958
• 代理公司: 北京匯信合知識產(chǎn)權(quán)代理有限公司 11335
• 代理人: 林聰源

本發(fā)明公開了一種在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的方法，將跳轉(zhuǎn)的頁面通過組件頁面的方法實現(xiàn)，實現(xiàn)方法如下：在HTML5頁面中引入js；當(dāng)HTML5頁面流程執(zhí)行到需要跳轉(zhuǎn)頁面時，通過require按需加載組件頁面。HTML5頁面在通過require按需加載組件頁面的同時調(diào)用組件頁面的初始化函數(shù)。在調(diào)用組件頁面的初始化函數(shù)時，組件中隱藏原HTML5頁面全部元素并展示組件頁面元素。通過將頁面的跳轉(zhuǎn)改為組件頁面的方法，避免了移動端頁面跳轉(zhuǎn)時需要對主頁面數(shù)據(jù)進(jìn)行緩存及跳轉(zhuǎn)回主界面時需要重新顯示的問題，降低了系統(tǒng)運(yùn)行故障率同時減少了代碼重復(fù)率，提高了系統(tǒng)開發(fā)質(zhì)量和速度。

技術(shù)領(lǐng)域

本發(fā)明涉及頁面調(diào)度技術(shù)領(lǐng)域，具體涉及一種在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的方法及系統(tǒng)。

背景技術(shù)

前端HTML5頁面開發(fā)技術(shù)發(fā)展飛快，各種框架技術(shù)爭奇斗艷，雖然新的框架有極大技術(shù)優(yōu)勢，但開發(fā)學(xué)習(xí)成本較高，又或者正在線上運(yùn)行中的老工程無法改造支持新的框架。在一些多步驟操作交互頁面中，通過頁面跳轉(zhuǎn)的方式實現(xiàn)多個頁面之間的切換，此時頁面之間傳遞參數(shù)較為繁瑣且容易出錯，隨之出現(xiàn)一系列通過url傳參、緩存?zhèn)鲄⒌仍斐傻臄?shù)據(jù)丟失、數(shù)據(jù)未清除等問題，而此現(xiàn)象在移動端的原生HTML5頁面中更為嚴(yán)重。所以需要提供一種新的技術(shù)思路，解決原生HTML5頁面的參數(shù)傳遞問題或頁面跳轉(zhuǎn)問題。

發(fā)明內(nèi)容

針對當(dāng)前原生HTML5頁面的參數(shù)傳遞問題或頁面跳轉(zhuǎn)問題，本發(fā)明提供一種在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的方法及系統(tǒng)。

本發(fā)明公開了一種在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的方法，將跳轉(zhuǎn)的頁面通過組件頁面的方法實現(xiàn)，實現(xiàn)方法如下：

在HTML5頁面中引入js；

當(dāng)HTML5頁面流程執(zhí)行到需要跳轉(zhuǎn)頁面時，通過require按需加載組件頁面。

優(yōu)選地，上述HTML5頁面在通過require按需加載組件頁面的同時調(diào)用組件頁面的初始化函數(shù)。

優(yōu)選地，上述在調(diào)用組件頁面的初始化函數(shù)時，組件中隱藏原HTML5頁面全部元素并展示組件頁面元素。

優(yōu)選地，上述方法在應(yīng)用于身份證上傳場景時，原HTML5頁面通過require加載組件頁面的客戶信息錄入的組件。

優(yōu)選地，上述客戶信息錄入組件的建立過程如下：

步驟一：聲明一個全局函數(shù)init(param,pFn)，其中：init為全局函數(shù)的名稱、param為傳遞的數(shù)據(jù)、pFn為組件執(zhí)行結(jié)束后的回調(diào)函數(shù)；

步驟二：創(chuàng)建一個jquery的div元素，并將div元素設(shè)置為隱藏，將當(dāng)前頁面標(biāo)簽下的所有元素移動到div元素下；

步驟三：創(chuàng)建要彈出顯示的頁面元素，即創(chuàng)建客戶信息錄入頁面元素，動態(tài)添加到當(dāng)前頁面標(biāo)簽節(jié)點下，并設(shè)置客戶信息錄入頁面元素為顯示，同時綁定事件到需要的元素上；

步驟四：客戶信息錄入頁面在操作完畢需返回上一頁面時，銷毀創(chuàng)建的本客戶信息錄入頁面元素，并將div元素全部移出，同時將之前備份的返回鍵事件函數(shù)做還原。

優(yōu)選地，上述步驟三中創(chuàng)建要彈出顯示的頁面元素，如在移動端，需要響應(yīng)手機(jī)的返回鍵事件，還需將原頁面的時間函數(shù)做備份，覆蓋彈出的顯示頁面元素中的時間，實現(xiàn)原頁面與彈出顯示頁面時間一致。

一種在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的系統(tǒng)，至少包括一臺連接了互聯(lián)網(wǎng)或者局域網(wǎng)系統(tǒng)的計算機(jī)，所述計算機(jī)內(nèi)至少包括存儲器、處理器、顯示器以及網(wǎng)卡，所述存儲器中儲存有上述在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的方法或?qū)崿F(xiàn)該方法的程序；所述處理器運(yùn)行上述在原生HTML5頁面中實現(xiàn)單頁應(yīng)用的方法的可執(zhí)行程序；所述顯示器顯示頁面運(yùn)行過程。

與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果為：