HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 phonegap教程 查看内容

phonegap–app启动欢迎引导页

2013-11-15 15:28| 发布者: HTML5| 查看: 13530| 评论: 11|原作者: 夜阑小雨|来自: 夜阑小雨

摘要: 对一个新的app,一般情况都会添加一个介绍和欢迎的页面来告诉用户app的功能和新的特性。那么在phonegap项目里面如何添加这样个引导欢迎页。这里需要注意的是只有app第一次打开的时候才会有,其他时候打开时不会出现 ...

对一个新的app,一般情况都会添加一个介绍和欢迎的页面来告诉用户app的功能和新的特性。

那么在phonegap项目里面如何添加这样个引导欢迎页。

 

这里需要注意的是只有app第一次打开的时候才会有,其他时候打开时不会出现。

所以这里我用到了html5的localStorage。

接下来看我如何实现的。

 

1.需要准备一个打开app时显示的页面,我这边用一个logo.html来展示app的介绍图用的是图片滑动。

这里面用来iScroll插件。

同时在启动这个logo.html页面的时候设置一个storage数据。

window.localStorage.setItem(“HomeLogo”, “HomeLogo_hide”);

来判断是否为第一次启动。

具体的代码我这里不贴了,可以看我的附件。

 

2.其次在我们的index.html页面里面设置一个判断是否为第一次启动。

这里我们需要明确的是app启动的时候一定打开的index文件,而非logo文件。

所以这里我做了一个方法,在index文件一加载的时候来检查HomeLogo 是否存在。

如果存在就不做处理,如果不存在就直接跳转到logo文件,当执行晚上logo文件后,HomeLogo 文件就有了子这样下次打开应用就直接访问index文件。

 

     function loaded() {
try {
var HomeLogo = window.localStorage.getItem(“HomeLogo”);
if (HomeLogo == null) {
window.location.href = “logo.html?p=1″;
}
} catch (e) {
showAlert(“设备不支持!”); // debug
}
}

具体的业务逻辑自己可以处理。

.

demo:app启动欢迎介绍页面

作者:夜阑小雨
原文链接:phonegap–app启动欢迎引导页
夜阑小雨版权所有,转载本网站文章时请保留此信息。


鲜花
2

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (3 人)

发表评论

最新评论

引用 zhangyx 2015-6-4 10:59
附件去哪下载
引用 零度. 2015-5-7 11:40
想看看一下demo
引用 zwsyice 2015-4-8 16:57
请问附件在哪里下载?
引用 sdake520 2015-1-6 16:43
请问附件在哪里?
引用 jnshilang 2014-5-31 12:09
新手学习了
引用 jnshilang 2014-5-31 12:09
新手学习了
引用 htan 2014-5-5 08:49
在哪里下载啊。。。
引用 幸福的魚 2014-4-15 12:49
看起来不错
引用 /wx开心一杯 2014-2-28 14:00
kankan
引用 lisz 2014-2-21 08:56
没有demo可以看一看的
引用 蕗亾曱3 2013-11-18 11:28
请问附件在哪里下载?

查看全部评论(11)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-4-26 16:25

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部