apicloud免费实现最简单的启动页广告方法

2025-10-29 02:32:57

1、已有项目可以忽略此步骤

apicloud免费实现最简单的启动页广告方法

apicloud免费实现最简单的启动页广告方法

1、我们要先将配置文件config.xml里面的autoLaunch改成false然后保存。设置成false我们就可以手动关闭开机画面。

配置启动页是否自动隐藏

字段名:autoLaunch

取值范围:true|false

默认值:true

描述:APICloud应用在启动时向用户展示一个启动界面,并控制该启动界面在适当的时候隐藏。如该字段置为false,则启动页需要开发者自行调相关接口关闭(api.removeLaunchView)。置为true,则引擎自动关闭。默认显示3秒后关闭,如3秒内网页未加载完毕则一直等待,直到网页加载完毕再关闭启动页。

apicloud免费实现最简单的启动页广告方法

apicloud免费实现最简单的启动页广告方法

1、登录AC的后台,找到你新建的那个项目->选择端设置->选择1024x1920这个启动画面->上传之前叫大家准备好的启动画面。

一般来说启动画面默认是跟我做的那个差不多就底部放置一个logo,背景是白色或者自己的ui配色

apicloud免费实现最简单的启动页广告方法

apicloud免费实现最简单的启动页广告方法

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后台生成测试版或者正式版,分享到此结束,最后附上我的效果图,希望对各位有用吧。

apicloud免费实现最简单的启动页广告方法

apicloud免费实现最简单的启动页广告方法

apicloud免费实现最简单的启动页广告方法

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢