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();