书封面.jpeg
上期APICloud和大家分享了《30天,App开发从0到1》一书中,数据云的用途和特点的相关知识,相信小伙伴们也有了一些收获。这次,小编又带着精彩内容来和大家见面了(请为无私奉献的小编点赞!)
在第三章中介绍了 APICloud 和后端交互的机制,并将商品列表根据数据进行了显示。本章将学习doT 模板引擎的基本使用、本地存储和图片缓存的使用、以及下拉刷新、上拉加载的实现。
学习目标
1)学习 doT 模板引擎的使用。
(2)学习本地存储和图片缓存。
(3)下拉刷新、上拉加载的实现。
(4)理解 APICloud 应用沙箱结构。
(5)掌握 APICloud 资源访问协议使用。
(6)学习常用对话窗口的使用。
(7)学习窗口间的通信机制。
(8)学习 APICloud 平台的事件机制。
本期,APICloud和大家重点分享的是第二节:
本地存储和图片缓存
数据的本地存储和图片缓存可以极大地提高 App 的用户体验、提高 UI 响应速度、减少网 络使用。本节将介绍数据的本地存储和图片缓存。
1 uzStorage
APICloud 提供了 uzStorage 来提供类似 localStorage 的功能,但是比 localStorage 更适合混合 App 开发。uzStorage 比标准的 localStorage 更安全也更易用,例如 localStorage 有大小限制、异步 会导致一些安全问题、不能存储对象等问题,但这些问题均在 uzStorage 中得到了解决。通过下 面的 API 控制 uzStorage :
api.getStorage("key"); 获取数据api.setStorage("key","value"); 存储数据 api.rmStorage("key"); 移除保存的数据api.clearStorage(); 清空本地存储
2 偏好设置
APICloud 提供了针对系统原生偏好设置操作的 API(如 Android 的 preference 和 iOS 的 plist),使用键值对的方式存储。通过下面的 API 控制偏好设置:
api.getPrefs("key");// 获取偏好设置 api.setPrefs("key","value");// 设置偏好设置 api.removePrefs("key");// 删除偏设置
3 文件
APICloud 提供了标准的文件操作接口,支持同步和异步的调用方式。使用下面的 API 操作 文件:
api.readFile({
sync:false,// 是否同步,默认 false
path:"PathToFile"http:// 文件路径,支持绝对路径和文件路径协议如 fs://、widget:// 等
}, function(ret,err){
//ret={status:true,data:""}
}); //err={code:0,msg:""}
api.writeFile({
path:"PathToFile",// 文件路径,支持绝对路径和文件路径协议如 fs://、cache:// 等,不支持 widget:// 目录,
该目录只读
data:"data",// 文件内容
append:false// 是否以追加方式写入数据,默认 false,会清除之前文件内容 }, function(ret,err){
//ret={status:true}
}); //err={code:0,msg:""}
关于 API 的详细信息请参阅文档。如果想获得更多对文件操作的能力请使用“fs”模块: var fs=api.require(‘fs‘);
// 创建文件 fs.createFile({
path:‘path/to/file‘ //文件路径 },function(ret,err){
})//ret={status: true} 是否成功
// 删除文件 fs.remove({
path:‘path/to/file‘ //文件路径 },function(ret,err){
})//ret={status: true} 是否成功
// 获取文件数据的 MD5 值 fs.getMD5({
path:‘path/to/file‘ //文件路径 },function(req,err){
//req={
// status:true, 是否成功
// md5Str:‘‘ 文件数据的MD5值
}) //}
“fs”模块还提供了很多操作文件和目录的方法,请参阅相关文档。关于如何引入第三方模
块会在后面的章节中介绍。
4 database
使用“db”模块操作数据库,“db”模块封装了手机常用数据库 sqlite 的增删改查语句,可实 现数据的本地存储,极大地简化了数据持久化问题,并且支持同步接口。“db”模块的使用如下:
var db=api.require(‘db‘);
// 打开数据库,若不存在则创建新的数据库 db.openDatabase({
name: ‘name‘, //数据库名称
path:‘path‘ // 数据库所在路径,不传时使用默认创建的路径,可选 }, function(ret, err) {
//ret={status:true} 是否创建成功 });
// 关闭数据库 db.closeDatabase({
name: ‘name‘//数据库名称 }, function(ret, err) {
//ret={
// status:true 是否成功
}); //}
//执行SQL语句 db.executeSql({
name: ‘name‘,//数据库名称
sql: ‘CREATE TABLE Persons(Id_P int, LastName varchar(255), FirstName varchar(255), A ddress varchar(255), City varchar(255))‘//要执行的SQL语句
}, function(ret, err) {
//ret={status:true} 是否执行成功
});
// 查询 SQL db.selectSql({
name: ‘name‘,//数据库名称
sql: ‘SELECT * FROM Persons‘//查询SQL字符串 }, function(ret, err) {
//ret={
// status:true, 是否执行成功
// data:[] 查询到的数据
}); //}
关于“db”模块的更多内容请参阅相关文档。
5 存储容量
APICloud 提供了关于存储容量的 API,代码如下:
api.getFreeDiskSpace({
sync:false// 执行结果的返回方式。为 false 时通过 callback 返回,为 true 时直接返回,默认 false
}, function(ret,err){
//ret={size:1024} 剩余存储空间大小,单位为Byte,数字类型。(-1:无存储设备、-2:正在准备USB存
储设备、-3 :无法访问存储设备) });
api.getTotalSpace({
sync:false //执行结果的返回方式。为false时通过callback返回,为true时直接返回,默认false
}, function(ret,err){
//ret={size:1024} 总存储空间大小,单位为Byte,数字类型。(-1:无存储设备、-2:正在准备USB存储
设备、-3 :无法访问存储设备) });
api.getCacheSize({
sync:false// 执行结果的返回方式。为 false 时通过 callback 返回,为 true 时直接返回,默认 false
}, function(ret,err){
//ret={size} 缓存大小,单位为Byte,数字类型。(-1:无存储设备、-2:正在准备USB存储设备、-3:无
法访问存储设备)
});
api.clearCache({ timeThreshold:10//(可选项)清除多少天前的缓存,默认 0
}, function(ret,err){ }); //清除完成
6 沙箱机制
在 Android 和 iOS 中均采用虚拟沙箱的机制来保障数据存储的安全和独立,App 只能访问 自己文件系统的沙箱区域。沙箱位置如下。
? Android 的默认沙箱位置:sdcard/UZMap/appId。
? iOS 的默认沙箱位置:Documents/uzfs/appId。
可以通过修改 config.xml 中的 sandbox 属性来指定 Android 沙箱位置:
通过以上配置,App 将在 Android 手机的外部存储(如 SD 卡)的根目录中建立名为“myBox” 的目录,并以该目录作为本 App 的沙箱目录,App 运行过程中动态产生的资源文件将存储在该 目录及其子目录下,并且这些资源不会随着 App 的卸载而清除。
7 资源访问协议
APICloud 资源被存放在 App 安装包(ipa 包或者 apk 包)中或应用沙箱中。沙箱分为 APICloud 应用虚拟沙箱和 Native 应用真实沙箱,真实沙箱是操作系统为 App 在设备内部存储上 分配的空间,不可见,只允许 App 本身访问。访问这些位置的资源可以使用如下协议:
? widget://(访问安装包中的资源,根目录指向你的项目代码根路径,即 widget 路径。只 读属性);
?fs:/(/访问APICloud应用虚拟沙箱中资源,根目录指向4.2.6节描述的目录,可读可写);
? cache://(访问本地缓存中的资源,存储在该路径下的资源,在调用 api.clearCache 时将
被清除。可读可写);
? box://(访问应用真实沙箱中的资源,私密数据建议使用本协议操作。可读可写)。 相关路径可以通过如下代码获取:
? api.wgtDir(返回 widget 包根路径);
? api.fsDir(返回 APICloud 应用虚拟沙箱根路径);
? api.cacheDir(返回缓存根路径);
? api.boxDir(返回应用真实沙箱根路径)。
8 图片缓存
对于图片缓存,可使用如下代码:
var img=$api.byId("myImg");
api.imageCache({
url:‘http://example.com/dir/file.png‘
},function(ret,err){
if(ret && ret.status==true){
} img.src=https://www.jianshu.com/p/ret.url;
else{
} //处理错误
});
上述代码首先在参数中指定了要缓存的远程图片路径(url),在之后的回调函数中判断是 否缓存成功(if(ret && ret.status==true){}),如果成功就可以使用 ret.url 来更新 标签。ret.url 是图片缓存到本地后的路径。
这里实现了图片缓存,App 在第一次从指定位置加载图片后会缓存到本地存储上面,下次 使用时会直接调用缓存,以此提升加载速度和渲染效率。
关于 API 更详细的信息请参阅相关文档。