用小程序時(shí)，你是不是遇到過(guò)這種情況：網(wǎng)絡(luò)差的時(shí)候頁(yè)面加載半天出不來(lái)，甚至直接白屏；走到?jīng)]信號(hào)的地方，之前看過(guò)的內(nèi)容也看不了？其實(shí)這些問(wèn)題都能通過(guò)“離線緩存”功能解決。簡(jiǎn)單說(shuō)，離線緩存就是讓小程序把用戶常用的內(nèi)容（比如頁(yè)面結(jié)構(gòu)、圖片、文字）提前存到手機(jī)里，就算沒(méi)網(wǎng)或弱網(wǎng)，也能快速打開(kāi)之前看過(guò)的內(nèi)容。今天用大白話講透小程序離線緩存的開(kāi)發(fā)方法，再分享幾個(gè)提升弱網(wǎng)體驗(yàn)的技巧，不用懂太深的技術(shù)也能看明白。
先說(shuō)明下：小程序的離線緩存不是“全自動(dòng)”的，需要開(kāi)發(fā)者主動(dòng)設(shè)計(jì)哪些內(nèi)容要緩存、怎么緩存、怎么更新。核心邏輯很簡(jiǎn)單：“提前存、智能取、及時(shí)更”——提前把用戶可能用到的內(nèi)容存到本地，弱網(wǎng)/離線時(shí)優(yōu)先讀取本地緩存，有網(wǎng)時(shí)再悄悄更新緩存內(nèi)容。下面先講開(kāi)發(fā)前的準(zhǔn)備，再分步拆解開(kāi)發(fā)流程。
開(kāi)發(fā)前先明確兩個(gè)關(guān)鍵問(wèn)題：哪些內(nèi)容能緩存、需要準(zhǔn)備什么基礎(chǔ)條件，避免做無(wú)用功。
不是所有內(nèi)容都適合緩存，選對(duì)緩存內(nèi)容才能既提升體驗(yàn)，又不占用用戶太多手機(jī)空間。
適合緩存的內(nèi)容：① 靜態(tài)資源：比如小程序的頁(yè)面框架（按鈕、布局結(jié)構(gòu)）、固定的圖片（logo、圖標(biāo)）、常用的文字內(nèi)容（比如功能說(shuō)明、分類列表）；② 用戶高頻訪問(wèn)的動(dòng)態(tài)數(shù)據(jù)：比如用戶自己的歷史記錄、收藏的內(nèi)容、最近瀏覽的商品信息；③ 基礎(chǔ)配置信息：比如小程序的主題顏色、功能開(kāi)關(guān)設(shè)置。
不適合緩存的內(nèi)容：① 實(shí)時(shí)性要求極高的內(nèi)容：比如實(shí)時(shí)榜單、最新消息通知、支付狀態(tài)；② 超大文件：比如高清視頻、大體積壓縮包，這些文件占用空間大，緩存速度慢，反而影響體驗(yàn)；③ 敏感信息：比如用戶的密碼、驗(yàn)證碼、個(gè)人隱私數(shù)據(jù)，緩存到本地有安全風(fēng)險(xiǎn)。
做離線緩存前，需要先準(zhǔn)備好這幾個(gè)基礎(chǔ)條件，不然開(kāi)發(fā)時(shí)會(huì)卡殼：
① 熟悉小程序的存儲(chǔ)API：小程序提供了專門的本地存儲(chǔ)接口，用來(lái)存放緩存內(nèi)容，核心有兩種：一種是“本地緩存”（適合存小體積數(shù)據(jù)，比如文字、簡(jiǎn)單的配置信息），另一種是“文件系統(tǒng)”（適合存圖片、音頻等文件）。不用記太復(fù)雜的，知道有這兩個(gè)工具就行，開(kāi)發(fā)時(shí)直接調(diào)用。
② 確定緩存策略：提前想好三個(gè)問(wèn)題：“緩存什么”（按上面的分類篩選）、“緩存多久”（比如靜態(tài)資源緩存7天，用戶歷史記錄緩存30天）、“怎么清理”（比如超過(guò)緩存時(shí)間自動(dòng)清理，或用戶手動(dòng)清理）。
③ 做好版本管理：緩存的內(nèi)容需要有版本標(biāo)識(shí)，比如給每批緩存內(nèi)容加個(gè)“版本號(hào)”，有網(wǎng)時(shí)對(duì)比服務(wù)器的版本和本地版本，不一樣就更新緩存，避免用戶看到舊內(nèi)容。
離線緩存開(kāi)發(fā)主要分三步：基礎(chǔ)靜態(tài)資源緩存、動(dòng)態(tài)數(shù)據(jù)緩存、緩存更新與清理。一步一步來(lái)，先搞定簡(jiǎn)單的，再優(yōu)化復(fù)雜的。
靜態(tài)資源是小程序最核心的部分，比如頁(yè)面布局、圖標(biāo)、固定文字，這部分內(nèi)容變化少，適合優(yōu)先緩存。開(kāi)發(fā)思路是“小程序啟動(dòng)時(shí)自動(dòng)緩存，后續(xù)訪問(wèn)直接讀本地”。
具體做法：
1. 配置小程序的“預(yù)加載資源”：在小程序的配置文件里，列出需要提前緩存的靜態(tài)資源清單，比如頁(yè)面路徑、圖標(biāo)圖片地址、公共樣式文件。小程序啟動(dòng)時(shí)，會(huì)自動(dòng)把這些資源下載到本地，后續(xù)打開(kāi)對(duì)應(yīng)頁(yè)面時(shí)，就不用再?gòu)木W(wǎng)絡(luò)加載了。
2. 用本地緩存存固定文字內(nèi)容：比如小程序的功能說(shuō)明、分類名稱這些固定文字，第一次加載時(shí)從服務(wù)器獲取，然后用小程序的本地存儲(chǔ)API存到本地。之后每次打開(kāi)頁(yè)面，先檢查本地有沒(méi)有緩存，如果有就直接顯示，沒(méi)有再請(qǐng)求網(wǎng)絡(luò)。
3. 注意事項(xiàng)：靜態(tài)資源的緩存空間有限，不要把所有資源都緩存，只選核心的；另外，緩存的靜態(tài)資源要加版本號(hào)，比如圖標(biāo)圖片命名時(shí)加上“v1.0”，后續(xù)圖片更新時(shí)，把版本號(hào)改成“v1.1”，小程序檢測(cè)到版本變化就會(huì)重新緩存。
動(dòng)態(tài)數(shù)據(jù)是用戶高頻訪問(wèn)的內(nèi)容，比如歷史記錄、收藏列表，這部分內(nèi)容需要針對(duì)性緩存，讓用戶弱網(wǎng)時(shí)也能看到自己關(guān)心的內(nèi)容。開(kāi)發(fā)思路是“用戶訪問(wèn)時(shí)緩存，再次訪問(wèn)時(shí)優(yōu)先讀緩存，有網(wǎng)時(shí)同步更新”。
具體做法：
1. 緩存用戶相關(guān)的動(dòng)態(tài)數(shù)據(jù)：用戶第一次查看自己的歷史記錄時(shí)，從服務(wù)器獲取數(shù)據(jù)后，不僅要顯示給用戶，還要用本地存儲(chǔ)API存起來(lái)，同時(shí)記錄緩存時(shí)間。比如用戶查看收藏列表后，把列表數(shù)據(jù)和“緩存時(shí)間：2024-05-01 10:00”一起存到本地。
2. 實(shí)現(xiàn)“緩存優(yōu)先，網(wǎng)絡(luò)補(bǔ)充”的邏輯：用戶再次訪問(wèn)該頁(yè)面時(shí)，先檢查本地有沒(méi)有緩存、緩存有沒(méi)有過(guò)期。如果緩存存在且沒(méi)過(guò)期，直接顯示緩存內(nèi)容；同時(shí)在后臺(tái)悄悄請(qǐng)求網(wǎng)絡(luò)，獲取最新數(shù)據(jù)，如果數(shù)據(jù)有更新，就更新本地緩存并刷新頁(yè)面顯示。如果緩存過(guò)期或沒(méi)有緩存，就顯示“加載中”，同時(shí)請(qǐng)求網(wǎng)絡(luò)，網(wǎng)絡(luò)請(qǐng)求失敗時(shí)，顯示“暫無(wú)網(wǎng)絡(luò)，可查看歷史緩存”的提示，并展示過(guò)期緩存（如果有）。
3. 用文件系統(tǒng)緩存動(dòng)態(tài)圖片：如果動(dòng)態(tài)數(shù)據(jù)里有圖片（比如用戶收藏的商品圖片），第一次加載時(shí)，用小程序的文件系統(tǒng)API把圖片下載到本地，后續(xù)顯示時(shí)直接讀取本地圖片，不用再請(qǐng)求網(wǎng)絡(luò)。注意給圖片命名時(shí)加上唯一標(biāo)識(shí)，避免重復(fù)緩存。
緩存不是存了就不管了，還要做好更新和清理，不然用戶會(huì)看到舊內(nèi)容，或者手機(jī)空間被占滿。開(kāi)發(fā)思路是“自動(dòng)更新+定期清理+手動(dòng)清理”。
具體做法：
1. 自動(dòng)更新緩存：給每類緩存內(nèi)容設(shè)置“版本號(hào)”或“過(guò)期時(shí)間”。有網(wǎng)時(shí)，小程序啟動(dòng)后或用戶訪問(wèn)頁(yè)面時(shí)，自動(dòng)對(duì)比本地緩存版本和服務(wù)器版本，如果服務(wù)器版本更新，就下載新內(nèi)容并覆蓋本地舊緩存；如果緩存超過(guò)過(guò)期時(shí)間，也自動(dòng)請(qǐng)求最新數(shù)據(jù)并更新緩存。
2. 定期清理緩存：在小程序里寫一段自動(dòng)清理的代碼，比如每天凌晨，檢查所有緩存內(nèi)容，把超過(guò)過(guò)期時(shí)間的緩存自動(dòng)刪除；或者當(dāng)本地緩存總大小超過(guò)小程序規(guī)定的上限時(shí)，按“緩存時(shí)間從早到晚”的順序刪除舊緩存，確保緩存空間夠用。
3. 提供手動(dòng)清理入口：在小程序的“我的”頁(yè)面，加一個(gè)“清理緩存”的按鈕，用戶可以手動(dòng)點(diǎn)擊清理所有緩存。點(diǎn)擊后，調(diào)用小程序的清理API，刪除本地所有緩存內(nèi)容，并顯示“清理成功”的提示。
離線緩存是基礎(chǔ)，再配合這幾個(gè)技巧，能讓弱網(wǎng)下的使用體驗(yàn)更流暢，用戶不容易流失。
弱網(wǎng)時(shí)頁(yè)面加載慢，用戶容易以為小程序卡住了?？梢宰鲞@兩個(gè)優(yōu)化：① 顯示清晰的加載提示：比如在頁(yè)面中間顯示“加載中...”的文字，配合簡(jiǎn)單的加載動(dòng)畫（比如轉(zhuǎn)圈的圖標(biāo)），讓用戶知道小程序在工作；② 區(qū)分“弱網(wǎng)”和“無(wú)網(wǎng)”提示：檢測(cè)到網(wǎng)絡(luò)差時(shí)，顯示“網(wǎng)絡(luò)較慢，正在努力加載...”；檢測(cè)到無(wú)網(wǎng)時(shí)，顯示“當(dāng)前無(wú)網(wǎng)絡(luò)，可查看離線內(nèi)容”，并提供“刷新重試”按鈕。
弱網(wǎng)時(shí)，每一次網(wǎng)絡(luò)請(qǐng)求都很慢，所以要盡量減少請(qǐng)求次數(shù)。① 合并請(qǐng)求：把多個(gè)小的網(wǎng)絡(luò)請(qǐng)求合并成一個(gè)，比如獲取頁(yè)面數(shù)據(jù)時(shí)，同時(shí)獲取文字、圖片地址等信息，而不是分多次請(qǐng)求；② 避免重復(fù)請(qǐng)求：用戶點(diǎn)擊按鈕后，在請(qǐng)求完成前，禁用按鈕（比如按鈕變灰），避免用戶多次點(diǎn)擊導(dǎo)致重復(fù)請(qǐng)求；③ 延遲非關(guān)鍵請(qǐng)求：把不是必須立即加載的內(nèi)容（比如頁(yè)面底部的推薦信息），延遲到頁(yè)面核心內(nèi)容加載完成后再請(qǐng)求，優(yōu)先保證核心功能能用。
根據(jù)用戶的操作習(xí)慣，提前加載用戶可能接下來(lái)要訪問(wèn)的內(nèi)容。比如用戶在瀏覽列表頁(yè)時(shí)，預(yù)測(cè)用戶可能會(huì)點(diǎn)擊下一頁(yè)，就提前在后臺(tái)加載下一頁(yè)的內(nèi)容并緩存；用戶進(jìn)入首頁(yè)后，提前加載“我的”頁(yè)面的核心數(shù)據(jù)。這樣用戶點(diǎn)擊時(shí)，就能直接顯示內(nèi)容，感覺(jué)很流暢。
就算有緩存，首次加載或更新緩存時(shí)，資源大小也會(huì)影響加載速度。① 壓縮圖片：把小程序里的圖片壓縮到合適的大小，比如圖標(biāo)圖片用小尺寸，產(chǎn)品圖片用中等分辨率，避免用高清大圖；② 精簡(jiǎn)代碼：刪除小程序里沒(méi)用的代碼、冗余的樣式，讓代碼更簡(jiǎn)潔，加載和運(yùn)行速度更快；③ 用輕量級(jí)組件：盡量用小程序自帶的基礎(chǔ)組件，避免使用復(fù)雜的第三方組件，減少資源占用。
弱網(wǎng)或無(wú)網(wǎng)時(shí)，用戶可能會(huì)進(jìn)行一些操作（比如填寫表單、點(diǎn)擊提交）?？梢宰觥氨镜貢捍妗惫δ埽河脩舨僮鲿r(shí)，先把操作數(shù)據(jù)存到本地，顯示“操作已暫存，網(wǎng)絡(luò)恢復(fù)后自動(dòng)提交”；等網(wǎng)絡(luò)恢復(fù)后，小程序自動(dòng)把暫存的操作數(shù)據(jù)提交到服務(wù)器，并提示用戶“操作已同步”。這樣就算中途斷網(wǎng)，用戶的操作也不會(huì)丟失。
小程序離線緩存開(kāi)發(fā)的核心就是“選對(duì)內(nèi)容、做好存儲(chǔ)、及時(shí)更新”，先從靜態(tài)資源緩存入手，再逐步實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)緩存，最后配合緩存清理機(jī)制，就能基本解決弱網(wǎng)/離線時(shí)的使用問(wèn)題。再加上加載提示、減少請(qǐng)求、預(yù)加載等技巧，能進(jìn)一步提升弱網(wǎng)體驗(yàn)。
需要注意的幾個(gè)關(guān)鍵點(diǎn)：① 緩存內(nèi)容要精準(zhǔn)，不存無(wú)關(guān)內(nèi)容和敏感信息；② 嚴(yán)格控制緩存大小，避免占用用戶過(guò)多手機(jī)空間；③ 做好版本管理，確保用戶看到的是最新內(nèi)容；④ 所有緩存邏輯都要考慮異常情況，比如緩存失敗、網(wǎng)絡(luò)突然中斷，避免小程序崩潰。
其實(shí)離線緩存不是什么高深的技術(shù)，核心是站在用戶角度思考：用戶在弱網(wǎng)/無(wú)網(wǎng)時(shí)最需要看到什么內(nèi)容？怎么讓用戶操作更順暢？按這個(gè)思路，再跟著上面的步驟開(kāi)發(fā)，就能做出體驗(yàn)很好的離線緩存功能，讓小程序在各種網(wǎng)絡(luò)環(huán)境下都能穩(wěn)定好用。
聯(lián)系電話題-1.jpg)