天天看點
傳回

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

MUI架構開發HTML5手機APP(一)--搭建第一個手機APP

  前  言

JRedu

　随着HTML5的不斷發展，移動開發成為主流趨勢！越來越多的公司開始選擇使用HTML5開發手機APP，而随着手機硬體裝置配置的不斷提升，各種開發架構的不斷優化，也使着H5開發的混合APP的體驗越來越趨于原生！那麼在本系列部落格中，我們就來一探H5開發APP的神秘面紗吧~~

一、 移動APP項目搭建

由于我們的H5編寫的都是一個個網頁，需要使用浏覽器打開才能使用，這顯然不是APP的使用方式。 那麼我們才能将一個手機網站，封裝成一個APP呢？ 時下熱門的Cordova、PhoneGap、appMobi、WeX5等…都是主流的建構APP工具！但是這些工具有一個共同的特點——使用麻煩！！

是以，我們介紹一種最簡便的建構的方式，使用HBuilder一鍵打包！HBuilder是數字天堂旗下的一款前端開發IDE，其功能強大遠超你想象，我們使用的MUI架構，HTML5+架構，都是數字天堂旗下産品，Hbuilder+MUI這對好基友，簡直就是絕配！

HBuilder下載下傳位址：http://www.dcloud.io/ ，下載下傳完成後傻瓜式安裝即可。

1使用HBuilder建立移動APP項目

HBuilder安裝成功以後，就可以建立一個移動APP項目啦！點選“檔案—>建立—>移動APP”,輸入你的項目名稱，就可以搭建完成一個移動APP項目啦！

項目的目錄結構如下：

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

2manifest.json檔案介紹

項目目錄中的css/img/js/html等檔案就不一一贅述了，建好項目後我們需要新增頁面隻需要建立HTML檔案即可，與開發手機網站的操作一模一樣。

而這裡面最重要的應該就是manifest.json這個檔案了，這個檔案幾乎包含了我們APP的所有設定，輕按兩下打開，可以看到這個界面：

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

底部的頁籤可以看到，這裡面包含了我們APP的名稱、版本号、首頁檔案、應用的圖示、應用的啟動圖檔以及我們需要的各種SDK。大家可以根據自己的需求自行設定，此處不再一一贅述。

二、APP程式的打包與調試

在上面的操作中，我們搭建了一款屬于自己的移動APP項目，那麼這個項目怎麼運作調試，又是怎麼打包成Android以及IOS能夠安裝的APP呢？

1将項目打包成APP

首先，我們來看一下如何和将項目打包成一個能夠安裝的應用程式，這是Hbuilder最便捷的一步，也是傑小瑞老師選擇Hbuilder這款IDE的主要原因之一。

選中項目，點選Hbuilder頂部導航欄的“發行—>發行為原生安裝包”，可以看到如下頁面：

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

點選打包，就可以在不需要Xcode和 Android SDK的情況下，直接在雲端打包。

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

打包完成後，就可以得到安卓的apk檔案和蘋果的ipa檔案。

2直接運作調試

上面介紹的是将項目打包成應用程式，但是開發過程中，我們每個頁面都要進行大量的調試測試，HBuilder也是支援的。常用的方式有多種，直接通過浏覽器調試，通過手機運作調試，通過模拟器調試，都是可以。

點選運作，就可以選擇調試模式啦~~此處不再贅述，如果需要可以評論留言哦！

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP
三、MUI架構與HTML5+架構介紹

上面提到，HBuilder編輯器、MUI架構、HTML5+架構都是數字天堂公司的知名産品。那麼MUI架構和HTML5+架構都是幹什麼的呢？

1MUI架構

MUI架構号稱是“最接近原生APP體驗的高性能前端架構”，當然這是官方的口号，傑小瑞老師不負責吹牛~ 官方文檔位址：http://dev.dcloud.net.cn/mui/ 

經過我們的親身體驗，MUI架構确實對得起他的口号，當然也有很大的進步空間需要提升。 但是配合HBuilder的使用，如此般順滑的操作體驗會讓你不敢相信自己在敲代碼。 MUI給我們提供了大量的元件，隻需要在HBuilder中輸入一個”m”開頭，就可以同清單中選擇形形色色各種元件！

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

選中你需要的任意一個元件，回車，一大段代碼直接生成！比如我們選擇第一個maccordion回車，就會直接生成一大段代碼，如下：

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

運作之後，就可以看到一個折疊面闆：

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

這相比于其他架構需要自己手寫Class的方式，這種操作是不是順滑到不能想象呀！麻麻再也不用擔心你記不住這麼多class名字了~~ 是以，MUI提供了這麼多的元件，使用如此簡單，我們也就不再一一講解了。感興趣的同學，可以進入幫助文檔http://dev.dcloud.net.cn/mui/ui/ 檢視所有元件。

我們後面的内容，将主要針對MUI中的頁面跳轉、頁籤切換、Ajax、下拉重新整理&上拉加載、調取底層攝像頭的功能展開講解。

2HTML5+架構介紹

上面我們介紹了MUI架構的基本使用。也了解到了MUI的主要功能是搭建APP的頁面布局所使用的架構。那麼HTML5+則是增強版的手機浏覽器引擎，讓HTML5達到原生水準！二維碼、語音輸入、搖一搖、攝像頭、檔案系統、微信分享……等幾乎你能想到的原生底層功能，HTML5+都能幫你實作。

官方給出了一句話： 40萬原生API能力随意調用。功能可謂強大，可以點選進入詳細了解：http://www.dcloud.io/runtime.html 

後續的文章中，我們也會使用到HTML5+調用原生攝像頭、寫入原生檔案等能力進行示範。

四、搭建第一個APP應用

介紹完了APP搭建的基本内容，我們就開始制作我們第一個移動APP吧。首先，我們為我們的APP制作一個首頁。

1建立第一個首頁

首先，我們應該建立一個index.html檔案，注意建立的時候選擇“含MUI的html檔案”，這樣可以幫助我們自動導入所需要的各種預設配置。

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

建立完成後的第一個檔案，代碼以及詳細解釋如下：

<!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" />
        <!--導入頁面所需要的MUI的CSS檔案-->
        <link href="css/mui.min.css" target="_blank" rel="external nofollow"  rel="stylesheet" />
    </head>

    <body>
        <!--導入頁面所需要的MUI的JS檔案-->
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            // MUI頁面初始化函數
            mui.init()
        </script>
    </body>
</html>

2搭建首頁HTML布局

首先，我們先在body中輸入“m”選擇mHead，生成頭部導航欄。

<!--頭部APP頂部導航欄區域-->
<header class="mui-bar mui-bar-nav">
    <!--導航欄左上角傳回按鈕，首頁不需要傳回按鈕，删除即可-->
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
    
    <!--導航欄标題-->
    <h1 class="mui-title">傑瑞教育APPDemo</h1>
</header>

在導航欄下面，輸入mbody，生成頁面的主體部分，其實就是一個div。 頁面中除了Header和Footer以外的全部内容，必須包裹在body中。

<div class="mui-content">
    
</div>

緊接着，我們在body中，輸入一個mList，生成一個清單。

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            1、頁面加載子頁&清單跳轉詳情頁并傳參
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            2、 底部頁籤切換(Div模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            3、底部頁籤切換(WebView模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            4、底部頁籤切換(自定義)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            5、圖檔輪播元件
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            6、HTML5+攝像頭使用
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            7、下拉重新整理&上拉加載更多&Ajax
        </a>
    </li>
</ul>

這裡面的7個功能，也就是我們将逐一講解的7個重要功能~！是不是劇透了呢~~生成的頁面效果如下：

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

3為每個清單添加點選事件跳轉頁面

添加點選事件肯定就要用到JS啦~~先介紹幾個非常常用的MUI方法。

3.1 mui.init({})

mui.init方法時MUI的初始化函數，接受一個對象參數，用于進行頁面的各種配置，比如子頁面的加載、頁面預加載等。。。

下面的代碼是利用mui.init在頁面初始化時進行頁面手勢操作的開關：

// 初始化頁面中的MUI控件
      mui.init({
          /*設定各種手勢操作的開關*/
          gestureConfig:{
           tap: true, //預設為true
           doubletap: true, //預設為false
           longtap: true, //預設為false
           swipe: true, //預設為true
           drag: true, //預設為true
           hold:false,//預設為false，不監聽
           release:false//預設為false，不監聽
        }
      });

3.2 mui.ready()

Mui.ready()是MUI架構中的文檔就緒函數，表示mui架構已經加載完畢，接受一個回調函數，功能上有些類似于JQuery的文檔就緒函數。

// 當MUI的頁面DOM加載完成後，執行的函數。 但是，基本都使用mui.plusReady
      mui.ready(function(){
          //console.log("我在plusReady之前調用！");
      })

3.3 mui.plusReady ()

mui.plusReady()方法使用與mui.ready()類似，但是這個方法在執行時間上，略晚于mui.ready()。因為這個方法除了要求MUI架構加載完畢的基礎上，還要求HTML5+運作時必須準備完畢！

是以我們一般用這個函數，來代替JS中的window.onload函數。

//頁面中HTML5+相關的内容加載完畢後，執行的函數。  類似于window.onload = function(){}
      mui.plusReady(function(){
          //console.log("我在mui.ready之後調用！");
      })

3.4 頁面跳轉功能的實作

頁面跳轉功能的實作思路是，我們建立了一個數組，數組中存放着與清單一一對應的連結位址。 然後使用循環給每一個清單list添加點選事件，并打開數組中對應的頁面位址，代碼如下：

var page = ["01-jiazaiziyemian.html","02-tabbarDiv.html","03-tabbarWebView.html","04-tabbarMy.html","05-imglunbo.html","06-Camera.html","07-fullPush.html"];
          
          var arr = document.getElementsByTagName("a");
          for(var i=0; i<arr.length; i++){
              !function(i){
                  // 在手機APP中，事件綁定推薦使用DOM2模型。 用tap事件取代click事件。
                  arr[i].addEventListener("tap",function(){
                      mui.openWindow({
                          url:page[i],
                          id:page[i],
                      })
                  })
              }(i);
          }

3.5 跳轉代碼解釋

上述代碼中，對于很多初學者來說可能會存在一些問題，下面我們來一一解釋一下這部分代碼：

① 移動端開發中使用tap替代click

在移動端開發中，由于使用click事件會存在一定的延遲，嚴重影響使用者體驗，是以我們一律用tap事件取代所有的點選事件。

② 為什麼for循環中嵌套一個自執行函數？

這個問題我們在JS面向對象環節探讨過，由于for循環會在頁面加載時直接循環結束，是以當我們點選list時，其中的i已經變成了數組的長度。 至于為什麼這麼解決，大家可以參考之前的部落格：http://www.cnblogs.com/jerehedu/p/7592124.html 

③mui.openWindow ()是個什麼東西？

mui.openWindow是MUI官方給我們提供的專門用于打開一個新視窗的函數，詳細的使用教程可以參考：http://dev.dcloud.net.cn/mui/window/#openwindow 

而這個函數的完整配置項如下，當然我們上述的操作隻需要一個URL和一個頁面ID即可，而且我們以後的頁面ID基本都使用URL同名的方式哦~

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新頁面頂部位置
      bottom:newage-bottom-position,//新頁面底部位置
      width:newpage-width,//新頁面寬度，預設為100%
      height:newpage-height,//新頁面高度，預設為100%
      ......
    },
    extras:{
      .....//自定義擴充參數，可以用來處理頁面間傳值
    },
    createNew:false,//是否重複建立同樣id的webview，預設為false:不重複建立，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發生後自動顯示，預設為true
      aniShow:animationType,//頁面顯示動畫，預設為”slide-in-right“；
      duration:animationTime//頁面動畫持續時間，Android平台預設100毫秒，iOS平台預設200毫秒；
    },
    waiting:{
      autoShow:true,//自動顯示等待框，預設為true
      title:'正在加載...',//等待對話框上顯示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景區域寬度，預設根據内容自動計算合适寬度
        height:waiting-dialog-height,//等待框背景區域高度，預設根據内容自動計算合适高度
        ......
      }
    }
})

好了，截止到這，我們的首頁就全部搭建完成啦！最終效果如下！

3.6 首頁最終效果預覽

MUI架構開發HTML5手機APP(一)--搭建第一個手機APPMUI架構開發HTML5手機APP(一)--搭建第一個手機APP

當然這裡面還有很多功能我們暫時沒有實作，後面的部落格我們繼續再見吧！

如若想要源碼可戳http://www.jredu100.com/index.php?m=content&c=index&a=show&catid=65&id=38自行下載下傳

轉載于:https://www.cnblogs.com/gankehuang/p/10039050.html

移動開發 json php
上一篇: MUI底部頁籤實作頁面切換
下一篇: VC 操作 outlook的方法

繼續閱讀