簡介
最近在看Dcloud的MUI框架，MUI封裝了android、ios等多個平臺的原生接口，達到開發一個項目，采取不同打包方式，生產多種平臺的app。
無可厚非，對于從事java web開發的工程師，帶來了極大的福音，再也不用去花太多時間去學習原生的android、ios語言，大大縮短了app開發的學習周期和成本。
當然，既然是做了封裝處理，肯定性能上面不如原生。但是Dcloud官方聲稱MUI是最接近原生App體驗的前端框架，并且在一些低端機上的表現也比較理想，想必也做了不少優化處理，另一方面，隨著手機市場的激烈競爭，手機配置及價格都越來越讓人滿意，性能問題就愈發的可以忽略不計，畢竟項目周期和成本也相當的重要！之前也了解過PhoneGap框架（僅僅是了解），據說，MUI的性能要比PhoneGap好。當然，僅僅是代表鄙人的觀點，暫時也沒有在重型或者大數據量項目上做過驗證，只好大家各自體驗了。
看得出來Dcloud還是做了不少事情的，再加上國產，這個還是要支持的！
MUI官方地址：http://www.dcloud.io/mui.html
好了，廢話不多說，下面進入正題。
要用app請求http接口當然要分別有http接口和app應用。
1.創建http接口
我這里是做了一個很簡單的java servlet的項目。
新建java web項目，項目名myhttp。web.xml中配置一個名為login的servlet請求：
<servlet> <servlet-name>login</servlet-name> <servlet-class>demo.webservice.LoginServlet</servlet-class></servlet><servlet-mapping> <servlet-name>login</servlet-name> <url-pattern>/login.do</url-pattern></servlet-mapping>
demo.webservice目錄下的LoginServlet.java代碼：
package demo.webservice;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@SuppressWarnings("serial")public class LoginServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("進入post方法！"); req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); PrintWriter out = resp.getWriter(); String name = req.getParameter("name"); String pwd = req.getParameter("password"); if("admin".equals(name) && "123".equals(pwd)){ //驗證通過 out.write("Login Success!"); }else{ out.write("Login Fail!"); } out.flush(); out.close(); }}這里做了一個很簡單的驗證示例，若輸入用戶名和密碼分別為“admin”、“123”，即驗證通過，返回“Login Success”，否則返回“Login Fail”。因為僅僅是個示例，就不去連數據庫啦！
OK，web端的http接口就開發完成了，通過地址“http://[ip地址]:[端口]/myhttp/login?name=admin&password=123“即可訪問該servlet請求，得到返回結果。
我這里裝逼格了一下，把web應用發布到了自己的服務器上，模擬實際場景嘛！當然大家在本地也是可以的，可以通過瀏覽器訪問本地項目地址訪問。HBuilder工具是支持本地瀏覽器調試的。
2.使用HBuilder創建基于MUI框架的App
既然是基于MUI框架的App，當然要用Dcloud推出的HBuilder這款IDE開發啦，另外說明下，這款IDE開發前臺確實超級棒，可以大幅度提升開發效率，HBuilder是基于Eclipse改造的，同時添加了很多便利的提示和快捷鍵功能，同時還支持EMMET規則。用官方的話就是：飛速編碼的極客工具，手指爽，眼睛爽――讓手爽，飛一般的編碼（這里不是打廣告哈，自己親身體驗過，確實很方便）。
在HBuilder中新建項目――移動App，輸入應用名稱（我這里應用名為MUIDemo1），選擇“mui項目”。
點擊完成，便生成了一個已包含mui的js、css、字體資源的項目模板。如圖所示：
OK，一個基礎的App應用的框架就搭建好了。
3.頁面編寫，具體調用接口實現。
下面開始編寫具體頁面和實現接口的調用。
我這里為了方便，直接從”HelloMUI”項目模板中examples目錄下copy了一個ajax.html示例頁面置于MUIDemo1項目的根目錄下。大家可以在新建移動App項目時選擇“Hello mui”模板即可生成。
打開ajax.html頁面，里面的一些css、js引入路徑需要改一下，因為我直接把ajax.html頁面放到了我新建項目中的根目錄（原來是在examples目錄下）。
這里說明下，MUI是采用ajax方式發送請求的，平時習慣，一些我們在后臺的代碼處理MUI都是在js中編寫的(現在的js不僅僅涉及前端的技術了，比如node.js)。
因為ajax.html中已經包含了一個完整的ajax請求示例，所以，只需要在這基礎上做下修改即可。修改后的頁面代碼如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Ajax Login</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--標準mui.css--> <link rel="stylesheet" href="./css/mui.min.css" rel="external nofollow" > <!--App自定義的css--> <link rel="stylesheet" type="text/css" href="./css/login.css" rel="external nofollow" /> <style> .mui-content-padded { padding: 5px; } body,body .mui-content { background-color: #fff !important; } code { word-wrap: break-word; word-break: normal; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } </style> </head> <body> <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">用戶登陸</h1> </header> <div class="mui-content"> <div class="mui-content-padded" style="padding-bottom: 50px;"> <p style="text-indent: 22px;margin-bottom: 50px;"> 用戶登錄示例：正確用戶名及密碼admin,123。輸入正確提示成功，否則提示失敗，測試ajax請求http接口示例。 </p> <!--<h4 class="mui-content-padded">登陸</h4>--> <div class="mui-input-group"> <div class="mui-input-row"> <label>用戶名：</label> <input id="name" type="text" class="mui-input-clear" placeholder="用戶名/郵箱"> </div> <div class="mui-input-row mui-password"> <label>密 碼：</label> <input id="password" type="password" class="mui-input-password" placeholder="請輸入密碼"> </div> <div class="mui-input-row"> <label>類 型：:</label> <select id="dataType"> <option value="html">HTML</option> <option value="json">JSON</option> <option value="xml">XML</option> </select> </div> <div class="mui-input-row"> <label>方 式:</label> <select id="method"> <option value="post">POST</option> <option value="html">GET</option> </select> </div> <div class="mui-button-row"> <button type="button" id="confirm" class="mui-btn mui-btn-primary">登 陸</button> </div> </div> <h4 class="mui-content-padded">返回結果：</h4> <code id="response"></code> </div> </div> <script src="./js/mui.min.js"></script> <script> (function($) { $.init({ swipeBack:true //啟用右滑關閉功能 }); var network = true; if(mui.os.plus){ mui.plusReady(function () { if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){ network = false; } }); } var nameEl = document.getElementById("name"); var passwordEl = document.getElementById("password"); var respnoseEl = document.getElementById("response"); var dataTypeEl = document.getElementById("dataType"); var methodEl = document.getElementById("method"); //成功響應的回調函數 var success = function(response) { console.log('響應成功！'); var dataType = dataTypeEl.value; if (dataType === 'json') { response = JSON.stringify(response); } else if (dataType === 'xml') { response = new XMLSerializer().serializeToString(response).replace(/</g, "<").replace(/>/g, ">"); } respnoseEl.innerHTML = response; }; //設置全局beforeSend $.ajaxSettings.beforeSend = function(xhr, setting) { //beforeSend演示,也可在$.ajax({beforeSend:function(){}})中設置單個Ajax的beforeSend console.log('beforeSend:::' + JSON.stringify(setting)); }; //設置全局complete $.ajaxSettings.complete = function(xhr, status) { console.log('complete:::' + status); } var ajax = function() { console.log('進入ajax方法...'); //利用RunJS的Echo Ajax功能測試 var url = 'http://120.24.44.11:8080/myhttp/login.do'; //請求方式，默認為Get； var type = methodEl.value; //預期服務器范圍的數據類型 var dataType = dataTypeEl.value; //發送數據 console.log('url:'+ url + ",type:" + type + ",dataType:" + dataType); var data = { name: nameEl.value, password: passwordEl.value }; /*url = url + (dataType === 'html' ? 'text' : dataType);*/ respnoseEl.innerHTML = '正在請求中...'; if (type === 'get') { if (dataType === 'json') { $.getJSON(url, data, success); } else { $.get(url, data, success, dataType); } } else if (type === 'post') { $.post(url, data, success, dataType); } }; //發送請求按鈕的點擊事件 document.getElementById("confirm").addEventListener('tap', function() { if(network){ console.log('網絡正常,正在發送請求...'); ajax(); }else{ mui.toast("當前網絡不給力，請稍后再試..."); } }); //點擊描述中鏈接時，打開對應網頁介紹； $('body').on('tap', 'a', function(e) { var href = this.getAttribute('href'); if (href) { if (window.plus) { plus.runtime.openURL(href); } else { location.href = href; } } }); })(mui); </script> </body></html>大家注意把url改成自己對應的請求地址。具體代碼就不需要講解了，都比較簡單。
頁面編寫好后，可以用USB把手機插上電腦，直接在手機上運行查看效果，也可以采用瀏覽器調試都非常方便。效果如下：
Chrome
iphone(或android機)
一切就緒，準備測試下效果。首先雙擊“manifest.json”文件，更改頁面入口為“ajax.html”，保存。
選擇在我的iphone上運行，這時候看手機發現已經安裝好了應用，控制面板提示安裝成功，點擊圖標打開應用，顯示上圖頁面。輸入用戶名“admin”，密碼“123”，點擊“登錄”（因為我的請求類型和請求方式分別為HTML、Post，所以不用改變，直接默認），返回結果提示：“Login Success”，修改下密碼再次登錄，提示“Login Fail”,如下圖：
圖1（返回成功）：
圖2（返回失敗）：
綜上所述，基于MUI進行移動App開發更符合我們做java web“程序猿”的口味。開發過程中通過查看官方API及examples示例，有現成的一些東西可以利用，加上國產，API也沒有語言障礙，所以感覺MUI是個不錯的框架，本人無MUI開發經驗，僅僅是淺嘗甜頭，需要學習的還很多，希望接下來時間MUI可以讓自己在移動方面有所彌補。
以上這篇使用MUI框架構建App請求http接口實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
