制作过程

页面基本结构就是一个swiper,关于HBuilder里面的swiper和swiper插件的使用，可以查看《HBuilder webApp开发开发(三)轮播图swiper》。这里主要是在最后一页点击“立即体验”时设置一个值，然后在跟页面里面根据这个值，做不同的处理。但是在MUI里面需要设置一下全屏和手动关闭启动界面。

· 设置全屏

plus.navigator.setFullscreen(true);

· 1

这句代码只对iOS系统的手机适用，在安卓机上面无效。

· 手动关闭启动界面

我们需要在manifest.json的启动图片splash配置里面这设置： 

代码实现

 
                    Hello MUI                         
                     
                                        
                                                                    
                                                                    
                                                                    
                                                        立即体验                                                                                                                                                有了上面的思路和配置后，代码的实现就比较好做了。 这段代码是启动页的制作。但是在跟页面里面需要加一段代码：
function launchScreen() {
        //读取本地存储，检查是否为首次启动
        var showGuide = plus.storage.getItem("lauchFlag");
        if(showGuide){
            //有值，说明已经显示过了，无需显示；
            //关闭splash页面；
            plus.navigator.closeSplashscreen();
            plus.navigator.setFullscreen(false);
        }else{
            //显示启动导航
            mui.openWindow({
                id:'guide',
                url:'template/guide.html',
                show:{
                    aniShow:'none'
                },
                waiting:{
                    autoShow:false
                }
            });
        }
    }

然后在mui.plusReady里面，第一行就调用launchScreen()这个方法。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！