guide.html最后处理

H5+

Storage模块管理应用本地数据存储区，用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同，前者可在应用内跨域操作，数据存储期是持久化的，并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。
getItem: 通过键(key)检索获取应用存储的值
setItem: 修改或添加键值(key-value)对数据到应用数据存储中
clear: 清除应用所有的键值对存储数据

** plus.storage.getItem();**
** plus.storage.setItem();**

H5+ navigator

navigator用于管理浏览器运行环境信息
closeSplashscreen: 关闭程序启动界面
setFullscreen: 设置应用是否全屏显示

** plus.navigator.closeSplashscreen();**
** plus.navigator.setFullscreen();**

做web app，一个无法避开的问题就是转场动画；web是基于链接构建的，从一个页面点击链接跳转到另一个页面，如果通过有刷新的打开方式，用户要面对一个空白的页面等待；如果通过无刷新的方式，用Javascript移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战：DOM节点繁多，页面太大，转场动画不流畅甚至导致浏览器崩溃； mui的解决思路是：单webview只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最耗性能的部分交给原生实现.

mui.openWindow

**mui.openWindow()//打开新的页面 **

问题

如何实现引导页只出现一次（肯定得记录一个值来判断）
究竟是先加载index.html 还是guide.html
最实在的案例里的代码在哪呢？

逻辑顺序

在哪判断加载过guide.html
判断是否加载过guide.html
在哪关闭程序启动界面
加载guide.html后记录个标记
为了便于调试查看效果如何清除标记

正题

[6.0.0.201506290132]新增App首次启动欢迎页，也就是mui项目中examples/guide.htmlAPP启动流程：1. APP启动打开启动页面，也就是splashscreen，可以在manifest.html中设置自动关闭或者手动关闭：代码视图中plus下的splashscreen，autoclose值为false即需要手动关闭，值为true即自动关闭；2. 进入设置的入口页面webview；在入口页面或者入口页面的子webview即APP启动后就执行js的webview中判断APP是否为第一次启动。如何判断呢？使用localStorage，这个很简单就不说了；若不是第一次打开，则需要使用plus.navigator.closeSplashscreen()来关闭启动画面；若为第一次打开，则进入guide.html，在guide.html加载完后需要关闭启动画面；3. guide.html跳转至入口页面；
在MUI demo中，判断是否为第一次启动APP的代码在入口页面index.html的子页面list.html中；
看demo时发现若是ios则设置全屏(显示顶部状态栏)，我测试了下，ios和安卓都可以全屏，不知道hbcui1984为何这样写，我看了下好几个安卓APP的guide都不是全屏的；
关于在使用过程中出现的问题：1.有的娃娃做出来之后表现是看到启动画面后先看到入口页面，然后才看到guide页面，这是因为未正确设置启动画面的关闭；
若有问题，请在评论中指出。by 鑫花璐放

问答链接
真的是找了好久，mui案例的index.html都快翻烂了，总算在论坛上找到了答案，真是感谢前辈们；
查看案例知道了（实际上是）manifest.json文件中设置了默认加载的是index.html（也是我为啥走了半天弯路的原因）；
所以正常我们应该在index.html中判断guide.html加载情况（因为是H5+，所以我们写在mui.plusReady()方法中）,之后手动关闭启动页，并且设置是否全屏显示（非游戏没必要全屏）

//写在index.html
mui.plusReady(function() {
                
                var showGuide=plus.storage.getItem('launch');
                if (showGuide) {
                    //关闭启动页（splash页）
                    plus.navigator.closeSplashscreen();
                    //是否全屏显示应用
                    plus.navigator.setFullscreen(false);
                } else{
                    mui.openWindow({
                        id:'guide',
                        url:'guide.html',
                        show:{
                            aniShow:'none'
                        },
                        waiting:{
                            autoShow:false
                        }
                    });
                }

假设第一次加载则需要再guide.html中关闭启动页设置显示方式
（一般是点击立即体验之类的按钮一个tap事件记录关闭启动页关闭当前窗口）

//写在guide.html中
mui.plusReady(function() {
    if (mui.os.ios) {
        plus.navigator.setFullscreen(true);
    }
    plus.navigator.closeSplashscreen();

    document.getElementById('colse').addEventListener('tap', function(event) {
        plus.storage.setItem("launch", "true");
        plus.navigator.setFullscreen(false);
        //关闭当前窗口
        plus.webview.currentWebview().close();
        
    },false);
});

也可以是启动页翻到最后一页然后再翻直接到 index.html 然后执行以上动作
事件如下：

//引导页切换事件
            document.querySelector(".mui-slider").addEventListener('slide', function() {
                var index = event.detail.slideNumber;
                if () {
                    
                } else {
                    
                }

            });

event.detail.slideNumber 是当前slider标记第一页为 0 （类似数组）（Number型）
通过对 index的判断然后执行动作；

总结

首先感谢前辈们的探索，还是让后来者少走了好多弯路。
容易发生的问题 index.html可能会先于guide.html出现这里就要考虑执行顺序，关闭顺序是否合理了；
本人误入歧途canvas的研究，克服了canvas动画的难关但是卡在加载问题上 drawImage() 对于canvas在加载img，会在第一个slider加载时出现问题，只能先抛弃了，同时也发现了canvas动画对canvas有了深层次的理解，canvas的研究也够人喝一壶的了。

下次，mui提供的组件简单拼装

用过以后拼页面用HB 的快捷提示真是好快，icon的提供也好给力适合大部分简单的开发了，也发现了好几款关于icon 文字码的工具好想试试，总比icon用图片方便多了；
帮朋友看EasyUI，突然发现了bootstrap后台管理界面的框架，什么鬼，看着后台管理界面也好漂亮，（至少感觉比easyUI 自由简洁些），有空再研究吧。