7天培训课4
第四天：掌握使用JS模版来实现列表数据，推荐使用doT模版；了解下拉刷新和上拉加载的实现原理及相关API的使用，实现下拉刷新、上拉加载更多功能；了解APICloud图片缓存原理及相关API的使用，对APP中网络图片实现本地缓存；了解APICloud平台提供的本地数据能力，理解APICloud应用沙箱结构，了解应用资源访问协议，掌握相关API的使用
教程更新：Github地址
学习目标
- 使用doT模版函数实现列表数据
- 下拉刷新，上拉加载
- 图片缓存
- 数据更新后的点击事件优化
主要内容
-
1.1 JS模版原理
1.2 doT模版使用
1.3 使用doT版本实现列表数据展示
-
2.1 下拉刷新实现机制
2.2 相关API使用
2.3 实现下拉刷新功能
-
3.1 上拉加载实现机制
3.2 相关API使用
3.3 实现上拉加载功能
-
4.1 图片缓存机制
4.2 相关API使用
4.3 实现图片缓存功能
-
5.1 APICloud平台提供的本地数据存储能力
5.2 数据存储相关API使用
5.3 实现数据存储功能
-
6.1 默认的沙箱位置
6.2 修改Android默认沙箱位置
-
7.1 资源存放的位置
7.2 资源访问协议
7.3 资源访问相关API属性
1. 使用JS模版展示列表数据
--
1.1 JS模版原理
- 在JS代码中写标签
1.2 doT模版使用
1.3 使用doT版本实现列表数据展
2. 实现下拉刷新
--
2.1 下拉刷新实现机制
2.2 相关API使用
2.2.1 默认下拉刷新
2.2.2 自定义下拉刷新
- api.setCustomRefreshHeaderInfo()
- UIPullRefresh模块
- UIPullRefreshDrop模块
- UIPullRefreshFlash模块
- UIPullRefreshMotive模块
2.3 实现下拉刷新功能
3. 实现加载更多
--
3.1 上拉加载实现机制
3.2 相关API使用
- 监听scrolltobottom事件
3.3 实现上拉加载功能
- tapmode处理（api.parseTapmode()）
4. 实现图片缓存
--
4.1 图片缓存机制
4.2 相关API使用
- 图片缓存：api.imageCache()
4.3 实现图片缓存功能
5. 本地数据存储
--
5.1 APICloud平台提供的本地数据存储能力
5.1.1 localStorage
- 在平台内部扩展实现，不再受Webkit默认存储容量限制
- 实现跨窗口同步存取机制
- 支持JSON对象存取操作
5.1.2 偏好设置
- 封装了系统偏好设置相关接口，应用内全局有效
5.1.3 文件
- 封装了标准的文件操作相关接口
- 支持同步方式接口调用
5.1.4 数据库
- 封装了标准的数据库操作相关接口
- 支持同步方式接口调用
5.2 数据存储相关API使用
5.2.1 localStorage
5.2.2 preference
5.2.3 file
5.2.4 database
- db模块
- 打开数据库
5.2.5 存储容量相关
5.3 实现数据存储功能
- 实现保存用户信息
- 实现保存购物车信息
- 实现清除缓存
- 实现退出登录
- DB操作相关JS框架封装
6. 应用沙箱结构
--
6.1 默认的沙箱位置
- Android的默认沙箱位置：sdcard/UZMap/appId
- iOS的默认沙箱位置：Documents/uzfs/appId
6.2 修改Android默认沙箱位置
- 通过修改config.xml文件中的sandbox属性，来指定Android虚拟沙箱位置
<widget id="A1234567890123", sandbox="myBox">
推荐视频：初级代码篇第
7. 资源访问协议
--
7.1 资源存放的位置
- widget包中
- 应用沙箱中（APICloud应用虚拟沙箱和Native应用真实沙箱）
7.2 资源访问协议
- widget://（访问widget包中资源）
- fs://（访问APICloud应用虚拟沙箱中资源）
- cache://（访问缓存中资源）
- box://（访问应用真实沙箱中的资源）
7.3 资源访问相关API属性
- api.wgtDir（返回widget包根路径）
- api.fsDir（返回APICloud应用沙箱根路径）
- api.cacheDir（返回缓存根路径）
- api.boxDir（返回应用真实沙箱根路径）