//err = {code:0,msg:""}api.writeFile({path:"PathToFile",//文件路径,支持绝对路径和文件路径协议如 fs://、cache:// 等,不
上期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),使用键值对的方式存储。
3.文件
APICloud 提供了标准的文件操作接口,支持同步和异步的调用方式。使用下面的 API 操作文件:
api.readFile({sync:false,//是否同步,默认 falsepath:"PathToFile"// 文件路径,支持绝对路径和文件路径协议如 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:""}
如果想获得更多对文件操作的能力请使用“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 TABLEPersons(Id_P int, LastName varchar(255), FirstName varchar(255), A ddressvarchar(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:[] 查询到的数据
}); //}
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 沙箱位置: <widget id="A1234567890123", sandbox="myBox"> 通过以上配置,app 将在 Android 手机的外部存储(如 SD 卡)的根目录中建立名为“myBox” 的目录,并以该目录作为本 app 的沙箱目录,app 运行过程中动态产生的资源文件将存储在该目录及其子目录下,并且这些资源不会随着 app 的卸载而清除。
7.资源访问协议
APICloud 资源被存放在 app 安装包(ipa 包或者 apk 包)中或应用沙箱中。沙箱分为 APICloud 应用虚拟沙箱和 Native 应用真实沙箱,真实沙箱是操作系统为 app 在设备内部存储上分配的空间,不可见,只允许 app 本身访问。访问这些位置的资源可以使用如下协议:
• widget://(访问安装包中的资源,根目录指向你的项目代码根路径,即 widget路径。只读属性);
•fs:/(/访问APICloud应用虚拟沙箱中资源,可读可写);
•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 = ret.url;
else{} //处理错误 });
上述代码首先在参数中指定了要缓存的远程图片路径(url),在之后的回调函数中判断是否缓存成功(if(ret && ret.status == true){}),如果成功就可以使用 ret.url 来更新 <img> 标签。ret.url 是图片缓存到本地后的路径。
这里实现了图片缓存,app 在第一次从指定位置加载图片后会缓存到本地存储上面,下次使用时会直接调用缓存,以此提升加载速度和渲染效率。