前 言
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項目啦！
項目的目錄結構如下：
2manifest.json文件介紹
項目目錄中的css/img/js/html等文件就不一一贅述了，建好項目後我們需要新增頁面只需要新建HTML文件即可，與開發手機網站的操作一模一樣。
而這裏面最重要的應該就是manifest.json這個文件了，這個文件幾乎包含了我們APP的所有設置，雙擊打開，可以看到這個界面：
底部的選項卡可以看到，這裏麪包含了我們APP的名稱、版本號、首頁文件、應用的圖標、應用的啓動圖片以及我們需要的各種SDK。大家可以根據自己的需求自行設置，此處不再一一贅述。
| 二、APP程序的打包與調試 |
在上面的操作中，我們搭建了一款屬於自己的移動APP項目，那麼這個項目怎麼運行調試，又是怎麼打包成Android以及IOS能夠安裝的APP呢？
1將項目打包成APP
首先，我們來看一下如何和將項目打包成一個能夠安裝的應用程序，這是Hbuilder最便捷的一步，也是傑小瑞老師選擇Hbuilder這款IDE的主要原因之一。
選中項目，點擊Hbuilder頂部導航欄的“發行—>發行爲原生安裝包”，可以看到如下頁面：
點擊打包，就可以在不需要Xcode和 Android SDK的情況下，直接在雲端打包。
打包完成後，就可以得到安卓的apk文件和蘋果的ipa文件。
2直接運行調試
上面介紹的是將項目打包成應用程序，但是開發過程中，我們每個頁面都要進行大量的調試測試，HBuilder也是支持的。常用的方式有多種，直接通過瀏覽器調試，通過手機運行調試，通過模擬器調試，都是可以。
點擊運行，就可以選擇調試模式啦~~此處不再贅述，如果需要可以評論留言哦！
| 三、MUI框架與HTML5+框架介紹 |
上面提到，HBuilder編輯器、MUI框架、HTML5+框架都是數字天堂公司的知名產品。那麼MUI框架和HTML5+框架都是幹什麼的呢？
1MUI框架
MUI框架號稱是“最接近原生APP體驗的高性能前端框架”，當然這是官方的口號，傑小瑞老師不負責吹牛~ 官方文檔地址：http://dev.dcloud.net.cn/mui/
經過我們的親身體驗，MUI框架確實對得起他的口號，當然也有很大的進步空間需要提升。 但是配合HBuilder的使用，如此般順滑的操作體驗會讓你不敢相信自己在敲代碼。 MUI給我們提供了大量的組件，只需要在HBuilder中輸入一個”m”開頭，就可以同列表中選擇形形色色各種組件！
選中你需要的任意一個組件，回車，一大段代碼直接生成！比如我們選擇第一個maccordion回車，就會直接生成一大段代碼，如下：
運行之後，就可以看到一個摺疊面板：
這相比於其他框架需要自己手寫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文件”，這樣可以幫助我們自動導入所需要的各種默認配置。
創建完成後的第一個文件，代碼以及詳細解釋如下：
<!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" 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個重要功能~！是不是劇透了呢~~生成的頁面效果如下：
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 首頁最終效果預覽
當然這裏面還有很多功能我們暫時沒有實現，後面的博客我們繼續再見吧！
如若想要源碼可戳http://www.jredu100.com/index.php?m=content&c=index&a=show&catid=65&id=38自行下載。
出處：http://www.cnblogs.com/jerehedu/
版權聲明：本文版權歸煙臺傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
技術諮詢：
