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

時間 2019-11-05

標籤 mui 框架開發 html5 html 手機 app 搭建第一個欄目 HTML5 简体版

原文原文鏈接

前言javascript

JReduphp

　隨着HTML5的不斷髮展，移動開發成爲主流趨勢！愈來愈多的公司開始選擇使用HTML5開發手機APP，而隨着手機硬件設備配置的不斷提高，各類開發框架的不斷優化，也使着H5開發的混合APP的體驗愈來愈趨於原生！那麼在本系列博客中，咱們就來一探H5開發APP的神祕面紗吧~~css

1、移動APP項目搭建

因爲咱們的H5編寫的都是一個個網頁，須要使用瀏覽器打開才能使用，這顯然不是APP的使用方式。那麼咱們才能將一個手機網站，封裝成一個APP呢？時下熱門的Cordova、PhoneGap、appMobi、WeX5等…都是主流的構建APP工具！可是這些工具備一個共同的特色——使用麻煩！！html

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

HBuilder下載地址：http://www.dcloud.io/ ，下載完成後傻瓜式安裝便可。java

1使用HBuilder新建移動APP項目

HBuilder安裝成功之後，就能夠新建一個移動APP項目啦！點擊「文件—>新建—>移動APP」,輸入你的項目名稱，就能夠搭建完成一個移動APP項目啦！web

項目的目錄結構以下：json

2manifest.json文件介紹

項目目錄中的css/img/js/html等文件就不一一贅述了，建好項目後咱們須要新增頁面只須要新建HTML文件便可，與開發手機網站的操做如出一轍。數組

而這裏面最重要的應該就是manifest.json這個文件了，這個文件幾乎包含了咱們APP的全部設置，雙擊打開，能夠看到這個界面：瀏覽器

底部的選項卡能夠看到，這裏麪包含了咱們APP的名稱、版本號、首頁文件、應用的圖標、應用的啓動圖片以及咱們須要的各類SDK。你們能夠根據本身的需求自行設置，此處再也不一一贅述。

2、APP程序的打包與調試

在上面的操做中，咱們搭建了一款屬於本身的移動APP項目，那麼這個項目怎麼運行調試，又是怎麼打包成Android以及IOS可以安裝的APP呢？

1將項目打包成APP

首先，咱們來看一下如何和將項目打包成一個可以安裝的應用程序，這是Hbuilder最便捷的一步，也是傑小瑞老師選擇Hbuilder這款IDE的主要緣由之一。

選中項目，點擊Hbuilder頂部導航欄的「發行—>發行爲原生安裝包」，能夠看到以下頁面：

點擊打包，就能夠在不須要Xcode和 Android SDK的狀況下，直接在雲端打包。

打包完成後，就能夠獲得安卓的apk文件和蘋果的ipa文件。

2直接運行調試

上面介紹的是將項目打包成應用程序，可是開發過程當中，咱們每一個頁面都要進行大量的調試測試，HBuilder也是支持的。經常使用的方式有多種，直接經過瀏覽器調試，經過手機運行調試，經過模擬器調試，都是能夠。

點擊運行，就能夠選擇調試模式啦~~此處再也不贅述，若是須要能夠評論留言哦！

3、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+調用原生攝像頭、寫入原生文件等能力進行演示。

4、搭建第一個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">
            一、頁面加載子頁&列表跳轉詳情頁並傳參
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            二、 底部選項卡切換(Div模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            三、底部選項卡切換(WebView模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            四、底部選項卡切換(自定義)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            五、圖片輪播組件
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            六、HTML5+攝像頭使用
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            七、下拉刷新&上拉加載更多&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,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})