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