apicloud中的常用的小知识点
1.确认框
api.confirm({
title: '退出',
msg: '点击确定退出程序',
buttons:['确定', '取消']
},function(ret,err){
if(ret.buttonIndex == 1){
alert('sd')
}
});
2.toast弹窗
api.toast({
msg: '网络错误',
duration: 3000,
location: 'bottom'
});
3.加载框
api.showProgress({
style: 'default',
title: '正在上传中...',
text: 10+ '%',
modal: true
});
加载完成掉用关闭
api.hideProgress();
4.缓存读取设置清除
$api.setStorage('name','key');//设置
$api.getStorage('name');//获得指定name的值
$api.rmStorage('name');//清除指定name的值
$api.clearStorage();//清楚全部本地数据
5.头部自动适应手机的状态栏 不挡住状态栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
html,
body {
width: 100%;
font-family: PingFang-SC-Medium;
}
.topbar {
width: 100%;
height: 45px;
background: #f8f8f8;
border-bottom: 1px solid #e4e4e4 !important;
overflow: hidden;
}
.topbar .box1 {
width: 15%;
height: 45px;
float: left;
}
.topbar .box1 .back {
width: 11px;
height: 20px;
margin-top: 13px;
margin-left: 17px;
}
.topbar .box1 .back img {
width: 100%;
height: 100%;
}
.topbar .box2 {
width: 70%;
height: 45px;
float: left;
}
.topbar .box2 p{
text-align: center;
line-height: 45px;
font-size: 17px;
color: #000000;
font-weight: bold;
}
.topbar .box3 {
width: 15%;
height: 45px;
float: left;
}
.topbar .box3 .serch{
width: 20px;
height: 15px;
margin-top: 17px;
margin-left: 6px;
}
.topbar .box3 .serch img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="topbar" id='titlebox'>
<div class="box1">
<div class="back" onclick="closeWin()">
<img src="../../image/courseback.png" alt="">
</div>
</div>
<div class="box2" >
<p id='name'>我的列表</p>
</div>
<div class="box3">
<div class="serch" onclick="serchinfo()"></div>
</div>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/apiCloud.js"></script>
<script>
apiready = function() {
//主要代码
var header = document.getElementById('titlebox');
$api.fixStatusBar(header);
}
</script>
</body>
</html>
6.app一般页面一般有个头部页面和下面的内容页面，建议写在两个页面，
比如index.html页面 如果头部页面和内容页面全部写在一个页面，当内容大于手机屏幕，向上滚动就会压住手机状态栏，
所以建议头部内容写在两个页面 结构index.html是头部index_body.html是内容页面
让打开index.html的时候自动加载下面的Frame index_body.html页面
index_body.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
html,
body {
width: 100%;
font-family: PingFang-SC-Medium;
}
.topbar {
width: 100%;
height: 45px;
background: #f8f8f8;
border-bottom: 1px solid #e4e4e4 !important;
overflow: hidden;
}
</style>
</head>
<body>
<div class="topbar" id='titlebox'>
里面写标题和返回按钮样式根据要求自定义
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/apiCloud.js"></script>
<script>
apiready = function() {
// 适配状态栏
var header = document.getElementById('titlebox');
$api.fixStatusBar(header);
var parms = api.pageParam;
//自动加载内容页面
api.openFrame({
name: 'index_body',
url: './index_body.html',
rect: {
x: 0,
y: api.safeArea.top+46, //后面的数字可以自己调整 就是头部导航的高度 往上走1-//2个像素
w: 'auto',
h: 'auto'
},
});
}
</script>
</body>
</html>
index_body.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
</style>
</head>
<body>
<div>
<ul>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>333333</li>
</ul>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/apiCloud.js"></script>
<script>
apiready = function() {
}
</script>
</body>
</html>
当内容页面超过手机屏幕的时候，下面的内容只会往标题下面往上移动
如图