apicloud開發文檔中，前端開發框架指的就是，相似jq\js的語法： https://docs.apicloud.com/Front-end-Framework/framework-dev-guide。php
api對象就只的是：app的方法。css
1.安卓滑動關閉窗口
在IOS設備上能夠經過滑動來關閉win，在安卓默認是不能夠。細看下文檔其實也很的簡單，監聽事件裏面的swiperight：
若是一個窗口是先打開win再嵌套frame的打開的方法以下html
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.xmlandroid
<?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數據循環下ios
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代碼web
#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方法，只是可能隱蔽點不容易發現json
api.toLauncher();
7.安卓上巧實現日期加時間的選擇
在使用openPicker時咱們知道安卓設備是不支持同時選擇日期加時間的，也就是date_time屬性。又不想使用插件，也不想選擇完日期後在點擊按鈕選擇時間，那麼咱們將openPicker稍微改一下實現時間+日期的選擇
思路：判斷若是是安卓設備，則先openPicker打開時間選擇，時間選擇完成後在openPicker一下選擇日期。api
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> 讓用戶本身經過點擊再播放
九、fastclick 的使用方法
$(function(){
FastClick.attach(document.body);
});
十、頁面跳轉，並傳遞參數
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;
十一、多個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');
}
十二、某些頁面數據變化，例如規格選擇，選的比較多，改變以後在列表頁要監聽到選擇的規格，這個時候傳遞參數會比較多，就用一個監聽事件
在選擇規格的頁面，點擊肯定的時候，發送一個全局的監聽事件
api.sendEvent({
name: 'myChoose',
extra: {
days: '2',
data: '2013-2-3'
}
});
在列表頁獲取這個監聽事件，當傳遞的值發生變化的時候，作出一些相應的改變或者動做
api.addEventListener({
name: 'chooseData'
}, function(ret, err) {
//alert(JSON.stringify(ret.value));
});
1三、獲取點擊的對象的自定義屬性。
<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 }
});
}
1四、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"
}
});
1五、經常使用彈出
/*** 提示信息 ***/
api.toast({
msg: '手機號格式有誤',
duration: 1500,
location: 'middle'
});
/*** 加載動畫 ***/ api.showProgress({ title : ' ', text : '玩命加載中...', modal : true });
api.hideProgress();