apicloud免费实现最简单的启动页广告方法
1、已有项目可以忽略此步骤


1、我们要先将配置文件config.xml里面的autoLaunch改成false然后保存。设置成false我们就可以手动关闭开机画面。
配置启动页是否自动隐藏
字段名:autoLaunch
取值范围:true|false
默认值:true
描述:APICloud应用在启动时向用户展示一个启动界面,并控制该启动界面在适当的时候隐藏。如该字段置为false,则启动页需要开发者自行调相关接口关闭(api.removeLaunchView)。置为true,则引擎自动关闭。默认显示3秒后关闭,如3秒内网页未加载完毕则一直等待,直到网页加载完毕再关闭启动页。


1、登录AC的后台,找到你新建的那个项目->选择端设置->选择1024x1920这个启动画面->上传之前叫大家准备好的启动画面。
一般来说启动画面默认是跟我做的那个差不多就底部放置一个logo,背景是白色或者自己的ui配色


1、这里用了官方推荐的aui框架,省事~~哇哈哈
然后我的这里直接用的是一张广告图片是存放本地的,大家有空可以改成远程的图片或者应该打开一个frame来显示小块广告图应该也没有问题的,这里就留个大家去测试了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/api.css"/>
<link rel="stylesheet" type="text/css" href="./css/aui.css"/>
</head>
<body>
<div class="aui-content">
<!--右上角角标-->
<div class="aui-label aui-label-default aui-range" style="position: absolute;z-index: 3;top: 1rem;right: 1rem;">广告</div>
<!--我们要显示的广告图-->
<img id="ad" src="./image/ad.png"/>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function () {
//关闭启动页
api.removeLaunchView();
//广告图片宽度设置与屏幕同宽
$api.attr($api.dom('#ad'),'width', api.winWidth);
//广告图片高度设置与屏幕同高
$api.attr($api.dom('#ad'),'height', api.winHeight);
//这里做了一个3秒后跳转到首页
setTimeout(function () {
api.openWin({
name: 'main',
url: './html/main.html',
});
}, 3000);
};
</script>
</html>
1、提交代码并且上AC后台生成测试版或者正式版,分享到此结束,最后附上我的效果图,希望对各位有用吧。


