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