APICloud項目紀要

一.頁面之間的傳遞參數
經過pageParam傳遞參數：

1 api.openWin({
2 name: 'ware',
3 url: './ware.html',
4 pageParam: {
5 wareId: 'w123'
6 }
7 });

在打開的窗口使用 api.pageParam 接收數據
 1 api.pageParam.wareId 

二.窗口之間的通訊機制：
1.跨窗口調用函數，相似於vue的子傳父
定義函數（攜帶數據）

1 api.execScript({
2 name: 'login', //窗口name
3 frameName: 'login_frame', //窗口下的framename
4 script: 'fnSetUserName(\"' + usernameValue +'\");'
5 });

另外一個窗口監聽函數獲得數據
 1 function fnSetUserName(data) { 2 console.log（data） //傳過來的數據 3 } 

 

2.自定義全局事件

1 api.sendEvent({
2 name: 'cityChange', //事件名
3 extra: {currentCity: cityList[index]} // 數據的 key 和 value
4 });

其餘頁面監聽事件獲得數據

 1 api.addEventListener({
 2 name: 'cityChange' //監聽的事件名
 3 }, function (ret, err) {
 4 if (ret) {
 5 if (ret.value) {
 6 // 獲得數據
 7 currentCityId = ret.value.currentCity.id;
 8 }
 9 }
10 });

 

 

三.dot模板引擎使用方法
1.script 標籤訂義一個模板

1 <script type="text/template" id="template">
2 {{~it:value:index}} //~it 默認處理方式爲數組
3 {{?0 == value.showType}} // if 條件編譯
4 <div class="content" tapmode onclick="fnOpenWareWin('{{=value.id}}');"></div> //經過 花括號= 的方式插值
5 {{??}} //至關於else
6 <div class="content" tapmode onclick="fnOpenWareWin('{{=value.id}}');"></div>
7 {{?}}
8 {{~}} // 結束標籤 ~
9 </script>

特別注意點：若是模板中有點擊事件，那麼須要調用 api.parseTapmode(); 方法
因爲是動態的將元素添加到Dom樹上，因此須要手動觸發tapmode檢查，列表中的元素才能實現點擊加速的效果

2.模板數據進行渲染

 1 function fnUpdata() {
 2         // 獲取頁面存放數據的位置
 3         var list = $api.byId('list');
 4         // 1. 編譯模板函數
 5         var tempFn = doT.template($api.byId('template').innerHTML);
 6         // 2. 屢次使用模板函數
 7         var resultText = tempFn(data);
 8 // 因爲是動態的將元素添加到Dom樹上，因此須要手動觸發tapmode檢查，列表中的元素才能實現點擊加速的效果
 9 api.parseTapmode();
10 }

 

四.圖片緩存

在有用到圖片的地方能夠執行一個onload方法，下面代碼寫在方法中

1 api.imageCache({
2 url: wareTypeList[api.pageParam.wareTypeIndex].banner.url
3 }, function (ret, err) {
4 if (ret && ret.success) {
5 banner.src = ret.url;
6 }
7 });

 

五.下拉刷新

下面代碼寫在  apiready 頁面初始化的方法中執行

 1 api.setRefreshHeaderInfo({
 2 visible: true,
 3 loadingImg: 'widget://image/refresh.png',
 4 bgColor: '#ccc',
 5 textColor: '#fff',
 6 textDown: '下拉刷新...',
 7 textUp: '鬆開刷新...',
 8 showTime: true,
 9 }, function(ret, err){
10 fnGetWareList() //從新請求數據的方法
11 //從服務器加載數據，完成後調用api.refreshHeaderLoadDone()方法恢復組件到默認狀態
12 });

 

六.上拉加載

此方法寫在 api.addEventListener 事件監聽函數中

 1 function initEventListenter() {
 2 // 上拉加載
 3 api.addEventListener({
 4 name: 'scrolltobottom',
 5 extra: {
 6 threshold: 300 //設置距離底部多少距離時觸發，默認值爲0，數字類型
 7 }
 8 }, function (ret, err) {
 9 fnGetWareList(true) //從新請求數據的方法
10 });
11 }
12 從新請求數據的方法的方法，傳遞一個參數，用來標識是下拉刷新，仍是上拉加載
13 fnGetWareList(load) {
14 if(load) {
15 skip += limit //頁數加上條數
16 } else {
17 skip = 0 // 設置頁數從0請求
18 }
19 }

從新請求數據方法成功後調用的更新數據的方法

 1 // 從新請求數據方法成功後調用的更新數據的方法
 2 function fnUpdateWareList(data_, load) {
 3 
 4     // 獲取要顯示在頁面的區域
 5     var list = $api.byId('list');
 6 
 7     // 編譯模板函數
 8     var tempFn = doT.template($api.byId('template').innerHTML);
 9 
10     // 使用模板函數生成HTML文本
11     var resultHTML = tempFn(data_);
12 
13     // 判斷是不是加載更多，若是是加載更多，則追加到list中
14     if (load) {
15         $api.append(list, resultHTML);
16         // 若是服務器端已經沒有更多數據返回，更新提示信息
17         if (data_.length < LIMIT) {
18             var pushStatus = $api.byId('pushStatus');
19             pushStatus.innerHTML = "沒有啦！";
20         }
21     } else {
22         // 不然，直接替換list中的內容
23         $api.html(list, resultHTML);
24     }
25 
26     // 因爲是動態的將元素添加到Dom樹上，因此須要手動觸發tapmode檢查，列表中的元素才能實現點擊加速的效果
27     api.parseTapmode();
28 }