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.tq4.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");

以上，即可实现效果。

附：

官方文档地址：http://ask.dcloud.net.cn/article/13011

源码地址：https://github.com/erinwxl/wap2app-guide

wap2app（三）-- 添加引导页相关推荐

uniapp中微信扫码打开下载链接添加引导页
前言由于微信的种种封闭,导致在微信内置浏览器打开的页面,会把外部链接全部屏蔽掉所以通用的做法是,判断是微信浏览器打开的时候做一种处理方式.非微信浏览器打开时做另外一种处理方式.类似你想在微信打开页 ...
Android之app引导页(背景图片切换加各个页面动画效果)
转载:http://blog.csdn.net/lowprofile_coding/article/details/48037095 先看效果图: 1.显示三个页面的Activity 用view p ...
GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD)
每一个APP都会用到APP引导页,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了,当然这里讲的不是APP引导页的美化而是APP引导页的高度集成,一行代码搞 ...
Android 欢迎引导页的魅力
前言纵观android市面上的所有APP,没有一个页面不具备欢迎引导页,可以看出引导页面的魅力有多大,引导页面能迅速抓住用户的眼球,让用户很快的了解该app的主打方向.一个好的引导页让人看了就喜欢, ...
Android开发引导页进入应用，第二次欢迎页进入应用
先看一下引导页的效果图具体步骤 1.先从一个主页进入,判断是不是第一次进入,如果是第一次就跳转到引导页不是就跳转到登录页(BaseActivity为个人项目的其他页面所用,一般继承默认的Act ...
打造APP引导页3D切换特效
众所周知,一款好的APP,肯定有个很炫的APP引导页或者一个启动页,一个很炫的APP的引导页,肯定会为你的APP瞬间提高逼格,使得APP的用户体验瞬间倍增.那么接下来就给出一个API(setPageT ...
android videoview 拉伸,手摸手带你用 VideoView 实现英语流利说炫酷引导页
效果图: 一直听说英语流利说是个做的非常不错的app,于是乎抱着崇拜的心态下了一个瞅瞅,在打开app后就被引导页吸引了,继续抱着崇拜的心态去思考这是如何实现的. 刚开始的思路属性动画?(可以实现,但是 ...
基本操作引导页的实现
1.效果图 2.使用步骤 1.添加依赖 //新手使用引导 // 下面注释是为了忽略//noinspection GradleCompatiblecompileOnly 'com.android.sup ...
Android ViewPager简单实现 - 倒计时、引导页左右滑动
说明: ViewPager简单实现,方便以后用.做的是一个全屏的引导页. 截图: 代码: GuideActivity.java package com.xinyan.personal.ui.activ ...

wap2app（三）-- 添加引导页

wap2app（三）-- 添加引导页相关推荐

最新文章

热门文章