HybridApp启动引导页的实现
有一种帅叫做长话短说，@孙红雷，--这可以叫做“短帅”吗，^_^
首先说下思路，既然是Hybrid APP, 那就是可以用html的方式实现，启动引导页比较常见的展示方式是滑动，那么我们就可以使用图片轮播的方式来模仿，这不就搞定了嘛。。。
1 在应用的启动Activity中加入判断，看代码：
/** * 判断要跳转的页面 */ private void goPage(){ // 打开Preferences，名称为sp_cfw，如果存在则打开它，否则创建新的Preferences SharedPreferences sp_cfw = getSharedPreferences("sp_cfw", 0); // 取出数据，如果是空，默认true String firstOpen = sp_cfw.getString("index_firstOpen", "true"); int spVersion = sp_cfw.getInt("index_version", -1); // 获取本地的版本号 int appVersion = 0; try { appVersion = getApplicationContext().getPackageManager().getPackageInfo(Constant.APP_PACKNAME, 0).versionCode; } catch (NameNotFoundException e) { e.printStackTrace(); } // 两个判断条件，一个是版本号，一个是是否第一次打开
// 版本号用于判断是否覆盖更新
// 判断是否第一次打开，如果是则跳到引导页，否则跳到登录页 if(appVersion > spVersion || firstOpen.equals("true")) { // 让sp_cfw处于编辑状态 SharedPreferences.Editor editor = sp_cfw.edit(); // 存放数据 editor.putString("index_firstOpen", "false"); editor.putInt("index_version", appVersion); // 完成提交 editor.commit(); super.loadUrl("file:///android_asset/www/page/index.html"); } else { super.loadUrl("file:///android_asset/www/page/login.html"); } }
2 第二步就是引导页index.html的实现了，看代码：
<!DOCTYPE html > <head> <title>引导页</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" type="text/css" href="../css/share.css"> <style> .addWrap{ position:fixed; width:100%;height:100%;background:#fff;margin:0; padding:0;} .addWrap .swipe{overflow: hidden;visibility: hidden;position:relative;} .addWrap .swipe-wrap{overflow:hidden;position:relative;} .addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;} #position{ position:absolute; bottom:0; right:0; margin:0; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:center;} #position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;} #position li.cur{background-color:#FFF;} .img-responsive { display: block; max-width: 100%;} .goBtn{position: absolute; width:100%; text-align:center; bottom:12%;font-size:20px;color:#FFFFFF;} </style> </head> <body> <div class="addWrap"> <div class="swipe" id="mySwipe"> <div class="swipe-wrap"> <div><a href="javascript:;"><img class="img-responsive" src="../images/index/index_1.jpg"/></a></div> <div><a href="javascript:;"><img class="img-responsive" src="../images/index/index_2.jpg"/></a></div> <div><a href="login.html"> <div class="goBtn">马上体验 > ></div> <img class="img-responsive" src="../images/index/index_3.jpg"/> </a></div> </div> </div> <ul id="position"><li class="cur"></li><li class=""></li><li class=""></li></ul> </div> <script src="../js/swipe.min.js" type="text/javascript"></script> <script type="text/javascript"> var bullets = document.getElementById('position').getElementsByTagName('li'); var banner = Swipe(document.getElementById('mySwipe'), { auto: 0, continuous: true, disableScroll:false, callback: function(pos) { var i = bullets.length; while (i--) { bullets[i].className = ' '; } bullets[pos].className = 'cur'; } }); </script> </body> </html>
3 看下效果吧，如下：
