wap2app（三）-- 添加引导页
1.在client_index.html文件中添加如下代码：
<script type="text/javascript">
if(window.plus){
plusReady()
}else{
document.addEventListener('plusready',plusReady,false)
}
function plusReady(){//这里是每次进入应用都会显示引导页，开发中要如何显示引导页视具体的情况而定。
var guide = plus.webview.create('guide.html',"guide");
guide.show();
}
</script>
2.创建image文件夹，添加引导图的图；创建css文件夹，引入mui.min.css、mui.css；创建js文件夹，引入mui.js文件、mui.min.js文件等。
3.添加引导页面 guide.html，代码如下：
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: black;
} .guide-img {
width: 100%;
} #start {
position: absolute;
bottom: 40px;
width: 60%;
left: 20%;
}
</style>
</head> <body>
<div class="mui-content">
<div class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="data:image/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="data:image/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="data:image/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="data:image/yuantiao.jpg">
<button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">开始体验</button>
</a>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
/**
* 获取系统状态栏高度
* http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
*/
var sh = plus.navigator.getStatusbarHeight();
/**
* 获取设备屏幕高度分辨率以及宽度分辨率
* http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight
* http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth
*/
var h = plus.screen.resolutionHeight;
var w = plus.screen.resolutionWidth;
/**
* 设置图片高度，这里图片并不规范；
* 实际开发中，建议大家制作iphone6plus规格的图片；
*/
var imgs = document.querySelectorAll(".guide-img");
for(var i = 0, len = imgs.length; i < len; i++) {
imgs[i].style.height = (h - sh) + "px";
imgs[i].style.width = w + "px";
}
/**
* 手动关闭启动页
* http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen
*/
plus.navigator.closeSplashscreen();
document.getElementById("start").addEventListener("tap", function() {
/**
* 向本地存储中设置launchFlag的值，即启动标识；
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
*/
plus.storage.setItem("launchFlag", "true");
mui.openWindow({
url: "main.html",
id: "main",
extras: {
mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；
}
});
});
});
/**
* 重写mui.back()，什么都不执行，反之用户返回到入口页；
*/
mui.back = function() {};
</script>
</body> </html>
注意：要将guide.html中的mui.openWindow的url替换成你的首页地址，可以是根目录下的地址，也可以是网络地址（http://或https://开头），如：
mui.openWindow({
url: "", //mian.html 或者如 https://www.baidu.com/
id: "main",
extras: {
mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；
}
});
以上执行完毕之后，便可在真机上运行，查看引导图页面效果。
这里是每次进入应用都会显示引导页，开发中要如何显示引导页视具体的情况而定。 如需要只在首次出现引导图：
在client_index.html文件中：
var launchFlag = plus.storage.getItem("launchFlag");
if(launchFlag == true) {
//非首次
} else if(!launchFlag){
//首次
var guide = plus.webview.create('guide.html',"guide");
guide.show();
}
并在guide.html中添加 launchFlag的标签设置，向本地存储中设置launchFlag的值，即启动标识；在每次引导图点击立即使用是将标签设置为true：
plus.storage.setItem("launchFlag", "true");
以上，即可实现引导图的效果。
那么，怎么在引导图中添加分页器，写分页器主要是能监听滑动的事件，只要能监听到滑动事件，那么在滑动时添加分页器的高亮即可。
查阅资料知道，当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引，于是监听slide事件：
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
alert(event.detail.slideNumber);
});
然后写一个分页器：
<div class="guide-pages">
<ul>
<li class="li-guide active" id="li-guide0"></li>
<li class="li-guide" id="li-guide1"></li>
<li class="li-guide" id="li-guide2"></li>
<li class="li-guide" id="li-guide3"></li>
</ul>
</div>
css:
.guide-pages{
position: absolute;
left: 50%;
bottom: 17px;
width: 120px;
margin-left: -80px;
text-align: center;
}
.li-guide{
display:block;
float: left;
width:10px;
height: 10px;
background-color: #000;
margin-left: 5px;
margin-right: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.3;
}
.li-guide.active{
opacity:;
background-color: #3478f6;
}
js:
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
document.querySelector(".active").classList.remove("active");
var this_id = "li-guide" + event.detail.slideNumber;
document.getElementById(this_id).classList.add("active");
});
以上，即可实现分页器。
附：
官方文档地址：http://ask.dcloud.net.cn/article/13011
git地址：https://github.com/erinwxl/wap2app-guide
整理不易，转载时请注明出处及相应链接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/9848553.html，文章标题备注转载，如：xxx【转载】,谢谢！
wap2app（三）-- 添加引导页的更多相关文章
- app添加引导页
1.设置guide.html 2.登陆或者主页面引用guide.html mui.plusReady(function() { //读取本地存储,检查是否为首次启动 决定是否显示引导页 var sho ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ①)
好长时间没更新博客, 是时候来一波干货分享了;APP引导页话不多说每一个APP都会用到,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...
- GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD)
每一个APP都会用到APP引导页,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了,当然这里讲的不是APP引导页的美化而是APP引导页的高度集成,一行代码搞 ...
- IOS 一句代码搞定启动引导页
前言引导页,一个酷炫的页面,自从微博用了之后一下就火起来了,对于现在来说一个app如果没有引导页似乎总显那么不接地气,那么为了让我们的app也“高大上”一次,我写了一个demo来实现启动引导页的实现, ...
- Android如何添加多张引导页
摘要:项目需要添加多张引导页,所以在网上搜集了一些资料并整理好. Step1 添加一个GuideActivity. 其实这个引导页无非就是一个Activity,里面有一个ViewPager而已.多张图 ...
- Android项目实战（三）：实现第一次进入软件的引导页
最近做的APP接近尾声了,就是些优化工作了, 我们都知道现在的APP都会有引导页,就是安装之后第一次打开才显示的引导页面(介绍这个软件的几张可以切换的图) 自己做了一下,结合之前学过的 慕课网_Vie ...
- IOS引导页拨动4张图片最后一张停三秒进入主页，页面推送
// // ViewController.m // // // Created by 张艳锋 on 15/8/26. // Copyright (c) 2015年 张艳锋. All rights ...
- android脚步---APP引导页添加
package com.leadcore.uudatoutie; import java.util.ArrayList; import com.leadcore.uudatoutie.R; impor ...
随机推荐
- python中除法的几种类型
传统除法:直接后缀小数点,同样结果是和最大的小数点对齐 >>> 1/2 0 >>> 1.0/2 0.5 >>> 1/2.0 0.5 >> ...
- nrf52832 SDK 15.3.0 Flash 操作
debug中遇到的问题: 1,写入数据,读出来不对 2,看之前被人写的代码发现,读flash直接用的标准C库函数:memcpy,但是,写用的专门的flash写接口.所以,我这里两个疑问: A,写fla ...
- Tensflow的equal函数
一.函数 tf.equal() equal( x, y, name=None ) tf.equal(A, B)是对比这两个矩阵或者向量的相等的元素,如果是相等的那就返回True,反正返回False,返 ...
- 私服仓库 nexus 环境搭建（win10）
1.1 简介: Nexus 是Maven仓库管理器,如果你使用Maven,你可以从Maven中央仓库 下载所需要的构件(artifact),但这通常不是一个好的做法,你应该在本地架设一个Maven仓库 ...
- Spring Boot + Spring Cloud 构建微服务系统（四）：容错机制和熔断（Hystrix）
雪崩效应 在微服务架构中,由于服务众多,通常会涉及多个服务层级的调用,而一旦基础服务发生故障,很可能会导致级联故障,进而造成整个系统不可用,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者 ...
- Maven的assembly插件实现自定义打包部署（包含依赖jar包）
微服务必备 优点: 1.可以直接导入依赖jar包 2.可以添加插件启动 .sh 文件 3.插件的配置以及微服务的统一打包方式 1.首先我们需要在pom.xml中配置maven的assembly插件 & ...
- JavaWeb学习 (二十五)————监听器(Listener)
一.监听器介绍 1.1.监听器的概念
- netty源码解解析(4.0)-5 线程模型-EventExecutorGroup框架
上一章讲了EventExecutorGroup的整体结构和原理,这一章我们来探究一下它的具体实现. EventExecutorGroup和EventExecutor接口 io.netty.util.c ...
- Hyperledger Fabric密码模块系列之BCCSP（二）
上一篇简单介绍了bccsp包下面的目录结构,这一篇本来想讲sw的,忽然感觉少点什么,对哈,得先将下bccsp这个接口,sw只是个实现啊.
- Linux中rm命令详解
linux下rm命令使用详解---linux删除文件或目录命令 用户可以用rm命令删除不需要的文件.该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所有文件及子目录均删除 ...