对一个新的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
}
}

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

phonegap–app启动欢迎引导页localstorage的更多相关文章

  1. Ionic3 编程-应用启动进入引导页

    新建引导页面 ionic g page welcome 导入组件 修改模版文件:welcome.html 修改样式文件:welcome.scss 安装相关插件: 数据库使用SQLite:ionic c ...

  2. ionic之应用首次启动引导页

    用户首次启动app先进入引导页,localstroge记录状态,下次启动应用不再显示引导页. HTML: <html> <head> <meta charset=&quo ...

  3. IOS 一句代码搞定启动引导页

    前言引导页,一个酷炫的页面,自从微博用了之后一下就火起来了,对于现在来说一个app如果没有引导页似乎总显那么不接地气,那么为了让我们的app也“高大上”一次,我写了一个demo来实现启动引导页的实现, ...

  4. 马蜂窝 iOS App 启动治理:回归用户体验

    增长.活跃.留存是移动 App 的常见核心指标,直接反映一款 App 甚至一个互联网公司运行的健康程度和发展动能.启动流程的体验决定了用户的第一印象,在一定程度上影响了用户活跃度和留存率.因此,确保启 ...

  5. Android项目实战(三):实现第一次进入软件的引导页

    最近做的APP接近尾声了,就是些优化工作了, 我们都知道现在的APP都会有引导页,就是安装之后第一次打开才显示的引导页面(介绍这个软件的几张可以切换的图) 自己做了一下,结合之前学过的 慕课网_Vie ...

  6. 使用ViewPagerAdapter 页面引导适配器设置app启动页,引导页面的实现

    一般的app第一次安装启动的时候,都会有一个启动页面和引导页的画面,然后才进入主程序.anndroid中的ViewPagerAdapter 是一个继承与PageAdapter的 页面引导适配器.由于我 ...

  7. 安卓第一次启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...

  8. APP启动页

    关于APP启动引导页面模块 时间:2016年6月14日 作者:赵锐 模块使用说明 模块暴露在外的接口是- (void)showGuideViewWithImages:(NSArray *)images ...

  9. [iOS] App引导页的简单实现 (Swift 2)

    转载请注明出处:http://www.jianshu.com/p/024dd2d6e6e6# 已更新至 Xcode7.2.Swift2.1 在第一次打开App或者App更新后通常用引导页来展示产品特性 ...

随机推荐

  1. 一步一步实现iOS应用PUSH功能

    1. push原理 iOS push 工作机制可以用下图简要概括 Provider:应用自己的服务器: APNS:Apple Push Notification Service的简称,苹果的PUSH服 ...

  2. win7 通过命令行压缩文件

    1,下载winrar这款软件(可能要正式版) 2,安装完之后在c:\programe files里找到winrar目录,复制winrar目录里的winRar.exe文件到c盘下的windows目录 3 ...

  3. 将存储在本地的大量分散的小文件,合并并保存在hdfs文件系统中

    import java.io.BufferedInputStream; import java.io.File; import java.io.FileInputStream; import java ...

  4. postgresql存储二进制大数据文件

    如果想把整个文件或图片存储在数据表的一个字段内,该字段可以选择二进制类型,然后将文件按二进制存储起来,文本文件也可以存在text字段内. 示例如下: 二进制类型bytea的操作(在最大值内,有内存限制 ...

  5. Android中GC_EXTERNAL_ALLOC的含义

    GC_FOR_MALLOC means that the GC was triggered because there wasn't enough memory left on the heap to ...

  6. Deep Learning论文笔记之(四)CNN卷积神经网络推导和实现(转)

    Deep Learning论文笔记之(四)CNN卷积神经网络推导和实现 zouxy09@qq.com http://blog.csdn.net/zouxy09          自己平时看了一些论文, ...

  7. 144. Binary Tree Preorder Traversal

    Given a binary tree, return the preorder traversal of its nodes' values. For example:Given binary tr ...

  8. 1-1 Java简介

    主要内容: <1>Java平台应用 <2>核心概念:JVM.JDK.JRE <3>搭建Java开发环境 <4>使用工具开发Java程序 <5> ...

  9. 输入DStream和Receiver详解

    输入DStream代表了来自数据源的输入数据流.在之前的wordcount例子中,lines就是一个输入DStream(JavaReceiverInputDStream),代表了从netcat(nc) ...

  10. URAL 1069 Prufer Code(模拟)

    Prufer Code Time limit: 0.25 secondMemory limit: 8 MB A tree (i.e. a connected graph without cycles) ...