[發(fā)明專利]一種基于移動終端的webview的跨平臺圖片緩存實現(xiàn)方法

在審

• 申請?zhí)枺?/td>: 201710676465.2
• 申請日: 2017-08-09
• 公開（公告）號: CN107291519A
• 公開（公告）日: 2017-10-24
• 發(fā)明（設(shè)計）人: 廖金
• 申請（專利權(quán)）人: 四川長虹電器股份有限公司
• 主分類號: G06F9/445
• 分類號: G06F9/445;G06F17/30
• 代理公司: 四川省成都市天策商標(biāo)專利事務(wù)所51213
• 代理人: 秦華云,劉渝

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

本發(fā)明涉及技術(shù)圖片緩存領(lǐng)域，特別涉及一種基于移動終端的webview的跨平臺圖片緩存實現(xiàn)方法。

背景技術(shù)

近年來，隨著移動終端領(lǐng)域的快速發(fā)展以及企業(yè)對app產(chǎn)品開發(fā)速度及迭代速度的高要求，基于html5的混合開發(fā)模式嫣然成為各大企業(yè)重點研究及發(fā)展方向，目前包括手機(jī)淘寶、京東、支付寶、攜程等各類主流app都不同程度的采用了混合開發(fā)模式。而html5頁面的圖片加載及緩存一直是混合開發(fā)模式下的疑難點。

傳統(tǒng)跨平臺混合開發(fā)模式下的html5頁面顯示圖片時，每次都需加載網(wǎng)絡(luò)地址圖片，這樣每次大量網(wǎng)絡(luò)圖片請求極易造成頁面負(fù)擔(dān)過重，導(dǎo)致頁面加載性能差，且圖片量大網(wǎng)速慢的條件下也容易使頁面圖片遲遲加載不全，造成極差的用戶體驗。因此解決跨平臺圖片緩存問題對于app用戶體驗及頁面性能的提升已顯得格外重要。

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

本發(fā)明的目的是克服上述背景技術(shù)中不足，提供一種基于移動終端的webview的跨平臺圖片緩存實現(xiàn)方法，解決了移動端跨平臺開發(fā)的圖片緩存問題。

為了達(dá)到上述的技術(shù)效果，本發(fā)明采取以下技術(shù)方案：

一種基于移動終端的webview的跨平臺圖片緩存實現(xiàn)方法，包括以下步驟：

A.用戶通過移動終端的webview發(fā)出加載相應(yīng)html5頁面的加載請求，其中，webview是跨平臺混合開發(fā)模式下用于加載顯示相應(yīng)html5頁面的原生控件，html5頁面為本地靜態(tài)資源或網(wǎng)絡(luò)服務(wù)頁面；

B.html5頁面的業(yè)務(wù)邏輯單元獲取所述加載請求中的數(shù)據(jù)信息，同時通過img標(biāo)簽加載相應(yīng)網(wǎng)絡(luò)圖片地址；

C.移動終端的webview攔截當(dāng)前html5頁面所述加載請求；

D.移動終端的webview獲取攔截到加載請求中的網(wǎng)絡(luò)圖片地址，并根據(jù)獲取到的網(wǎng)絡(luò)圖片地址生成基于預(yù)設(shè)算法得到的具有算法值的圖片文件名，其中，該具有算法值的圖片文件名為用于后續(xù)緩存成圖片的文件名及用于查找對比的圖片文件名；

E.移動終端的webview參照得到的所述具有算法值的圖片文件名，對移動終端的本地圖片緩存目錄進(jìn)行檢索，判斷是否存在相同的所述具有算法值的圖片文件名的圖片；

F.若判斷存在相同的所述具有算法值的圖片文件名的圖片則進(jìn)入步驟G，否則進(jìn)入步驟H；

G.移動終端的webview撤回步驟C中攔截的所述加載請求，停止請求網(wǎng)絡(luò)圖片資源，獲取步驟D中生成的所述具有算法值的圖片文件名的本地地址路徑，html5頁面的對應(yīng)img標(biāo)簽顯示根據(jù)該本地地址路徑獲取的本地緩存圖片；

H.移動終端的webview撤銷對步驟C中的所述加載請求的攔截，并繼續(xù)請求對應(yīng)的網(wǎng)絡(luò)圖片資源，再通過html頁面對應(yīng)img標(biāo)簽顯示請求到的網(wǎng)絡(luò)圖片資源；移動終端的webview將請求到的圖片資源緩存到移動終端中所述本地圖片緩存目錄，并以步驟E中得到的所述具有算法值的圖片文件名對該圖片資源命名。

進(jìn)一步地，所述步驟C中移動終端的webview攔截當(dāng)前html5頁面的所述加載請求時，僅攔截html5頁面的img標(biāo)簽的圖片加載請求。

進(jìn)一步地，所述步驟C中移動終端的webview攔截當(dāng)前html5頁面的所述加載請求時，具體包括以下步驟：

C1.移動終端的webview攔截當(dāng)前html5頁面的所有網(wǎng)絡(luò)請求；

C2.移動終端的webview對攔截的所有網(wǎng)絡(luò)請求進(jìn)行過濾篩選，僅保留對圖片加載請求的攔截撤銷對其余請求的攔截。

進(jìn)一步地，所述步驟D中，所述預(yù)設(shè)算法為md5算法，所述具有算法值的圖片文件名為md5值圖片文件名，實際中也可選用其他合適的算法并生成該算法值的圖片文件名，只要滿足便于后續(xù)緩存成圖片到本地時的圖片命名及后續(xù)的對比查找即可，其中，md5算法為一種消息摘要算法。

進(jìn)一步地，所述移動終端為嵌有Android系統(tǒng)和/或IOS系統(tǒng)的移動終端，該基于移動終端跨平臺的圖片緩存實現(xiàn)方法可同時滿足操作系統(tǒng)為Android系統(tǒng)的移動終端和操作系統(tǒng)為IOS系統(tǒng)的移動終端的使用。

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

本發(fā)明的一種基于移動終端的webview的跨平臺圖片緩存實現(xiàn)方法在用戶有圖片加載需求時，通過對該需求中包含的圖片信息進(jìn)行分析，以預(yù)設(shè)的算法對其進(jìn)行命名，并優(yōu)先查看本地已緩存的圖片中是否有用戶需求加載的圖片，若有則直接調(diào)用本地圖片以供用戶查看，從而減少加載圖片時用戶的等待時間，同時，可減少頁面的負(fù)擔(dān)，間接幫助加快用戶同時發(fā)出的其他請求的響應(yīng)時間，有利于優(yōu)化頁面性能，提升用戶的使用滿意度。