有一种帅叫做长话短说，@孙红雷，--这可以叫做“短帅”吗，^_^

首先说下思路，既然是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 看下效果吧，如下：

  

HybridApp启动引导页的实现的更多相关文章

  1. IOS 一句代码搞定启动引导页

    前言引导页,一个酷炫的页面,自从微博用了之后一下就火起来了,对于现在来说一个app如果没有引导页似乎总显那么不接地气,那么为了让我们的app也“高大上”一次,我写了一个demo来实现启动引导页的实现, ...

  2. 安卓第一次启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...

  3. ionic之应用首次启动引导页

    用户首次启动app先进入引导页,localstroge记录状态,下次启动应用不再显示引导页. HTML: <html> <head> <meta charset=&quo ...

  4. Android:启动引导页实现

    前言 基本上现在所有的应用都会有一个欢迎界面,在欢迎界面对应用做一个整体的介绍,然后在跳入到主界面,这次要说的这个引导页就是带翻页的引导页.效果如下所示

  5. 自定义App首次启动引导页

    代码如下 #import"ZBGuidePageView.h" @interfaceZBGuidePageView()<UIScrollViewDelegate> @p ...

  6. 使用Webview实现app启动引导页

    效果如下: 首先需要一个html页面及相应的js和css支持放在assets目录下(如果没有这个目录请项目上右键-new-folder-assets) 配置权限: <uses-permissio ...

  7. 用Flutter开发的跨平台项目，完美运行在Android和IOS上，Material简洁风格，包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目，还有漂亮的妹子图库，运行极度流畅，结构清晰，代码规范，值得拥有

    Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴 ...

  8. 启动图。引导页以及EAIntroView的使用

    ios启动图: 1242 x 2208 (6plus)    R5.5位置 750 x 1334   (6)           R4.7位置 640 x 960     (4/4s)      2x ...

  9. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

随机推荐

  1. 两种常用的jquery事件加载的方法 的区别

    两种常用的jquery事件加载的方法   $(function(){});  window.onload=function(){}  第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...

  2. Redis的内存回收机制

    Redis的内存回收机制 2018年01月16日 17:11:48 chs007chs 阅读数:1172   Redis的内存回收机制主要体现在一下两个方面: 删除过期时间的键对象 删除过期键对象 : ...

  3. 关于Unity中3D声音的使用

    3D声音 3D立体声和2D声不同的地方是它是会随着距离衰减的,距离越近声音越大,距离越远声音越小. 1: 声音: 背景音乐和音效; 2: 声音文件支持的格式: ogg, mp3, wave, AIFF ...

  4. ERROR：tornado上传文件过大超出范围报错

    该怎么解决呢? HTTPServer里面指定max_buffer_size就可以了 EXAMPLE # server = HTTPServer(application, max_buffer_size ...

  5. SpringMVC系列（十一）把后台返回的数据转换成json、文件下载、文件上传

    一.后台返回的数据转换成json 1.引入转换json需要的3个依赖 <!--json转换需要的依赖 begin --> <dependency> <groupId> ...

  6. Linux SD卡驱动开发(四) —— SD 控制器之真正的硬件操作

    前面对SD卡控制器有了一个主要的介绍.事实上SD控制器层更过的意义是为core层提供一种操作SD卡硬件的一种方法.当然不同的控制器对硬件控制的方法不尽同样,可是他们终于都能像core层提交一个统一的封 ...

  7. js 形如 "1,2,3"的操作

    查找指定元素在数组中的index. var arr=[1,2,3]; $.inArray(2, arr);//返回1 arr.splice($.inArray(2, arr),1); //从数组中删除 ...

  8. JSP九大内置对象与Servlet学习笔记[转]

    我们常说的JSP有九大内置对象分别为:request.response.session.out.pagecontext.page.exception.application.config. 我们知道, ...

  9. crontab(定时任务操作)

    定时任务顾名思义就是在某一时间点自动进行任务操作.在做Pgsql的备份利用crontab进行定时操作, 使用起来比较方便.故分享具体的定时编辑命令:crontab -e 首先从crontab的文件分析 ...

  10. Java无参构造方法

    一定要保留无参构造方法.---------->反射是最重要的操作原理,大量地应用了反射处理机制. 如Struts.Spring框架等.