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

首先说下思路，既然是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. 在Linux下用make指令编译进度条程序。

    首先建立一个新的文件,touch progress_bar.c 运行该vim progress_bar.c命令.写进度条的程序. 写进一个进度条程序: #include<stdio.h> ...

  2. 编译和运行java文件 找不到或无法加载主类

    这边提供一个关于程序中含有package关键字,使用“终端”运行程序时出现“找不到或无法加载主类”,而使用Eclipse软件可以正常运行程序的可能解决办法. 例如程序名为HelloWorldTest. ...

  3. 云服务器启动tomcat巨慢，很慢

    增加随机数生成熵池 0.查看熵池 cat /proc/sys/kernel/random/entropy_avail 1. yum install rng-tools 2. systemctl sta ...

  4. 解决springmvc使用ResponseBody注解返回json中文乱码问题

    spring版本:4.2.5.RELEASE 查看“org.springframework.http.converter.StringHttpMessageConverter”源码,中有一段说明: B ...

  5. pdf ppt word office转图片 教学白板

    https://zh-cn.libreoffice.org/ http://www.imagemagick.org/script/ 首先用libreoffice将ppt转换为pdf格式,然后再用con ...

  6. 我写的javascript常用静态方法类，分享给大家

    util=function(){    return {        $:function(id){            return document.getElementById(id);   ...

  7. 【转】Android开发，按手机上的back键时程序最小化而不退出

    @Override public boolean dispatchKeyEvent(KeyEvent event) { // menuUtils.createTwoDispatcher(event); ...

  8. 关于Unity的NGUI

    NGUI是严格遵循KISS原则并用C#编写的Unity(适用于专业版和免费版)插件,提供强大的UI系统和事件通知框架 KISS原则:Keep It Simple,Stupid NGUI实例 1.创建U ...

  9. e611. Setting Focus Traversal Keys for the Entire Application

    This example changes the focus traversal keys for the entire application. For an example of how to c ...

  10. (转) 解密H264、AAC硬件解码的关键扩展数据处理

    出自:http://blog.itpub.net/30168498/viewspace-1576794/       通过上一篇文章,我们用ffmpeg分离出一个多媒体容器中的音视频数据,但是很可能这 ...