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

首先说下思路，既然是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. 【进阶修炼】——改善C#程序质量(3)

    32, 总是优先考虑泛型. 泛型代码有很好的重复利用性,和类型安全性. 33, 应尽量避免在泛型类中声明静态成员. 静态成员达不到共享的目的.List<int>和List<Strin ...

  2. STM32的TAMPER-RTC管脚作为Tamper的使用[转]

    问题一: 当 TAMPER引脚上的信号从 0变成1或者从 1变成 0(取决于备份控制寄存器BKP_CR的 TPAL位),会产生一个侵入检测事件.侵入检测事件将所有数据备份寄存器内容清除.   然而为了 ...

  3. .gitignore不生效解决办法

    .gitignore只能忽略那些原来没有被track的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的.那么解决方法就是先把本地缓存删除(改变成未track状态),然后再提 ...

  4. 标签<view>文字自动换行

    <view style='word-break:break-all;'>{{con.blog}}</view>

  5. 微信小程序——picker通过value返回你想获取的值

    关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...

  6. PHP经纬度 测距

    /** *求两个已知经纬度之间的距离,单位为米 *@param lng1,lng2 经度 *@param lat1,lat2 纬度 *@return float 距离,单位米 **/ function ...

  7. Android NDK: Application targets deprecated ABI(s): armeabi Open File

    Error:(81) Android NDK: Application targets deprecated ABI(s): armeabi Error:(82) Android NDK: Suppo ...

  8. r语言 function 指定多个返回值

    # Goals: To write functions # To write functions that send back multiple objects. # FIRST LEARN ABOU ...

  9. loadrunner 性能测试报error-27796的解决

    网上观点: 在注册表HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Services/Tcpip/Parameters里,有如下两个键值:TcpTimedWai ...

  10. 关于go语言的环境配置 SDK+path+工作目录

    第一步: 安装Golang的SDK http://golang.org,下载最新的安装包,之后双击安装即可. 安装完成之后,打开终端,输入go.或者go version(查看安装版本)出现如下信息即表 ...