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

本文轉載自查看原文 2018-11-16 01:56 1068 NettySpringboot仿微信聊天全棧實戰

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

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

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

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

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

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

H5+和MUI做的一個大致的講解。

現在我們創建的是MUI的項目，我們會基於MUI去做相應的創建、開發。

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 H5+混合移動app MUI使用h5+進行召喚各大APP應用市場調用啟動的包名和方式利用HBuilder開發基於MUI的H5+ app中使用百度地圖定位功能 H5+混合移動app應用開發——app升級移動端默認返回按鍵，使用h5+修改默認事件 H5+混合移動app應用開發——開篇 H5+混合移動app應用開發——坑我太甚 H5+ 移動app學習之二 Native.js H5+混合移動app應用開發——開篇【經驗分享】用HBuilder開發的基於MUI和H5+的APP開發及上架經歷

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

免責聲明！

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