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

首先说下思路，既然是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. 微信小程序——倒计时功能

    做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...

  2. Android开发 sharesdk分享微信/朋友圈的时候只显示文字，不显示链接

    问题:分享的时候只将分享的content分享出去了,连标题及链接都没有分享出去. 原因:没有配置image导致. 解决办法: 在  showShare 方法里面添加配置: if(ImageUrlOrP ...

  3. 【转】Mac使用apt-get

    和Linux系统不同的是,Mac系统默认是不带有apt-get软件包工具的,所以要想在Mac上使用上方便的apt-get就需要自己来安装它. 这里我们需要借助一个强大的工具-fink. 首先我们需要下 ...

  4. Entity Framework Code First - Change Tracking

    In this post we will be discussing about change tracking feature of Entity Framework Code First. Cha ...

  5. linux update & upgrade

    Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的: 复制代码 代码如下: yum -y update 升级所有包同时也升级软件和系统内核 复制代码 ...

  6. FPGA静态时序分析——IO口时序（Input Delay /output Delay）（转载）

    转载地址:http://www.cnblogs.com/linjie-swust/archive/2012/03/01/FPGA.html 1.1  概述 在高速系统中FPGA时序约束不止包括内部时钟 ...

  7. Global Pose Estimation with an Attention-based Recurrent Network

    related work包含比较多,对SLAM和最近神经网络对于定位的工作介绍比较多.

  8. Axiom3D:手动创建ManualObject与Mesh,以及如何使用Cg着色器语言

    在开始正文前,先说下Axiom3D里遇到的二个BUG. 1.在启动axiom生成的程序中,我发现输出里总是有一些如"billboard_type","billboard_ ...

  9. Linux_iptables

    Linux:网络防火墙 netfilter:Frame iptables: 生成防火墙规则,并附加到netfilter上实现数据报文过滤 NAT mangle等规则生成的工具 TCP有限状态机 LIS ...

  10. Java如何显示一年的周数？

    在Java中,如何查找一年中或一个月中的第几个星期? 以下示例显示年份和月份的第几周. package com.yiibai; import java.util.*; public class Dis ...