apicloud apicloud

注册
查看: 15224|回复: 41

[APP开发技巧] 开发app心得+db模块处理app缓存

 

转正司机

UID:22430

主题:
27
帖子:
549
云币:
3971

我李白贼6APICloud粉丝连续签到100天一周年中秋节社会摇圣诞节老司机你吃屎!托马斯全旋女朋友单身狗

[APP开发技巧] 开发app心得+db模块处理app缓存

 
15224 41 | 发表于 2016-3-17 18:17:50 |阅读模式 | |
前言:
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图:

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

主题:
1102
帖子:
5126
云币:
2147214880

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2016-3-17 18:29:32 |
感谢分享

主题:
0
帖子:
1
云币:
4
发表于 2016-3-17 18:30:52 |

新手上路

UID:86241

主题:
9
帖子:
72
云币:
139
发表于 2016-3-17 18:47:26 |
大神太牛鼻了

转正司机

UID:22430

主题:
27
帖子:
549
云币:
3971

我李白贼6APICloud粉丝连续签到100天一周年中秋节社会摇圣诞节老司机你吃屎!托马斯全旋女朋友单身狗

 楼主| 发表于 2016-3-17 19:52:43 来自手机 |
xuhq 发表于 2016-3-17 18:47
大神太牛鼻了

……… 小强

主题:
0
帖子:
25
云币:
2413
发表于 2016-3-18 08:47:01 |
很不错  谢谢分享

新手上路

UID:108982

主题:
17
帖子:
111
云币:
149
发表于 2016-3-18 11:14:04 |
看了里面的源码,感觉有点问题啊
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模块打开数据库吗?这一块我也有点迷糊了,像楼主请教一下。        

主题:
18
帖子:
88
云币:
440
发表于 2016-3-18 11:25:01 |
为什么不采用文件的方式处理缓存,将数据存储为json文件。感觉用db模块处理有点大材小用了。

驾校小白

UID:280762

主题:
0
帖子:
28
云币:
86
发表于 2016-3-18 12:29:34 |
我的全部是用JSON传输。

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2016-3-18 12:44:40 |
感谢分享
12345下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表