guide.html最后处理
H5+
Storage模块管理应用本地数据存储区,用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。
getItem: 通过键(key)检索获取应用存储的值
setItem: 修改或添加键值(key-value)对数据到应用数据存储中
clear: 清除应用所有的键值对存储数据
- ** plus.storage.getItem();**
- ** plus.storage.setItem();**
navigator用于管理浏览器运行环境信息
closeSplashscreen: 关闭程序启动界面
setFullscreen: 设置应用是否全屏显示
- ** plus.navigator.closeSplashscreen();**
- ** plus.navigator.setFullscreen();**
做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.
- **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 自由 简洁些),有空再研究吧。