APP7天快速开发教程4：APP开发图片缓存原理

lele1751

第四天：掌握使用JS模版来实现列表数据，推荐使用doT模版；了解下拉刷新和上拉加载的实现原理及相关API的使用，实现下拉刷新、上拉加载更多功能；了解APICloud图片缓存原理及相关API的使用，对APP中网络图片实现本地缓存；了解APICloud平台提供的本地数据能力，理解APICloud应用沙箱结构，了解应用资源访问协议，掌握相关API的使用

第四天课程源码

http://7xy8na.com1.z0.glb.clouddn.com/apicloud/dcf300598ee3df5f3076faa74f384e22.zip)

教程更新：

Github地址

https://github.com/apicloudcom/APICloud-7Days-Online-Training-Tutorials/blob/master/Day4.md

学习目标

使用doT模版函数实现列表数据
下拉刷新，上拉加载
图片缓存
数据更新后的点击事件优化

主要内容

1. 使用JS模版展示列表数据

    1.1 JS模版原理
    1.2 doT模版使用
    1.3 使用doT版本实现列表数据展示

2. 实现下拉刷新

    2.1 下拉刷新实现机制
    2.2 相关API使用
    2.3 实现下拉刷新功能

3. 实现上拉加载

    3.1 上拉加载实现机制
    3.2 相关API使用
    3.3 实现上拉加载功能
   
4. 实现图片缓存

    4.1 图片缓存机制
    4.2 相关API使用
    4.3 实现图片缓存功能
   
5. 本地数据存储

    5.1 APICloud平台提供的本地数据存储能力
    5.2 数据存储相关API使用
    5.3 实现数据存储功能

6. 应用沙箱结构
   
    6.1 默认的沙箱位置
    6.2 修改Android默认沙箱位置

7. 资源访问协议

    7.1 资源存放的位置
    7.2 资源访问协议
    7.3 资源访问相关API属性
   

1. 使用JS模版展示列表数据

1.1 JS模版原理
在JS代码中写标签

1.2 doT模版使用
doT使用文档：https://github.com/apicloudcom/apicloud-js-module

1.3 使用doT版本实现列表数据展

2. 实现下拉刷新

2.1 下拉刷新实现机制
2.2 相关API使用
2.2.1 默认下拉刷新
api.setRefreshHeaderInfo()：http://docs.apicloud.com/Client-API/api#46
api.refreshHeaderLoading()：http://docs.apicloud.com/Client-API/api#87
api.refreshHeaderLoadDone：http://docs.apicloud.com/Client-API/api#37

2.2.2 自定义下了刷新
api.setCustomRefreshHeaderInfo()：http://docs.apicloud.com/Client-API/api#94
UIPullRefresh模块：http://docs.apicloud.com/Client-API/UI-Layout/UIPullRefresh
UIPullRefreshDrop模块：http://docs.apicloud.com/Client-API/UI-Layout/UIPullRefreshDrop
UIPullRefreshFlash模块：http://docs.apicloud.com/Client-API/UI-Layout/UIPullRefreshFlash
UIPullRefreshMotive模块：http://docs.apicloud.com/Client-API/UI-Layout/UIPullRefreshMotive

2.3 实现下拉刷新功能


3. 实现加载更多

3.1 上拉加载实现机制
3.2 相关API使用
监听scrolltobottom事件

3.3 实现上拉加载功能
tapmode处理


4. 实现图片缓存

4.1 图片缓存机制
4.2 相关API使用
图片缓存：api.imageCache()：http://docs.apicloud.com/Client-API/api#78

4.3 实现图片缓存功能

相关技术文档：http://www.apicloud.com/index?uzchannel=33

app开发：http://www.apicloud.com