APP开发平台 > Blog > APICloud APP开机引导页面实现

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

2017-12-18 来源:APICloud

高效的App定制平台,保上线、便宜、快!

提交APP定制开发需求
qq客服咨询