免費(fèi)AI編程助手
APICloud 七天培訓(xùn)課 第四天
/ title: 7天培訓(xùn)課4 / <style> </style>
第四天：掌握使用JS模版來(lái)實(shí)現(xiàn)列表數(shù)據(jù)，推薦使用doT模版；了解下拉刷新和上拉加載的實(shí)現(xiàn)原理及相關(guān)API的使用，實(shí)現(xiàn)下拉刷新、上拉加載更多功能；了解APICloud圖片緩存原理及相關(guān)API的使用，對(duì)APP中網(wǎng)絡(luò)圖片實(shí)現(xiàn)本地緩存；了解APICloud平臺(tái)提供的本地?cái)?shù)據(jù)能力，理解APICloud應(yīng)用沙箱結(jié)構(gòu)，了解應(yīng)用資源訪問(wèn)協(xié)議，掌握相關(guān)API的使用
教程更新：Github地址
學(xué)習(xí)目標(biāo)
- 使用doT模版函數(shù)實(shí)現(xiàn)列表數(shù)據(jù)
- 下拉刷新，上拉加載
- 圖片緩存
- 數(shù)據(jù)更新后的點(diǎn)擊事件優(yōu)化
主要內(nèi)容
1.1 JS模版原理
1.2 doT模版使用
1.3 使用doT版本實(shí)現(xiàn)列表數(shù)據(jù)展示
2.1 下拉刷新實(shí)現(xiàn)機(jī)制
2.2 相關(guān)API使用
2.3 實(shí)現(xiàn)下拉刷新功能
3.1 上拉加載實(shí)現(xiàn)機(jī)制
3.2 相關(guān)API使用
3.3 實(shí)現(xiàn)上拉加載功能
4.1 圖片緩存機(jī)制
4.2 相關(guān)API使用
4.3 實(shí)現(xiàn)圖片緩存功能
5.1 APICloud平臺(tái)提供的本地?cái)?shù)據(jù)存儲(chǔ)能力
5.2 數(shù)據(jù)存儲(chǔ)相關(guān)API使用
5.3 實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)功能
6.1 默認(rèn)的沙箱位置
6.2 修改Android默認(rèn)沙箱位置
7.1 資源存放的位置
7.2 資源訪問(wèn)協(xié)議
7.3 資源訪問(wèn)相關(guān)API屬性
<div id="P1"></div>
1. 使用JS模版展示列表數(shù)據(jù)
--
1.1 JS模版原理
- 在JS代碼中寫(xiě)標(biāo)簽
1.2 doT模版使用
1.3 使用doT版本實(shí)現(xiàn)列表數(shù)據(jù)展
<div id="P2"></div>
2. 實(shí)現(xiàn)下拉刷新
--
2.1 下拉刷新實(shí)現(xiàn)機(jī)制
2.2 相關(guān)API使用
2.2.1 默認(rèn)下拉刷新
2.2.2 自定義下拉刷新
- api.setCustomRefreshHeaderInfo()
- UIPullRefresh模塊
- UIPullRefreshDrop模塊
- UIPullRefreshFlash模塊
- UIPullRefreshMotive模塊
2.3 實(shí)現(xiàn)下拉刷新功能
<div id="P3"></div>
3. 實(shí)現(xiàn)加載更多
--
3.1 上拉加載實(shí)現(xiàn)機(jī)制
3.2 相關(guān)API使用
- 監(jiān)聽(tīng)scrolltobottom事件
3.3 實(shí)現(xiàn)上拉加載功能
- tapmode處理（[api.parseTapmode()]()）
<div id="P4"></div>
4. 實(shí)現(xiàn)圖片緩存
--
4.1 圖片緩存機(jī)制
4.2 相關(guān)API使用
- 圖片緩存：api.imageCache()
4.3 實(shí)現(xiàn)圖片緩存功能
<div id="P5"></div>
5. 本地?cái)?shù)據(jù)存儲(chǔ)
--
5.1 APICloud平臺(tái)提供的本地?cái)?shù)據(jù)存儲(chǔ)能力
5.1.1 localStorage
- 在平臺(tái)內(nèi)部擴(kuò)展實(shí)現(xiàn)，不再受Webkit默認(rèn)存儲(chǔ)容量限制
- 實(shí)現(xiàn)跨窗口同步存取機(jī)制
- 支持JSON對(duì)象存取操作
5.1.2 偏好設(shè)置
- 封裝了系統(tǒng)偏好設(shè)置相關(guān)接口，應(yīng)用內(nèi)全局有效
5.1.3 文件
- 封裝了標(biāo)準(zhǔn)的文件操作相關(guān)接口
- 支持同步方式接口調(diào)用
5.1.4 數(shù)據(jù)庫(kù)
- 封裝了標(biāo)準(zhǔn)的數(shù)據(jù)庫(kù)操作相關(guān)接口
- 支持同步方式接口調(diào)用
5.2 數(shù)據(jù)存儲(chǔ)相關(guān)API使用
5.2.1 localStorage
5.2.2 preference
5.2.3 file
5.2.4 database
- db模塊
- 打開(kāi)數(shù)據(jù)庫(kù)
5.2.5 存儲(chǔ)容量相關(guān)
5.3 實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)功能
- 實(shí)現(xiàn)保存用戶信息
- 實(shí)現(xiàn)保存購(gòu)物車(chē)信息
- 實(shí)現(xiàn)清除緩存
- 實(shí)現(xiàn)退出登錄
- DB操作相關(guān)JS框架封裝
<div id="P6"></div>
6. 應(yīng)用沙箱結(jié)構(gòu)
--
6.1 默認(rèn)的沙箱位置
- Android的默認(rèn)沙箱位置：sdcard/UZMap/appId
- iOS的默認(rèn)沙箱位置：Documents/uzfs/appId
6.2 修改Android默認(rèn)沙箱位置
- 通過(guò)修改config.xml文件中的sandbox屬性，來(lái)指定Android虛擬沙箱位置
<widget id="A1234567890123", sandbox="myBox">
推薦視頻：初級(jí)代碼篇第
<div id="P7"></div>
7. 資源訪問(wèn)協(xié)議
--
7.1 資源存放的位置
- widget包中
- 應(yīng)用沙箱中（APICloud應(yīng)用虛擬沙箱和Native應(yīng)用真實(shí)沙箱）
7.2 資源訪問(wèn)協(xié)議
- widget://（訪問(wèn)widget包中資源）
- fs://（訪問(wèn)APICloud應(yīng)用虛擬沙箱中資源）
- cache://（訪問(wèn)緩存中資源）
- box://（訪問(wèn)應(yīng)用真實(shí)沙箱中的資源）
7.3 資源訪問(wèn)相關(guān)API屬性
- api.wgtDir（返回widget包根路徑）
- api.fsDir（返回APICloud應(yīng)用沙箱根路徑）
- api.cacheDir（返回緩存根路徑）
- api.boxDir（返回應(yīng)用真實(shí)沙箱根路徑）
更多建議：