APICloud 社区从1开始学晋城(二)

智博文化传播 2016-10-03

展开全文

本帖最后由老邮局于 2015-7-23 20:47 编辑

上一篇我们说道底部导航栏中的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:'https://d.'
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调用。
行18中，ret变量就是查询后服务器返回的数据：

一个标准json格式的对象数组

2、经模板引擎生成静态html内容
第一步中，服务器返回了数据ret，紧接着交给模板引擎进行渲染(行58-61)，就是按照模板中的定义进行数据的格式化输出。
(我们引用的是第三方的模板引擎doT.js)
main.html

14 <script type="text/javascript" src="../script/doT.min.js"></script>

复制代码

我们先看下模板怎么定义的
main.html

15 <script id="banner-template" type="text/x-dot-template">
16 {{ for(var i=0; i<it.length; i++) { }}
17 <div>
18 <img src="{{=it[i].poster.url}}" />
19 <label><div class="blur"></div>{{=it[i].title}}</label>
20 </div>
21 {{ } }}
22 </script>
23 <div id='slide' class='swipe'>
24 <div class='swipe-wrap' id="banner-content"> // 这个div是幻灯片的容器
25 </div>
26 <ul id="pointer">
27 <li><a class="active"></a></li>
28 <li><a></a></li>
29 <li><a></a></li>
30 </ul>
31 </div>

复制代码

行15-22定义模板，前面提到的getData()会将返回的json数据传递给模板引擎，然后根据返回数据的条数(it.length)生成对应数量的div。
行24是幻灯片的div，上一步生成的div全部要放到这个div容器中。

还是云里雾里的哈，我们看看模板引擎到底是如何使用和工作(行58-61)：

1、在html中定义模板引擎，包括模板(行15-21)、用于显示模板的容器(行24)
2、在js中，找到用于显示模板的容器，然后将模板编译的内容塞进容器中。
main.js

58 var content = $api.byId('act-content'); // 找到用于显示模板的容器
59 var tpl = $api.byId('act-template').text; // 找到模板变量
60 var tempFn = doT.template(tpl); // 进行模板的编译(生成匿名函数，用于处理生成最终html)
61 content.innerHtml = tempFn(ret); // 根据所给数据组装成静态的html

复制代码

(行60) , 进行模板编译，将会生成如下函数：

function anonymous(it) {
var out='';
for(var i=0; i<it.length; i++) {
out+=' <div> <img src="'+(it[i].poster.url)+'" /> <label><div class="blur"></div>'+(it[i].title)+'</label> </div>';
}
return out;
}

复制代码

(行61)，进行赋值，最终生成静态的html代码：
main.html

30 <div id='slide' class='swipe'>
<div class='swipe-wrap' id="banner-content"> //幻灯片
<div> // 第一张幻灯片，包括图片和标题
<img src="http://file." />
<label><div class="blur"></div>APICloud</label>
</div>
<div> // 第二张幻灯片
<img src="http://www." />
<label><div class="blur"></div>0hi猿团</label>
</div>
<div> // 第三张幻灯片
<img src="http://。。。" />
<label><div class="blur"></div>毛豆</label>
</div>
</div>
..........................
</div>

复制代码

Sorry，我还没完呢，我们再来做幻灯片右下角那个小导航：

main.html

33 <ul id="pointer">
34 <li><a class="active"></a></li>
35 <li><a></a></li>
36 <li><a></a></li>
37 </ul>

复制代码

main.js

1 function initSlide(){
2 var slide = $api.byId('slide');
3 var pointer = $api.domAll('#pointer a');
4 window.mySlide = Swipe(slide, { // 初始化 swipe.js
5 // startSlide: 2, // 起始幻灯片
6 auto: 3000, // 自动切换时间间隔
7 continuous: true, // 是否循环滑动，默认值为true
8 disableScroll: true, // 停止任何触及此容器上滚动页面，默认值flase
9 stopPropagation: true, // 停止事件传播
10 callback: function(index, element) {
11 var actPoint = $api.dom('#pointer a.active'); // 前一个被激活的小圆点
12 $api.removeCls(actPoint,'active'); // 去掉激活样式
13 $api.addCls(pointer[index],'active'); // 添加激活样式
14 },
15 transitionEnd: function(index, element) { // 滑动过渡时调用的函数
16
17 }
18 });
19 }

复制代码

另外，大家注意到没有，apicloud的端api中有一个幻灯片实现scrollPicture组件，这里并没有采用，而是引入第三方的幻灯片插件swipe.js。主要原因在于scrollPicture组件会浮动在页面上，不会随页面下拉而下拉，所以咯。。。运行swipe.js非常简单，三步走：
1、html中布局