apicloud開發文檔中，前端開發框架指的就是，類似jq\js的語法： https://docs.apicloud.com/Front-end-Framework/framework-dev-guide。
api對象就只的是：app的方法。
1.安卓滑動關閉窗口
在IOS設備上可以通過滑動來關閉win，在安卓默認是不可以。細看下文檔其實也很的簡單，監聽事件里面的swiperight：
如果一個窗口是先打開win再嵌套frame的打開的方法如下
apiready = function(){ api.addEventListener({ name:'swiperight' },function(ret,err){ api.closeWin({ name: 'win窗口name' }); }) }; 如果是直接用win打開的窗口 apiready = function(){ api.addEventListener({ name:'swiperight' },function(ret,err){ api.closeWin({}); }) };
2.安卓點擊兩次退出應用
//兩次退出 var first = null; function back(){ api.addEventListener({ name: 'keyback' }, function(ret, err){ if (!first) { first = new Date().getTime(); api.toast({ msg: '再按一次退出', duration:1500, location: 'bottom' }); setTimeout(function() { first = null; }, 1000); } else { if (new Date().getTime() - first < 1000) { api.closeWidget({ silent:true }); } } }); } 把back方法放在apiready里面就OK了
3.安全保存你的各種key
在app中，有時我們會使用到一些第三方的key，如果讓這些KEY更安全呢，其實官方也有提高，很多朋友卻沒有留意
在res文件夾中新建一個key.xml
<?xml version="1.0" encoding="UTF-8"?> <security> <item name="key0" value="value0"/> <item name="key1" value="value1"/> <item name="key2" value="value2"/> <item name="key3" value="value3"/> </security> 然后通過 api.loadSecureValue({ key:'key名' }, function(ret, err) { var value = ret.value; }); 來調用。雲編譯的時候會自動加密的，不過在真機測試的時候是沒有用的，需要雲編譯才可以。在打包的時候可以統一配置下
4。利用本地文件存儲實現秒開和離線瀏覽
在api對象里面有兩個方法readFile和writeFile，我們可以利用這兩個來搞一下，而且還會對圖片自動緩存的
通常我們的列表頁數據是json的，我們可以對這個json數據循環下
function writeFile(json){ var cacheDir = api.cacheDir; for(var i=0;i<json.length;i++) { var id = json.id;//你的內容id var data = json;//內存數據 api.writeFile({ path: cacheDir+'/'+id+'.json', data: JSON.stringify(data) }, function(ret, err){ }) } }
注意要通過JSON.stringify轉換下格式，否在在IOS上寫入不成功 然后在打開內容頁的時候先看下有沒有對應id文件存在 function readFile(){ var cacheDir = api.cacheDir; api.readFile({ path: cacheDir+'/'+id+'.json' }, function(ret, err){ if(ret.status){ var jsonData = JSON.parse(ret.data); } else{ //從服務器讀取 } }); } 還要注意，再次轉換下數據格式
5.打開頁面有閃動？那讓他閃的個性點
很多開發者在開發的時候會遇到頁面打開閃動的問題，不管是從服務器讀取還是從本地緩存讀取都有可能會閃動。既然解決比較麻煩，我們就利用CSS3動畫，讓他閃的個性點。很簡單，給元素ID加個fade效果
比如你的頁面內容全部在<div id="wrap"></div>里面。那么我們就給wrap弄個CSS動畫，漸入效果，下面是css代碼
#wrap {-webkit-animation: fadeIn .5s ease both;animation: fadeIn .5s ease both;}
@-webkit-keyframes fadeIn {
from { opacity: 0.3; }
to { }
}
@keyframes fadeIn {
from { opacity: 0.3; }
to { }
}
6.安卓最小化你的APP
在安卓開發的時候我們會使用最小化應用，不讓其退出，其實官方已經提供了這個api方法，只是可能隱蔽點不容易發現
api.toLauncher();
7.安卓上巧實現日期加時間的選擇
在使用openPicker時我們知道安卓設備是不支持同時選擇日期加時間的，也就是date_time屬性。又不想使用插件，也不想選擇完日期后在點擊按鈕選擇時間，那么我們將openPicker稍微改一下實現時間+日期的選擇
思路：判斷如果是安卓設備，則先openPicker打開時間選擇，時間選擇完成后在openPicker一下選擇日期。
if(api.systemType=='android'){ api.openPicker({ type: 'date', title:'選擇時間' },function(ret,err){ var year = ret.year; var month = ret.month; var day = ret.day; //這是選擇的是日期 var value1 = year+'-'+month+'-'+day; //選擇時間 api.openPicker({ type: 'time', title:'選擇時間' },function(ret,err){ var hour = ret.hour; var minute = ret.minute; //選擇的時間 var value2 = hour+':'+minute; //組裝一下 alert(''+value1+' '+value2+''); }); }); }
使用此代碼，可自動循環播放視頻了哦，不需要全屏 <video id="player" src="widget://res/video.mp4" loop autoplay webkit-playsinline></video> 在IOS上可以自動播放，在安卓下還需要加一句 $api.byId('player').play(); （這代碼需要視頻加載完后才能調用，不過我都是包內的視頻源，沒有測需要緩沖的視頻） 如果要緩沖，在安卓下可以 <video id="player" src="widget://res/video.mp4" loop controls webkit-playsinline></video> 讓用戶自己通過點擊再播放
9、fastclick 的使用方法
$(function(){
FastClick.attach(document.body);
});
10、頁面跳轉，並傳遞參數
function openWin(id) { api.openWin({ name : 'list_window', url : 'list_window.html', bounces : false, animation : { type : "push", duration : 300 }, //出境國內周邊 游輪 分別對應一個 id pageParam : { key : id } }); };
下個頁面接受參數
var typeName = api.pageParam.key;
11、多個li點擊某一個，那個元素高亮顯示（toggle）
<ul class="choose_det"> <li tapmode="" onclick="chooseType(this);">2天</li> <li tapmode="" onclick="chooseType(this);">3天</li> <li tapmode="" onclick="chooseType(this);">4天</li> <li tapmode="" onclick="chooseType(this);">10天</li> <li tapmode="" onclick="chooseType(this);">10天以上</li> </ul>
function chooseType(obj){ $api.toggleCls(obj, 'active'); };
上面的方法是 toggle 的方法，點擊某一個，某個高亮，其余恢復默認代碼如下
function cPhoneType(obj){ var ele = $api.byId('phoneTypeHtml'); var selectList = $api.domAll(ele, '.tabThree'); for(var i = 0; i < selectList.length; i++){ $api.removeCls(selectList[i], 'activeC'); } $api.addCls(obj, 'activeC'); }
12、某些頁面數據變化，例如規格選擇，選的比較多，改變之后在列表頁要監聽到選擇的規格，這個時候傳遞參數會比較多，就用一個監聽事件
在選擇規格的頁面，點擊確定的時候，發送一個全局的監聽事件
api.sendEvent({ name: 'myChoose', extra: { days: '2', data: '2013-2-3' } });
在列表頁獲取這個監聽事件，當傳遞的值發生變化的時候，做出一些相應的改變或者動作
api.addEventListener({ name: 'chooseData' }, function(ret, err) { //alert(JSON.stringify(ret.value)); });
13、獲取點擊的對象的自定義屬性。
<li class="'+ classLiName +'" dateId="'+ dateId +'" onclick="chooseDay(this)" tapmod="">
tapmod是為了點擊更順利。
function chooseDay(obj){ var dateId = $api.attr(obj,'dateId'); console.log(dateId) }
還有一種直接傳遞的方式
<li class='list-item' onclick='openDetailWin(\"" + item.id + "\",\"" + item.title + "\");'>
function openDetailWin(zxId, title) { var delay = 0; if ("ios" != api.systemType) delay = 300; api.openWin({ name : 'news_detail_module', url : 'zx/news_detail_module.html', delay : delay, bounces: false, pageParam: { id: zxId, title: title } }); }
14、apicloud中，例如頭部有一個返回的這種，一般來說都是兩個頁面，頭部是一個頁面，然后中間在加載一個frame。
打開關閉window
api.openWin({ name : 'line_detail', url : 'line_detail.html', bounces: false, animation:{ type: "push", duration:300 }, pageParam : { key : id } });
api.closeWin({ bounces: false, animation:{ type: "push", duration:300, subType:"from_left" } });
15、常用彈出
/*** 提示信息 ***/ api.toast({ msg: '手機號格式有誤', duration: 1500, location: 'middle' });
/*** 加載動畫 ***/ api.showProgress({ title : ' ', text : '玩命加載中...', modal : true });
api.hideProgress();