mui开发app教程-2
上一章：mui开发app教程-1
目录
功能1：选项卡事件绑定
选项卡绑定页面链接
创建页面
选项卡绑定链接
主板页面设计
1、plus.webview.create
2、plus.webview.currentWebview().append()
3、plus.webview.show
4、plus.webview.hide
代码实现
选项卡点击测试
功能2：app-状态栏布局
沉浸式于非沉浸式
1、采用沉浸式
2、采用非沉浸式
开启沉浸式
配置文件位置
配置内容
效果验收
功能3：app页面模板设计
风格设计
第一屏页面
新开页面
顶部title区域设计
html代码
css代码
效果
中间内容区域设计
位置分析
子窗口区域
html代码
css代码
功能1：选项卡事件绑定
上一章，说了给当前的app添加选项卡，但是这个时候的选项卡，除了点击颜色会变之外，没有其他的功能了。但是实际上我们用app的时候，点击选项卡的选项的时候，会跳转到对应的页面。注意，这边说的是跳转页面，因为mui的官方给的demo其实就是在当前同一个页面里头跳来跳去，有点像vue的路由。
选项卡绑定页面链接
要跳转的页面要实现创建好
创建页面
选项卡绑定链接
其实就是给选项卡的a标签添加href属性值
主板页面设计
主板页面就是在第一屏的页面，总共有5个，包括首页，消息，点名，联系人，通知。
页面的显示需要使用
1、plus.webview.create
表示创建一个子窗口，没错，就是把选项卡页面当做主窗口，其他的主板页面当做主窗口的子窗口，这些子页面都是通过该方式来生成。（生成的时候需要注意设置子页面的位置）
2、plus.webview.currentWebview().append()
表示将子窗口添加到主窗口。
3、plus.webview.show
表示显示被隐藏的已经创建好的子窗口
4、plus.webview.hide
表示隐藏被显示的已经创建好的子窗口
代码实现
上一个步骤的关键代码如下：
// 全局子页面在主页面的位置样式
var subpage_style = {
top: '0px',
bottom: '51px',
};
// 下面的代码写在mui.plusReady里头
var self = plus.webview.currentWebview();
//当前激活选项
var activeTab = "html/home.html";
var current = plus.webview.getWebviewById(activeTab);
if (current==null) {
current = plus.webview.create(activeTab, activeTab, subpage_style);
self.append(current);
} else {
current.show();
}
var aniShow = {};
aniShow[activeTab] = "true";
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
}
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios || aniShow[targetTab]) {
if (plus.webview.getWebviewById(targetTab)==null) {
var current = plus.webview.create(targetTab, targetTab, subpage_style);
self.append(current);
} else {
plus.webview.show(targetTab);
}
} else {
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
if (plus.webview.getWebviewById(targetTab)==null) {
var current = plus.webview.create(targetTab, targetTab, subpage_style);
self.append(current);
} else {
plus.webview.show(targetTab, "fade-in", 300);
}
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;选项卡点击测试
往刚刚创建好的每个子页面里头添加一些不一样的文字。
点击选项卡，可以看到点击不同选项卡，显示对应页面的内容。那么就成功了
功能2：app-状态栏布局
沉浸式于非沉浸式
现有的app的状态栏布局整体有两种：
1、采用沉浸式
这种方式：app的内容会融入到状态栏，如：
2、采用非沉浸式
这种方式：app的内容会呈现在状态栏下方，如：
总结：
说白了，就是状态栏要不要呈现内容，比如我们看优酷视频的时候，顶部的状态栏也有视频影像。
开启沉浸式
本次我要做的app大概是一个校园工具类的app，我打算采用沉浸式布局。可以通过manifest设置全局范围内都使用沉浸式布局。
配置文件位置
配置内容
参数解释：
immersed：开启沉浸式
style：设置状态栏样式（light:表示状态文字颜色为白色）
background：设置状态栏背景色
"statusbar": {
"immersed": "supportedDevice",
"style": "light",
"background" : "#fff"
},效果验收
配置完之后，重新运行项目，会发现，子窗口里头的内容会顶到整个页面的最上方，即部分文字和状态栏的系统文字信息重叠了，那么设置就成功了。
功能3：app页面模板设计
上一步，我们已经完成了对app的基础的所有配置。那么为了后续开发方便，我们必须明确所有（或者大部分）的页面的共有风格。
我这边定下来的风格大概就是跟qq或者企业微信一样的效果。
即：
风格设计
第一屏页面
顶部显示title，中间是内容，下面是选项卡
新开页面
新开页面就是只由第一屏页面点击打开的页面，这种页面一般么有选项卡。布局就比较简单了：顶部显示title，中间是内容。
顶部title区域设计
html代码
顶部title我设置的色调是浅蓝色，然后是直接使用mui给的顶部导航栏模板，并在class里头添加了一个mui-fix-bar的样式（这个样式是用来重写mui关于导航栏的默认样式的）
首页
css代码
默认的导航栏的高度是44，颜色是白色，而且是带有阴影的，这不是我想要的效果。所以同构mui-fix-bar样式名，我在mui.css里头新增了一条样式表，来覆盖默认的样式，同时重写mui-title的样式：
.mui-fix-bar {
height: 60px!important;
background-color: #007AFF!important;
padding-top: 20px;
box-shadow: 0 0 0;
}
/* 将文字颜色覆盖为白色 */
.mui-fix-bar .mui-title{
color: white!important;
}效果
这边有些人可能纠结你们的正文内容被导航栏覆盖的问题，这个别担心，下面会讲到。
中间内容区域设计
中间内容区域很多人到现在还是不理解，到底是哪是哪。哈哈，莫急，我来解释：
位置分析
中间区域就是扣除掉顶部title区域和底部选项卡区域，剩余的你能看的到的区域就是中间内容区域。
下面图解的：黄色表示顶部区域，绿色表示中间内容区域，红色表示底部选项卡区域
子窗口区域
子窗口区域就是黄+绿，就是顶部区域+黄色区域
我们通过固定定位，将顶部固定，将中间固定，以此来完全占据整个子窗口
html代码
中间区域的代码，我自己设计如下（加了一个样式名mui-body，用来在mui.css里头设置全局的样式）：
首页
测试一下
css代码
.mui-body{
padding-top: 5px;
position: fixed;
top: 60px;
}