前言
关于MUI框架就不多介绍了，和其它前端框架差不多，具体的可以看官方文档，HBuilder和MUI都是DCloud 即数字天堂(北京)网络技术有限公司退出的产品，同时是国内HTML5产业的领军企业， W3C会员， HTML5中国产业联盟发起单位.
思考
具体教材就不写了，记录一下自己的思路。主要用到的就是MUI框架，iconfont的图标，还有和风天气提供的接口，和找工具提供的接口。
app的人口页面还是 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>app入口页面</title>
<link href="css/mui.min.css" rel="stylesheet" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<style type="text/css">
body {
background-color: rgba(0, 0, 0, 0);
}
</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",
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: 'none', //页面显示动画，默认为”slide-in-right“；
duration: 0 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
});
} else {
mui.openWindow({
url: "guidePage.html",
id: "guidePage",
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: 'none', //页面显示动画，默认为”slide-in-right“；
duration: 0 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
});
}
});
/**
* 重写mui.back()，一秒内连续点击两次，退出应用，仅安卓有效；
*/
var first = null;
mui.back = function() {
if(!first) {
first = new Date().getTime();
/**
* 自动消失提示信息
* http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
*/
plus.nativeUI.toast("再按一次退出应用");
setTimeout(function() {
first = null;
}, 1000);
} else {
if(new Date().getTime() - first < 1000) {
/**
* 退出应用，仅安卓有效；
* http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit
*/
plus.runtime.quit();
}
}
};
</script>
</body>
</html>
入口页面主要就是，判断是否首次启动，对退出应用的判断
假如是不是首次启动就进入引导页面 guidePage.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" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<style type="text/css">
/*
*样式文件
**/
body {
background-color: rgba(0, 0, 0, 0);
}
.guide-img {
width: 100%;
}
#start {
position: absolute;
bottom: 50px;
width: 60%;
left: 20%;
color: #3856D0;
height: 40px;
border-radius: 20px;
}
#slider-dot {
bottom: 20px !important;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/bgimg1.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/bgimg2.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/bgimg3.jpg">
<button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">开始体验</button>
</a>
</div>
</div>
<div class="mui-slider-indicator" id="slider-dot">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></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");
var index = plus.webview.create('index.html', 'index');
index.show("none", 150);
});
});
/**
* 重写mui.back()，什么都不执行，反之用户返回到入口页；
*/
mui.back = function() {};
</script>
</body>
</html>
进入了引导页，我们点击手动关闭启动页，同时也向本地存储中设置了launchFlag的值，这样我们的主页面会再次判断是否可以获取launchFlag的值，如果可以，我们就进入main.html，这样的话main.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" />
<link href="css/iconfont.css" rel="stylesheet" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="css/public.css"/>
</head>
<body class="dp-n" id="body">
<header class="mui-bar mui-bar-nav titleBar-bgcolor" id="header">
<h1 class="mui-title titleBar-color">首页</h1>
</header>
<nav class="mui-bar mui-bar-tab tabBar-bgcolor">
<a class="mui-tab-item mui-active" data-id="home">
<span class="mui-icon iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" data-id="weather">
<span class="mui-icon iconfont icon-tianqi"></span>
<span class="mui-tab-label">天气</span>
</a>
<a class="mui-tab-item" data-id="news">
<span class="mui-icon iconfont icon-zhinanzhen1"></span>
<span class="mui-tab-label">广播</span>
</a>
<a class="mui-tab-item" data-id="about">
<span class="mui-icon iconfont icon-guanyu"></span>
<span class="mui-tab-label">关于</span>
</a>
</nav>
<!--这里面是content页面-->
<div class="mui-content"></div>
<script src="js/mui.min.js"></script>
<script src="js/immersed.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
statusBarBackground: '#009be0'
});
mui.plusReady(function() {
plus.nativeUI.showWaiting("加载中...");
var topoffset = '45px';
if(plus.navigator.isImmersedStatusbar()){
topoffset = (Math.round(plus.navigator.getStatusbarHeight())+45)+'px';
}
document.getElementById('header').style.height = (immersed+44)+'px';
document.querySelector('.mui-content').style.marginTop = (immersed)+'px';
/**
* 手动关闭启动界面
*/
plus.navigator.closeSplashscreen();
/**
*把页面存在数组里面
**/
var subInfos = [{
url: 'pages/home.html',
id: 'home'
}, {
url: 'pages/weather.html',
id: 'weather',
}, {
url: 'pages/news.html',
id: 'news'
}, {
url: 'pages/about.html',
id: 'about'
}];
/**
*设置头部底部高度
**/
var subStyles = {
top: (immersed+44)+'px',
bottom: '51px'
};
/**
* 根据id查询子页面的信息
*/
var getSubInfoById = function(infoList, id) {
var result = null;
for(var i = 0, len = infoList.length; i < len; i++) {
var _info = infoList[i];
if(_info.id === id) {
result = _info;
break;
}
}
return result;
};
var mainWv = plus.webview.currentWebview();
var titleEL = document.querySelector('.mui-title');
var activeTab = '';
/**
* 默认只加载首页webview
*/
var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);
mainWv.append(homeWv);
activeTab = subInfos[0].id;
plus.nativeUI.closeWaiting();
document.getElementById("body").className = "";
/**
* 点击切换，动态创建其它webview；
*/
mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {
var _self = this;
var targetTab = _self.getAttribute('data-id');
if(targetTab === activeTab) {
return;
}
titleEL.innerText = _self.querySelector('.mui-tab-label').innerText;
var _subWv = plus.webview.getWebviewById(targetTab);
/*
*若webview不存在，则创建；
**/
if(!_subWv) {
var _subInfo = getSubInfoById(subInfos, targetTab);
_subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);
mainWv.append(_subWv);
}
_subWv.show();
/**
* 隐藏之前的webview
*/
plus.webview.getWebviewById(activeTab).hide('none');
activeTab = targetTab;
});
});
/**
* 重写mui.back()，一秒内连续点击两次，退出应用，仅安卓有效；
*/
var first = null;
mui.back = function() {
if(!first) {
first = new Date().getTime();
/**
* 自动消失提示信息
* http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
*/
plus.nativeUI.toast("再按一次退出应用");
setTimeout(function() {
first = null;
}, 1000);
} else {
if(new Date().getTime() - first < 1000) {
/**
* 退出应用，仅安卓有效；
* http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit
*/
plus.runtime.quit();
}
}
};
</script>
</body>
</html>
我们在main.html设置了头部和下面的导航栏，固定导航的位置和样式，分了4个模块，我们默认是进入home.html页面。同时创建了子页面的webview的方法。
剩下的就很清晰了，我们只需要创建子页面。home.html，weather.html，news.html，about.html。大体的和web页面构思是差不多的，不过我们选用的是MUI框架还是根据官方文档来完善。
