第5章使用MUI與H5+構建移動端app

時間 2019-11-18

標籤使用 mui h5 構建移動 app 欄目無線简体版

原文原文鏈接

H5+是JS封裝的工具集合，經過H5+咱們就可使用JS的方式去調用到咱們手機端上的一些原生的組件。javascript

http://dev.dcloud.net.cn/mui/css

http://dev.dcloud.net.cn/mui/ui/html

開發過微信小程序或者說Bootstrap，那麼使用起來是很是的簡單和方便。html5

http://ask.dcloud.net.cn/docs/java

http://www.html5plus.org/doc/ios

H5+和MUI作的一個大體的講解。web

如今咱們建立的是MUI的項目，咱們會基於MUI去作相應的建立、開發。json

mui.css和mui.min.css是同樣的，只不過mui.min.css是壓縮過的。mui.js和mui.min.js是同樣的，只不過mui.min.js是壓縮過的。manifest.json是針對手機端的一些相應的配置。項目完成以後再去說如何去打包、如何去安裝、如何去設置。小程序

content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"

content包含的這段內容可讓咱們的頁面適應到咱們的手機端。新建一個mui項目的時候咱們的頁面它都會去幫咱們建立的，因此咱們不須要去多care。mui.min.css包含了一些封裝好的類庫。mui框架將不少功能配置都集中在mui.init方法中，它就至關因而一個開關。咱們不會在mui.init方法裏面去作設置狀態欄顏色。微信小程序

http://dev.dcloud.net.cn/mui/util/#init

微信分爲兩大塊，微信的頁面會在上面一部分它實際上是一個header標題欄，不少APP都是這樣子，一開始會有一個標題欄，下面會有導航。咱們會使用MUI的方式去把咱們當前的頁面來作一些相應的格局。第一個步驟把header標題欄寫一下。

它的headerMUI爲咱們作了一個相應的封裝。咱們只須要寫一個代碼塊(快捷字符串)，

http://dev.dcloud.net.cn/mui/snippet/

咱們的標題欄header就已經在頁面上進行了展現。MUI爲咱們提供了極簡單的開發流程，縮短了開發時間，時間就是成本。標題有了，符合手機的基本佈局。微信實際上是一個黑底白字，咱們這裏採用慕課網官方的顏色。咱們只須要建立一個CSS樣式覆蓋它原有的就能夠了。

#c9394a是慕課網的顏色。header.css編寫完畢以後，導入到頁面的mui.min.css下面。

<body>
    <header class="mui-bar mui-bar-nav title">
        <h1 class="mui-title title-color">標題</h1>
    </header>
</body>

.title{
    background-color: #c9394a;
}

.title-color{
    color: white;
}

    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/header.css" />
    <script type="text/javascript" charset="utf-8">
          mui.init();
    </script>

header的底色和header文字的顏色都已是作了相應的改變。

經過自定義的樣式去覆蓋它原有的樣式的顏色。

<body>
    <header class="mui-bar mui-bar-nav title">
        <h1 class="mui-title title-color"><b>慕信</b></h1>
    </header>
</body>

每當你開發一部分的頁面，開發完一部分的功能，咱們就須要到手機上去調一調看一看。若是作真機測試，有兩臺設備，一臺是安卓一臺是ios，或者安卓的平板和ipad也沒有問題。我準備了兩臺手機，一臺是iphone，一臺是安卓手機。ios設備必需要安裝iTools，有了iTools才能夠去作相應的調試。你的手機插入以後，開發工具沒有顯示的話，你把開發工具先關閉再打開重啓一下，它就會去找到你的ios設備了。

安卓開發者確定要使用到debug，它其實有一個usb debug，你打開usb debug以後，設備才能夠被開發工具給識別到，無論你使用的是安卓開發者工具，仍是HBuilder，其實都是同樣的道理。你開啓usb調試以後，你就能夠經過HBuilder基座去運行去看一下咱們的項目。

在使用安卓的時候其實會有一些坑。若是手機的設備它的版本很是高，那麼有可能會找不到。我在升級完手機版本以後，使用HBuilder開發者工具就不能夠再去作真機調試。因爲手機的UI定製化功能比較多，因此有可能會影響我們這個功能。降級完以後就能夠去使用了。點擊HBuilder基座運行，它其實就是把apk傳輸到手機上進行安裝。

adb它是一個安卓的進程。不一樣的電腦助手/病毒軟件可能會幫你安裝額外的adb.exe這樣的進程。若是說它幫你安裝了的話，你必定要去關掉殺掉。本節的真機的調試就是到這裏。

咱們須要把標題欄的樣式和header進行統一。如何去修改？那麼咱們就須要用到plus的功能。用H5+原生的功能，原生的功能就是H5+，H5+能夠操做你原生的機子上的相應的樣式等等。

打開H5+的文檔：http://www.html5plus.org/doc/zh_cn/navigator.html

Navigator就是手機端的導航。

什麼是plusReady()？plus是指咱們的設備，Ready是指就緒準備完成。mui.plusReady();就是指咱們的移動設備就緒完畢以後，咱們能夠去作一些一系列的操做。如今咱們是要去操做手機上原生的標題欄。咱們既然要去操做原生是經過咱們的手機設備，也就是咱們的plus，plus就表明咱們的手機設備，因此說必定要在咱們的整個項目、咱們的APP加載完畢以後，咱們的設備就緒完成以後，你才能夠去對它原生的一些相應的API作操做。在function裏面對咱們原生的樣式作編寫。setStatusBarBackground這個顏色咱們會使用慕課網官方的顏色。背景顏色有了還要有一個字體顏色。

    <script type="text/javascript" charset="utf-8">
          mui.init();
          mui.plusReady(function(){
              plus.navigator.setStatusBarStyle("light");
              plus.navigator.setStatusBarBackground("#C9394A");
          });
    </script>

標題欄就變成了和header一樣的顏色，這樣總體的樣式就統一了。首頁的基本的雛形有了。微信的首頁的下方實際上是一個tab頁面。對於這樣的一個菜單欄，其實咱們稱之爲一個tab，它是一個選項卡。在作web開發的時候，其實也是有一個相似的相應的組件。MUI它爲咱們提供了這樣的方便。mTab有三種，第一種mTab是一個基礎的、最簡單的一種，當你點擊切換的時候，咱們是須要進行一個不一樣頁面的切換，不一樣的頁面在咱們的混合APP裏面來開發去講的話，對於每個頁面它其實都是一個WebView，當咱們點擊不一樣的選項卡的時候，進行一個item.type的切換，咱們實際上是不一樣的WebView頁面進行一個顯示和秀。mTabSegmented是div的選項卡，這種選項卡是咱們不推薦的，由於它是經過div來進行的加載，mTabSegmented還有一種是左右能夠拖動拉伸的選項卡，咱們不會使用這兩種。由於它是一個div的，它經過一個相應的JS操做把不一樣的div進行展示和隱藏。這種方式的話若是說咱們的頁面上會有不少不少的項目，在這個時候，隨着時間的推移和系統版本的迭代，咱們的頁面的容量的體積會愈來愈大，這樣子是很差的，尤爲是在一些低端機子上，一些低端的安卓機上，會引發卡斷，那麼因此呢咱們會使用mTab底部選項卡。

在header下面就能夠去作相應的構建了。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首頁</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">電話</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">郵件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">設置</span>
        </a>
    </nav>

如今針對四個圖標(icon)進行相應的設置。MUI的不少icon(圖標)都已是加載到MUI庫裏面去了。http://dev.dcloud.net.cn/mui/ui/#icon

這一塊代碼是由一個nav組件所包含了。四個a標籤所構成的一個單獨的選項。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-weixin"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">電話</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">郵件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">設置</span>
        </a>
    </nav>

發現是一個小飛機。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-weixin"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">通信錄</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-paperplane"></span>
            <span class="mui-tab-label">發現</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">我</span>
        </a>
    </nav>

如今咱們已經基於MUI它自帶的icon庫把咱們tab頁裏的圖標進行了一個相應的替換，若是說咱們想使用某些tab頁面，不論是tab頁面仍是某些單獨的頁面，咱們會有一些其餘的額外的圖標。那麼這個時候可能在咱們這個MUI裏面它並無提供。其實咱們還有另一種方式去進行額外的擴展。引入另一個圖標庫，這是一個阿里提供的icon庫：http://www.iconfont.cn/。

由於一個項目裏面可能會有不少不少圖標，咱們能夠總體地進行一個相應的打包，比方說咱們添加至項目。

file:///G:/download/fontico/demo_fontclass.html

咱們自定義的圖標實現了。

<nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon iconfont icon-fire"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-tongxunlu"></span>
            <span class="mui-tab-label">通信錄</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-zhinanzhen"></span>
            <span class="mui-tab-label">發現</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-wode"></span>
            <span class="mui-tab-label">我</span>
        </a>
    </nav>

圖標選中的顏色是由系統自動分配的。第一個a標籤裏面，mui-active是指頁面打開的時候默認地會由哪個tab顯示。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-fire"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item mui-active">
            <span class="mui-icon iconfont icon-tongxunlu"></span>
            <span class="mui-tab-label">通信錄</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-zhinanzhen"></span>
            <span class="mui-tab-label">發現</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-wode"></span>
            <span class="mui-tab-label">我</span>
        </a>
    </nav>

修改mui-active就能夠修改圖標選中的顏色。mui-active是在mui-bar-tab之下，又是在每個mui-tab-item裏面的，因此咱們把它們作一個相關聯。

header.css

.mui-bar-tab .mui-tab-item.mui-active {
    color: #c9394a;
}

如何去自定義icon本身的圖標庫以及自定義的顏色。選項卡已是有了以及切換不一樣選項的時候，那麼它的顏色會發生相應的更改，其實就是選中某一個選項。頁面在混合APP裏面其實就是一個WebView。

若是建立一個項目，它帶有一個index，那麼它的一個css和js是放在一塊兒的。若是咱們單首創建一個HTML的話，它的js是放在咱們頁面的下方，也就是body標籤的最尾部。

    <body>
        
        <h1>聊天記錄</h1>
        
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
    </body>

把四個頁面加入到主頁面裏面去，如今就須要編寫JS代碼了。建立一個子頁面的數組，把全部的子頁面都定義一下。這個數組裏面會有四個頁面級的對象。對象裏面針對每個頁面它會有一個頁面的id以及每個頁面的路徑(頁面的url)。pageId和頁面是一一對應的。頁面是什麼名字，pageId也是什麼名字，由於頁面是惟一的，因此它對應的pageName和pageUrl所有都是惟一的。第一個頁面級對象就已是建立了。這四個頁面級對象都已經在咱們的muxinArray數組裏面去了。

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
    </script>

有了數組以後咱們就須要對這個數組作一個循環，循環把每個頁面進行建立，建立完以後再添加到咱們當前的頁面裏面去吧。頁面添加的操做是基於WebView，WebView是plus裏面，它是屬於設備，它是屬於設備裏面的對象。咱們須要在這個設備就緒以後才能去作相應的操做。首先咱們要獲取當前的index的WebView，由於咱們是要把不一樣的子頁面追加到當前的WebView，因此咱們要得到當前的WebView。如何獲取當前首頁的WebView？

http://www.html5plus.org/doc/zh_cn/webview.html

http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create

url就是咱們剛剛在定義一個Array的時候每個頁面它所在的路徑，id是咱們賦給它的，styles是指咱們要去展示的子頁面它的一個顯示樣式是什麼，extras這是一個額外的意思，extras能夠作一個參數傳遞，不論是json對象仍是字符串仍是數字均可以作一些相應的屬性的傳遞。

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        mui.plusReady(function(){
            // 獲取當前的webview對象
            var indexWebview = plus.webview.currentWebview();
            
            // 向當前的主頁webview追加子頁的4張webview對象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId);
                // 隱藏webview窗口
                muxinPage.hide();
                // 追加每個子頁面到當前的主頁面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
        });
    </script>

WebView是plus裏面的對象，plus是咱們的設備，瀏覽器不能夠作設備上的測試，瀏覽器只能夠看頁面的樣式以及調整頁面的樣式。設備上的測試必需要使用真機測試。

header和tab選項卡都被聊天記錄這個頁面所遮擋。對被展現的子頁面進行設置，限制它的高度和距離。底部的位置分別是44和50。

作樣式的修改。

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        var muxinStyle = {
            top: "44px",
            bottom: "50px"
        }
        
        mui.plusReady(function(){
            // 獲取當前的webview對象
            var indexWebview = plus.webview.currentWebview();
            
            // 向當前的主頁webview追加子頁的4張webview對象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId,muxinStyle);
                // 隱藏webview窗口
                muxinPage.hide();
                // 追加每個子頁面到當前的主頁面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
        });
    </script>

找一下mui的文檔，查一下事件管理。tab能夠是一個批量的綁定，針對<nav>標籤裏面的每個<a>標籤作一個事件的綁定。http://dev.dcloud.net.cn/mui/event/

tap是手指觸摸的事件，就是單擊事件，不推薦去使用click，由於click是針對web開發用的，對於咱們APP來說，大部分的觸摸事件都是一個tap事件。之前在開發小程序的時候，小程序也是經過一個bindtap去作一個單擊事件的綁定，mui也是同樣，也是相似，因此統一使用tap作事件的類型。使用選擇器找到這個class：mui-bar-tab，再去綁定到全部的<a>標籤。webview的show方法plus.webview.show的第二個參數是動畫效果。http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow。通常咱們會使用fade-in從透明到不透明逐漸顯示效果，延遲時間通常咱們會使用200ms。

webview的隱藏也有相應的效果。可使用fade-out從不透明到透明逐漸隱藏的動畫。http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        var muxinStyle = {
            top: "44px",
            bottom: "50px"
        }
        
        mui.plusReady(function(){
            // 獲取當前的webview對象
            var indexWebview = plus.webview.currentWebview();
            
            // 向當前的主頁webview追加子頁的4張webview對象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId,muxinStyle);
                // 隱藏webview窗口
                muxinPage.hide();
                // 追加每個子頁面到當前的主頁面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
            
            // 批量綁定tap事件，展現不一樣的頁面
            mui(".mui-bar-tab").on("tap", "a", function() {
                var tabindex = this.getAttribute("tabindex");
            
                // 顯示點擊的tab選項所對應的頁面
                plus.webview.show(muxinArray[tabindex].pageId,"fade-in",200);
                
                // 隱藏其餘的不須要的頁面
                for(var i=0; i< muxinArray.length ; i ++){
                            if(i != tabindex){
                               plus.webview.hide(muxinArray[i].pageId, "fade-out", 200);
                            }
                }
            
            
            });
            
        });
        

        
    </script>

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        var muxinStyle = {
            top: "44px",
            bottom: "50px"
        }
        
        mui.plusReady(function(){
            // 獲取當前的webview對象
            var indexWebview = plus.webview.currentWebview();
            
            // 向當前的主頁webview追加子頁的4張webview對象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId,muxinStyle);
                // 隱藏webview窗口
                muxinPage.hide();
                // 追加每個子頁面到當前的主頁面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
            
            // 批量綁定tap事件，展現不一樣的頁面
            mui(".mui-bar-tab").on("tap", ".mui-tab-item", function() {
                var tabindex = this.getAttribute("tabindex");
            
                // 顯示點擊的tab選項所對應的頁面
                plus.webview.show(muxinArray[tabindex].pageId,"fade-in",200);
                
                // 隱藏其餘的不須要的頁面
                for(var i=0; i< muxinArray.length ; i ++){
                            if(i != tabindex){
                               plus.webview.hide(muxinArray[i].pageId, "fade-out", 200);
                            }
                }
            
            
            });
            
        });
        

        
    </script>