使用APICloud从1开始写玩转晋城-二首页main部分.docVIP

本帖最后由 老邮局 于 2014-12-1 20:09 编辑上一篇我们说道底部导航栏中的openTab()，用于打开不同的header和main，这里我们说“首页”中main部分：1、首页中的main可以分为三个部分：幻灯片(红色)、常用分类(蓝色)、活动分类(绿色)2、蓝色部分界面是固定的，我们使用本地图片写死在程序里面3、红色和绿色部分，我们希望可以根据服务器内容实时的更新。首先蓝色部分我们按下不表，“脉脉”中已经表过啦；我们的主要精力放在幻灯片部分。红色部分（幻灯片）：简要描述下数据调用过程：1、连接服务器，查询数据库并返回? ?? ???当首次初始化此页面，会调用getData(), 函数会链接到服务器，查询数据库中的数据返回到程序中进行显示。由于数据是动态的，所以html中我们就不能写死，要用变量代替,以便数据进行替换。main.js 40??function getData(){ 41? ?? ?? ? api.showProgress({ 42? ?? ?? ?? ?? ?? ?title:加载中, 43? ?? ?? ?? ?? ?? ?model:false 44? ?? ?? ? }); 45 46? ?? ?? ? var model = api.require(model);? ?? ? // 47? ?? ?? ? var query = api.require(query); 48 49? ?? ???model.config({ 50? ?? ?? ?? ?? ? appKey:02***07C-****-C2FF-****-F816****D17A,? ?? ?? ?? ?? ???//appKey，apicloud后台可获得 51? ?? ?? ?? ?? ? host: 52? ?? ???}); 53? ?? ???query.createQuery(function(ret,err){ 54? ?? ?? ?? ?? ? if (ret ret.qid){? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? // 如果成功返回句柄ret.qid 55? ?? ?? ?? ?? ?? ?? ?? ?var queryId = ret.qid; 56? ?? ?? ?? ?? ?? ?? ?? ?model.findAll({class:activity,qid:queryId},function(ret,err){// 查询表activity中所有内容 57? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? if (ret){ 58? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? var content = $api.byId(act-content);? ?? ?? ?? ?? ?? ?// 获取幻灯片显示容器 59? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? var tpl = $api.byId(act-template).text;? ?? ?? ?? ?? ???// 获取模板引擎的内容，以便21行进行模板的编译，后面会说 60? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? var tempFn = doT.template(tpl);? ?? ?? ?? ?? ?? ?? ?? ?? ? // 根据模板的内容，进行编译，其实就是生成一个匿名函数 61? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? content.innerHTML = tempFn(ret);? ?? ?? ?? ?? ?? ?? ?? ?// 根据实际数据，填充模板 62 63? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? api.hideProgress(); 64? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???}else{ 65? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? //error 66? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? } 67? ?? ?? ?? ?? ?? ?? ?? ?}); 68? ?? ?? ?? ?? ? } 69? ?? ???}); 70??} 复制代码 getData()完成了连接服务器数据库，查询数据并返回。就固定这么写的，几个api