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

首先说下思路，既然是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. RavenDb学习（六）查询补充特性

    .延迟加载 原来的查询方式如下: IEnumerable<User> users = session .Query<User>() .Where(x => x.Name ...

  2. golang sqrt error练习

      练习:错误 从先前的练习中复制 Sqrt 函数,并修改使其返回 error 值. 由于不支持复数,当 Sqrt 接收到一个负数时,应当返回一个非 nil 的错误值. 创建一个新类型 type Er ...

  3. mybatis动态sql中的两个内置参数（_parameter和_databaseId）

    mybatis动态sql中的两个内置参数(_parameter和_databaseId)   <!-- mybatis动态sql的两个内置参数           不只是方法传递过来的参数可以被 ...

  4. C# Notes

    Token Based Authentication Attributes Tutorial - Conditional - Obsolete Covariance and Contravarianc ...

  5. JQuery Notes

    <script type="text/javascript" src="script.js"></script> $(document) ...

  6. 在ASP.NET CORE下生成PDF文档

    原文链接:https://www.c-sharpcorner.com/article/creating-pdf-in-asp-net-core-mvc-using-rotativa-aspnetcor ...

  7. 安卓程序代写 网上程序代写[转]SVN 在线代码托管工具

    本文转载自 : http://blog.csdn.net/ithomer/article/details/8142920  作者:阳光岛主 在互联网环境使用SVN服务,你必须要有一台在互联网环境内支持 ...

  8. JS函数重载解决方案

    JS的函数定义可以指定形式参数名称,多多少少我们会以为js至少可以支持参数个数不同的方法重载,然而遗憾的是这仅仅是一个假象,js所有的参数都是以arguments传递过去的,这个参数类似于数组,在函数 ...

  9. arduino入门套件学习过程-安装配置

    arduino作为非常火的开源软硬件,有其巨大的优势和前景. 我呢,近期正好需要用arduino做一些小东西,借此机会,分享我的arduino学习历程,欢迎各位朋友一起讨论,指点! 现在进入正题: 这 ...

  10. 解决maven jmxtools 缺失的问题

    原因:有版权,所以maven仓库基本都下架了jmxtool. 目前可用的,我就找到了wso2这家,配置如下: <project xmlns="http://maven.apache.o ...