美文网首页
APICloud开发者进阶之路 |本地存储和图片缓存

APICloud开发者进阶之路 |本地存储和图片缓存

作者: APICloud | 来源:发表于2018-07-09 11:09 被阅读0次
    书封面.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"// 文件路径,支持绝对路径和文件路径协议如 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 沙箱位置: <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应用虚拟沙箱中资源,根目录指向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 = ret.url;
    else{
    } //处理错误
    });

    上述代码首先在参数中指定了要缓存的远程图片路径(url),在之后的回调函数中判断是 否缓存成功(if(ret && ret.status == true){}),如果成功就可以使用 ret.url 来更新 <img> 标签。ret.url 是图片缓存到本地后的路径。

    这里实现了图片缓存,App 在第一次从指定位置加载图片后会缓存到本地存储上面,下次 使用时会直接调用缓存,以此提升加载速度和渲染效率。
    关于 API 更详细的信息请参阅相关文档。

    相关文章

      网友评论

          本文标题:APICloud开发者进阶之路 |本地存储和图片缓存

          本文链接:https://www.haomeiwen.com/subject/xluzuftx.html