APP开机引导页面实现
开机引导页面对APP来说非常重要，有助于客户利用引导页引导用户体验、重大活动的推出，如果用户打开APP滑动页面时就出现了白屏或者图片变形......开发者们，你们想过怎么向金主爸爸交代吗?
今天掌握如下代码就可以防患于未然，这是一位开发者通过多个项目的实践得到的思路，且学且珍惜吧。
APP开机引导页面实现思路
● 设置一个变量保存起来，识别是否启动过引导页面;
● 采用open frame group，设置图片为背景，避免在ANDROID下会造成每次生成过慢，而屏幕发白;
● 再做个页面，作为动作的触发，进入到APP正页，其中图片最好按照开机页面的大小来做。
代码：
function welcome() {
// 欢迎页
api.openFrameGroup({
name : 'welcome',
bounces : false,
index : 0,
rect : {
x : 0,
y : 0,
w : 'auto',
h : 'auto',
marginLeft:0,
marginTop:0,
marginBottom:0,
marginRight:0
},
scrollEnabled : true,
preload:1,
frames : [{
name : 'w1',
// url : './html/welcome/w1.html',
bounces : false,
opaque : true,
bgColor : 'widget://html/assets/img/s1.jpg'//''#000'
}, {
name : 'w2',
// url : './html/welcome/w2.html',
bounces : false,
opaque : true,
bgColor : 'widget://html/assets/img/s2.jpg'//''#000'
}, {
name : 'w3',
// url : './html/welcome/w3.html',
bounces : false,
opaque : true,
bgColor :'widget://html/assets/img/s3.jpg'//''#000'
}, {
name : 'w4',
url : './html/welcome/start.html',
bounces : false,
opaque : true,
vScrollBarEnabled:false,
hScrollBarEnabled:false ,
bgColor : 'widget://html/assets/img/s4.jpg'//''#000'
}]
}, function(ret, err) {
var index = ret.index;
var name = ret.name;
if (index == 0) {
$api.setStorage('firstStart', true);
}
});
}
start.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
body{
}
#main {
width:100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="wrap" tapmode>
<div id="main"></div>
<div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
};
</script>
</html>
更多APP开发消息，请关注www.apicloud.com