mui 启动页和引导页

一、启动页和引导页的概念

“启动页”（splash）：app的启动界面，每次启动都会看到的（每次打开QQ都会看到一只企鹅）。
“引导页”（guide）：guide是否展示是可控的，通常首次启动时显示，从第二次启动开始，引导页就不再显示，而是直接进入App主界面了。

二、启动页的设置

1. 在manifest.json文件中

在manifest.json文件的“启动图片（splash）配置”里设置，可以设置“延时关闭启动界面”或者“手动关闭启动界面”，实际开发中，通常需要设置手动关闭splash（HBuilder7.1版本后，启动界面不调用此方法超过6秒后会自动关闭）。

2. 在main.html文件中

手动关闭启动页的代码

plus.navigator.closeSplashscreen();

二、引导页的设置

1.在index.html中：

按照Hello mui启动页的逻辑，首次启动展示引导页，之后启动不再展示。那么就意味着，我们需要一个标识来确定，App是否已经启动过。我们可以在本地存储一个key，（如下例launchFlag），来作为已经启动过App的标识。在入口index.html中，就可以读取这个key，来决定是否展示引导页。

index.html：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>入口页面</title><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css">body {background-color: black;}</style></head><body><script src="js/mui.min.js"></script><script type="text/javascript" charset="utf-8">mui.init();mui.plusReady(function() {/*** 获取本地存储中launchFlag的值* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem* 若存在，说明不是首次启动，直接进入首页；* 若不存在，说明是首次启动，进入引导页；*/var launchFlag = plus.storage.getItem("launchFlag");if(launchFlag) {mui.openWindow({url: "main.html",id: "main",extras: {mark: "index" //额外的参数，仅仅是个标识，实际开发中不用；}});} else {mui.openWindow({url: "guide.html",id: "guide"});}});</script></body></html>

2. 在guide.html中：

我们需要放置我们想要展示的内容，利用mui的slider组件，来制作一套引导信息。
如果使用图片的话，建议大家按照iPhone6 Plus的尺寸制作（其实就是往大了做），然后利用5+提供的方法计算屏幕正确的宽高，设置图片的宽高来撑满屏幕。

在最后一个引导界面提供一个App主界面入口，也就是“开始体验”这种按钮。（点击“开始体验”的同时，设置表示App已经启动过的标识。）

<!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:images/1.jpg"></a></div><div class="mui-slider-item"><a href="javascript:;"><img class="guide-img" src="data:images/2.jpg"></a></div><div class="mui-slider-item"><a href="javascript:;"><img class="guide-img" src="data:images/3.jpg"></a></div><div class="mui-slider-item"><a href="javascript:;"><!--javascript: 是一个伪协议,javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。--><img class="guide-img" src="data:images/4.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>

注意：关于<a href="javascript:;"></a>及<a href="#"></a>

<a href="javascript:;"></a>：

”javascript: 是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空，所以我们调用的就是一个空函数，并不会发生任何实质性的改变。同时可以实现a标签的点击运行。

<a href="#"></a>：

href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新。这是一个锚链接。

如果当页面里面的内容很多的时候，有了上下滚动条，使用href=“#"会发生跳转到页面顶部的问题。而使用href="javascript:;" 就可以避免页面的乱跳！所以，如果我们想要写一个死的a标签，使用<a href="javascript:;"></a>会更有利于增加我们的页面的用户友好度！

如果引导页不能流畅切换，可以参见http://www.cnblogs.com/nangong/p/7e3200a9374c993a1e94b3005ee2a71e.html

mui 启动页和引导页相关推荐

基于 Google Flutter 的 WanAndroid 客户端，支持 Android 和 iOS。包括 BLoC、RxDart 、国际化、主题色、启动页、引导页，拥有较好的项目结构比较规范的代
flutter_wanandroid 项目地址:Sky24n/flutter_wanandroid 简介:??? 基于 Google Flutter 的 WanAndroid 客户端,支持 Andr ...
【Android 小功能】启动 App 时实现启动页、引导页功能，并且只在第一次启动 App 时跳入引导页面
[Android]如何实现启动APP时引导页.欢迎页功能之(一)引导页功能的实现 [Android]如何实现启动APP时引导页.欢迎页功能设置之(二)设置只在第一次启动APP时跳入引导界面
android 闪屏引导,启动体验设计-闪屏，启动页，引导页
冷启动(cold start) 冷启动是指应用尚未运行,系统创建进程并初始化应用. 热启动是指应用已经运行但是在后台被挂起,从后台恢复应用. 冷启动时间稍微会长一点,在此期间可能会看到白屏或黑屏或感受 ...
一款好看的HTML介绍页、引导页源码
一款好看的个人极简介绍页.引导页源码,图标引用的是阿里巴巴矢量图标库,可引入自己的图标项目更换. 地图引入了高德的map lab 数据可视化,可用来做足迹,记录去过的地方. 页面信息修改都在index ...
uni-app 启动页，引导页，广告页
1 勾选自定义启动图这个需要打包才能生效 2 引导页,广告页 1 plus.navigator.closeSplashscreen();//为关闭启动页,需要设置启动页为不自动关闭 2 请求接口后再 ...
uniapp启动图和引导页的处理逻辑
pages.js pages节点的第一项为应用入口页(即首页,这里作为启动页来使用), 可以在home.vue放如一张gif动图,动图时间位2秒,设置定时器在2.5秒后跳转. 如图所示,添加两个vue ...
【Android】如何实现启动APP时引导页、欢迎页功能设置之（二）设置只在第一次启动APP时跳入引导界面
这会先看效果图: (二)设置欢迎页并判断是否程序实第一次开启,来判断是否加载引导页. 实现关键功能: 1.欢迎页面的定时设置 2.判断程序是否是第一次启动,如果是则跳入引导页,否则跳入主界面 3.记 ...
ZYI官网动态单页html引导页源码
介绍: 一款动态背景特效的html单页引导页面源码,喜欢的可以下载看看. 网盘下载地址: https://zijiewangpan.com/hOoCRoy9pdN 图片:
ZYI官网单页html引导页源码动态背景特效
介绍: 一款动态背景特效的html单页引导页面源码,喜欢的可以下载看看. 网盘下载地址: http://kekewl.net/Eh0aZj8srbR 图片:

mui 启动页和引导页

mui 启动页和引导页相关推荐

最新文章

热门文章