APICloud 社區(qū)從1開始學晉城(二)

智博文化傳播 2016-10-03

展開全文

本帖最后由老郵局于 2015-7-23 20:47 編輯

上一篇我們說道底部導航欄中的openTab(),，用于打開不同的header和main，這里我們說“首頁”中main部分：

1,、首頁中的main可以分為三個部分：幻燈片(紅色),、常用分類(藍色)、活動分類(綠色)
2,、藍色部分界面是固定的,，我們使用本地圖片寫死在程序里面
3,、紅色和綠色部分,，我們希望可以根據服務器內容實時的更新。

首先藍色部分我們按下不表，“脈脈”中已經表過啦,；我們的主要精力放在幻燈片部分,。

紅色部分（幻燈片）：
簡要描述下數據調用過程：
1,、連接服務器,，查詢數據庫并返回
當首次初始化此頁面，會調用getData(), 函數會鏈接到服務器,，查詢數據庫中的數據返回到程序中進行顯示,。由于數據是動態(tài)的，所以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,、經模板引擎生成靜態(tài)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); // 根據所給數據組裝成靜態(tài)的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),，進行賦值,，最終生成靜態(tài)的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, // 是否循環(huán)滑動，默認值為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中布局