上一章：mui開發app教程-1
目錄
2、plus.webview.currentWebview().append()
功能1：選項卡事件綁定
上一章，說了給當前的app添加選項卡，但是這個時候的選項卡，除了點擊顏色會變之外，沒有其他的功能了。但是實際上我們用app的時候，點擊選項卡的選項的時候，會跳轉到對應的頁面。注意，這邊說的是跳轉頁面，因爲mui的官方給的demo其實就是在當前同一個頁面裏頭跳來跳去，有點像vue的路由。
選項卡綁定頁面鏈接
要跳轉的頁面要實現創建好
創建頁面
選項卡綁定鏈接
其實就是給選項卡的a標籤添加href屬性值
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="html/home.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" href="html/message.html">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="html/sign.html">
<span class="mui-icon mui-icon-list"></span>
<span class="mui-tab-label">點名</span>
</a>
<a class="mui-tab-item" href="html/contact.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">聯繫人</span>
</a>
<a class="mui-tab-item" href="html/notice.html">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">通知</span>
</a>
</nav>
主板頁面設計
主板頁面就是在第一屏的頁面，總共有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關於導航欄的默認樣式的）
<header class="mui-bar mui-bar-nav mui-fix-bar">
<h1 class="mui-title">首頁</h1>
</header>
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裏頭設置全局的樣式）：
<section class="mui-body">
首頁<br>
<h1>測試一下</h1>
</section>
css代碼
.mui-body{
padding-top: 5px;
position: fixed;
top: 60px;
}