|
前言:
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图:
|
本帖子中包含更多资源 您需要 登录 才可以下载或查看,没有帐号?立即注册
x
评分
-
2
查看全部评分
-
|