hubilder--01---引导页面的制作

作者: 乡水情缘 | 来源:发表于2017-04-03 11:10 被阅读281次

hubilder--01---引导页面的制作
APP启动引导页的制作,用ViewPager实现翻页动画
关于iOS应用启动页与引导页的显示切换
iOS_LoadingController
交互设计工具protopie入门第四集
引导页
使用ViewPager+Fragment制作Material D
RN制作新手引导页（移动端）
引导页
引导页

用户第一次安装应用的时候都会有一个引导页面,下面就简单的说说如何通过hbuilder来制作一个简单的引导页面
重点是要有一个状态来记录APP是不是第一次安装,如果是第一次安装需要展示引导页,如果不是第一次安装则不展示引导页,那么这地方我们就需要一个记录状态,这地方我们使用的是

plus.storage.setItem("lauchFlag", "true");

来记录这个状态

下面来说一说整个实现的流程

第一步:我们需要在入口界面的,检测是否需要展示引导页面

    mui.plusReady(function(){
        //引导页面
            launchScreen(); 
      以下的代码是创建的tabar代码  (以后会介绍到)
                   .
                   .
                   .
        })

检测是不是第一次启动的代码

function launchScreen() {
        //读取本地存储，检查是否为首次启动(当然这个值需要在进入APP之后存储下来的)
        var showGuide = plus.storage.getItem("lauchFlag");
        if(showGuide){ 
            //有值，说明已经显示过了，无需显示；
            //关闭splash页面；
            plus.navigator.closeSplashscreen();
                       //设置全屏
            plus.navigator.setFullscreen(false);
        }else{
            //打开引导页面
            mui.openWindow({
                id:'guide',
                url:'guide.html',
                show:{
                    aniShow:'none'
                },
                waiting:{
                    autoShow:false
                }
            });
        }
    }

第二步: 使用slider 来写一个引导页面(当然这个页面也可以自己根据自己的需求定制),整个页面的代码如下:

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <style>
            #close {
                position: absolute;
                width: 160px;
                height: 44px;
                left: 50%;
                margin-left: -80px;
                bottom: 15%;
                padding: 10px;
                color: #fff;
                border-color: #fff;
            }
            .mui-slider-item{
                width: 100%;
                height: 100%;
            }
            img {
                width: 100%;
                height: 100%;
            }
            
        </style>
    </head>

    <body>
        <div id="slider" class="mui-slider mui-fullscreen" >
            <!--mui-slider-loop   这个字段是控制是否可以无限的滚动-->
          <div class="mui-slider-group">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
              ![](image/index.png)
            </div>
            <!-- 第一张 -->
            <div class="mui-slider-item">
               ![](image/index.png)
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
               ![](image/index.png)
            </div>
            <!-- 第三张 -->
            <div class="mui-slider-item">
               ![](image/index.png)
            </div>
            <!-- 第四张 -->
            <div class="mui-slider-item">
               ![](image/index.png)
               <button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
            </div>
          </div>
          <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
          </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
//          mui.back = function() {};
            mui.plusReady(function() {
                plus.navigator.setFullscreen(true);
                plus.navigator.closeSplashscreen();
            });
            //立即体验按钮点击事件
            document.getElementById("close").addEventListener('tap', function(event) {
                      //存储是否是第一次进入APP的状态
                plus.storage.setItem("lauchFlag", "true"); 
                plus.navigator.setFullscreen(false);
                plus.webview.currentWebview().close();
            }, false);
        </script>
    </body>

</html>

注:以上代码copy下来可以直接使用,在此就不提供demo了,有需求的小伙伴可以添加 qq 1198928367 ,欢迎大家来交流