开发app心得+db模块处理app缓存

zjjay

前言：
1、先说说本人开发一个app的过程，准备条件：①前端：aui.css+api.js+doT.min.js+echo.min.js+hammer.min.js+swiper.min.js+zepto.min.js  ②后端：webservice
2、第一天解决窗口之间的跳转、请求数据load封装，将头部和底部写成共用的，这样就只要在之间套用Framegroup和Frame就可以了，其他的可以结合win+Frame来完成，这样的结构很利于开发进度。
3、第二天编写登录、注册、密码之类编写，登录与注册成功主要通过sendEvent事件广播出去，需要重新获取用户信息的地方addListenEvent做监听，先广播事件出去再关闭当前Win，主要熟悉事件机制传播sendEvent。
4、第三天主要处理banner的缓存，页面按钮缓存，按钮为何需要缓存主要模仿京东支付宝之类的app，逢年过节变换皮肤或者按钮达到那种效果，写缓存一个就是需要与你的目标建立对应关系，利用sqlite存入数据库，当判断没网或者有更新的地方就行更新。图片文件如果进行更新，删除原来的缓存文件，将新的缓存地址存到数据库，利用异步在默默地缓存文件，把命令放入队列进行处理。
5、后面就是进行一些app的业务处理、实时通讯、推送等等。最后准备引导页之类的干货，还可以使用缓存将广告嵌入进来，下次用户打开就可以弹出广告。话就说到这里！！！
6、js文件分享在附件里，不明白的可以咨询：    O(∩_∩)O哈哈~  apicloud真的不错，对于熟练来说几天出一个app很简单。。。。

分享：
1、db模块的封装是借助了 @必姆镇的码农 的基础上再进行了修改。这里值得注意的是：他是利用文件fs进行copy的方式，就是在项目里先存放一个db文件(widget)，然后利用fs的copyTo进行copy到fs://下，但是如果你的app打包的时候是加密处理的，那么即便你复制成功，复制后的那个db文件是不可以被操作了的，原因就是ac加密打包后的文件是不可以进行操作的！这点值得注意，换一个思维就是利用fs在app运行时去创建db文件，这样就解决了问题。感谢对db模块的封装，加快了开发速度！(db文章链接戳这)2、js队列：

//队列
var ExecQueue = function() {  
    this.queue = [];  
};  
ExecQueue.prototype = {  
    add : function(fn, args, time) {  
        this.queue.push( {  
            fn : fn,  
            args : args,  
            time : time  
        });  
    },  
    exec : function() {  
        var delay = 0;  
        for ( var i = 0; i < this.queue.length; i++) {  
            var _this=this;  
            var f=function(idx){  
                return function(){  
                _this.queue[idx].fn.apply(_this,_this.queue[idx].args);  
                }  
            }(i);  
            setTimeout(f, delay);  
            delay += this.queue.time;  
        }  
    }  
}


3、request方法：
var server99Url = "",reqTime = new Date(),reqMethod = "",lastTimestamp = null;
function ajaxRequest(limit, method, datas, callBack) {
    if(api.connectionType.toLowerCase() == 'none'){
        H.$toast('…(⊙o⊙)…断网了…');
        var ret = {code:'-1'};
        callBack(ret);
        return;
    }
    if(!limit) limit = false;
    //判断相同方法请求不能大于3秒
    if(limit){
            if(reqMethod==datas.method&&((new Date().getTime()-reqTime.getTime())/1000)<4){
                    H.$toast('频繁访问，休息一下喝杯茶...');
                var ret = {code:'-2'};
                callBack(ret);
                return;
            }
    }
    datas = H.$com.extend({"v":"1.0","format":"json","lastTimestamp"api.getStorage('lastTimestamp')},datas);
    reqTime = new Date(),reqMethod = datas.method;
    api.ajax({
        url: server99Url,
        method: method,
        cache: false,
        timeout: 60,
        dataType: 'json',
        data: {
            values: datas
        }
    }, function (ret, err) {
        try{ret.lastTimestamp && ($api.setStorage('lastTimestamp',ret.lastTimestamp));}catch(e){}
        callBack(ret, err);
    });
}

4、db操作处理：
function ajaxBanner(){
        var content = $('.swiper-wrapper');
    content.html("");
        //请求获取banner
        ajaxRequest("","post",{"method":"接口方法"},function(ret, err){
                if (ret && ret.code==0) {
            var jsonData = ret;
            setTimeout(function () {
                    jsonData && jsonData.list && jsonData.list.length>0 && dealbannerlist(jsonData.list);//异步
                　　　}, 100);
        } else {
                //读取db文件
                if(api.systemType == "ios") $sqlite_api.clearDb();
                var optionId = $sqlite_api.createObj();
                        $sqlite_api.config(optionId,'数据库表名称','数据库名称').order(optionId,"sort asc").where(optionId,{"type":0,"isShow":1}).select(optionId,function(status,data){
                            if(status&&data.length>0){
                                    var tempHtml = doT.template($('#bannercacle-template').html())(data);
                            content.append(tempHtml);
                            api.parseTapmode();
                            }else{
                                    var tempHtml = '<div class="swiper-slide" tapmode data-href=""><img src="../image/index/banner.jpg" width="100%" height="150"/></div>';
                                content.append(tempHtml);
                            }
                        });
        }
        });
};

function dealbannerlist(list){
        //获取数据库记录
        if(api.systemType == "ios") $sqlite_api.clearDb();
        var optionId = $sqlite_api.createObj();
        $sqlite_api.config(optionId,'数据库表名称','数据库名称').order(optionId,"sort asc").where(optionId,{"type":0,"isShow":1}).select(optionId,function(status,data){
            if(status&&data.length>0){
                    for(var i=0;i<list.length;i++){
                            mark:
                                for(var j=0;j<data.length;j++){
                                        if(list.bannerId==data[j].id && list.imageUrl==data[j].url){
                                                list.curl = data[j].curl;//TODO: 还需要判断缓存文件是否存在
                                                break mark;
                                        }
                                }
                        }
            }
            var tempHtml = doT.template($('#banner-template').html())(list);
        $('.swiper-wrapper').append(tempHtml);
        setTimeout(function () {
                bannercacle(list);//异步
        　　　}, 100);
        });
}
//缓存首页图片
function bannercacle(list){
        if(H.$com.isNullOrUndefined(list)) return;
        var optionId9 = $sqlite_api.createObj();
    $sqlite_api.config(optionId9,'数据库表名称','数据库名称').where(optionId9,{"type":0}).save(optionId9,{"isShow":0},function(status,msg){
            var execqueue = new ExecQueue();
                $.each(list, function(index, item){
                        var imgData = {
                                imgId : H.$com.isNullOrUndefined(item.bannerId)?null:item.bannerId,
                                imgUrl : item.imageUrl,
                                imgHref : !item.href && H.$com.isNullOrUndefined(item.href)?'':item.href,
                                imgSort : H.$com.isNullOrUndefined(item.sort)?0:item.sort,
                                imgDesc : H.$com.isNullOrUndefined(item.title)?'':item.title,
                                imgType : 0
                        }
                        execqueue.add(queueDealImg,[imgData],100);
                });
                execqueue.exec();
    });
}
function queueDealImg(imgData){
H.$imageCache(function(ret, err){
                if (ret && ret.status) {
                        var reUrl = ret.url;
        var sql = 'create table 数据库表名称(id integer primary key autoincrement,url varchar(255),curl varchar(500),href varchar(50),'+
                'desc varchar(500),sort integer,isShow integer,type integer,add_time datetime)';
                var optionId = $sqlite_api.createObj();
                $sqlite_api.config(optionId,'','数据库名称').exec(optionId,sql,function(status,msg){
                var optionId = $sqlite_api.createObj();
                        $sqlite_api.config(optionId,'数据库表名称','数据库名称').limit(optionId,1).where(optionId,{"id":imgData.imgId}).select(optionId,function(status,data){
                            if(status&&data.length>0){
                                    var url = data[0].curl;//缓存地址
                                    var dId = data[0].id;
                                    if(url!=reUrl){
                                            //删除之前的文件
                                            api.require('fs').remove({path: url},function(ret,err){});
                                    }
                                    //更新数据
                                    var optionId = $sqlite_api.createObj();
                                    var datajson = {"url":imgData.imgUrl,"curl":reUrl,"href":imgData.imgHref,"desc":imgData.imgDesc,"sort":imgData.imgSort,"type":imgData.imgType,"isShow":1};
                                    $sqlite_api.config(optionId,'数据库表名称','数据库名称').where(optionId,{"id":dId}).save(optionId,datajson,function(status,msg){});
                            }else{
                                    var arr = [{"id":imgData.imgId,"url":imgData.imgUrl,"curl":reUrl,"href":imgData.imgHref,"desc":imgData.imgDesc,"sort":imgData.imgSort,"isShow":1,"type":imgData.imgType,"add_time":H.$com.getNowDateFormat("-",":",true)}];
                                        var optionId2 = $sqlite_api.createObj();
                                        $sqlite_api.config(optionId2,'数据库表名称','数据库名称').add(optionId2,arr,function(status,msg){});
                            }
                        });
                   });
    }
        },img99BannerUrl+"/"+imgData.imgUrl);
}


demo图：

APICloud官方

感谢分享

Setsail_帆

xuhq

大神太牛鼻了

zjjay

xuhq 发表于 2016-3-17 18:47
大神太牛鼻了

……… 小强

alexsong

很不错  谢谢分享

trtrtr666

看了里面的源码，感觉有点问题啊
var filepath = u.getDbPath(u.storeArr[optionId].dbName);
        //先检查fs 有无数据库文件
        u.fs.exist({
            path: filepath
        },function(ret,err){
                //alert("exist  "+$api.jsonToStr(ret)+"   ");
            if(ret.exist){
                //找到数据库了 并查询看能用不
                u._simpleOpenDb(optionId,filepath,success,fail);
            }else{
                    //通过fs创建文件
                                u.fs.createFile({
                                    path: filepath
                                },function( ret, err ){        
                                    //alert("createFile  newPath："+filepath+"    result："+$api.jsonToStr(ret)+"   err："+$api.jsonToStr(err));
                    if (ret.status) {
                        u._simpleOpenDb(optionId,filepath,success,fail);
                    }else {
                        if(typeof fail == 'function'){
                            if(err.code != undefined){
                                var msg = u.fsCode[err.code];
                            }else{
                                var msg = '文件创建失败';
                            }
                            fail(msg);
                        }
                    }
                                });
            }
        });     

db.openDatabase本来在没有数据库db文件的情况下会直接创建数据库文件，不需要fs模块再去创建一个db文件了吧，况且使用fs创建的db文件可以用db模块打开数据库吗？这一块我也有点迷糊了，像楼主请教一下。        

tcld2269

为什么不采用文件的方式处理缓存，将数据存储为json文件。感觉用db模块处理有点大材小用了。

ereymond

我的全部是用JSON传输。

yyyfx

感谢分享