JQuery Mobile + Cordova 實戰一

　　好的，今天給大家繼續講解 JQM 和 Cordova 的結合吧。Cordova 和 Phonegap 反正是一個東西，大家就當做一個是舊版（Phonegap）的一個是新版（Cordova）的就行。不同分支而已，具體可以網上搜搜。

　　要實現的效果如下：

　　　　　　　　　  　　　　

　　開始：

　　安裝配置環境：

　　1. 用 Cordova 之前需要大家先 安裝 node.js http://www.nodejs.org/ ，然后把安裝目錄添加到環境變量 PATH中， cmd 輸入 npm -v 看安裝是否成功。

　　2. cmd 輸入 npm install -g cordova 安裝 Cordova。

　　3. 新建個文件夾，然后 cmd cd 進入到那個文件夾。

　　4. 新建Cordova工程， cordova create testCordova com.yjjhebe.testCordova testCordova。在該文件夾下新建了一個Cordova工程。

　　5. 添加 Android 應用，cmd 進入 cd testCordova，輸入 cordova platform add Android。這樣就添加了一個Android版的啦。

　　6. 添加相機插件，輸入命令 cordova plugin add org.apache.cordova.camera。添加了相機功能。后續要用的什么，就在這里添加就可以了（刪除插件：cordova plugin remove org.apache.cordova.camera）。

　　7. eclipse 導入工程

　　

　　8. 然后右鍵工程 testCordova 屬性 選擇 Resource Linked Resources，全部 delete 掉。Resource Filters 全部 remove 掉。

　　9. 這時候看我們的工程，就很好看了。那么接下來就開始我們的 JQM Cordova 之旅吧。

　　細節講解：

　　1. 右鍵屬性 Resource Filters 移除被排除的文件：讓Android工程下的 "assets/www" 和 "res/xml/config.xml" 可見。

　　2. 右鍵屬性 Linked Resources  把鏈接到Android工程下的Cordova工程的 merges文件夾、www文件夾、config.xml 文件 文件刪除。

　　3. 配置 "res/xml/config.xml" 文件中的 <content src="index.html" /> 內容可以更改啟動頁面，默認為 index.html。

　　4. eclipse 工程導入，會看到有兩個工程文件： "testCordova" 和 "CordovaLib"。一個是我們創建的工程，一個是類庫。 從 3.3 以后，Cordova 從 .jar 改成了 Library Project 的形式。 （可是博主想把 Library Project 打包成 jar 形式，可惜沒找到方法，求解答）

　　ps:

　　1. 可能有的人按照上面步驟會出錯或不一定成功，或者有比我更好的方法，請大家用自己的，我也是琢磨半天整理出來，感覺很繁瑣。大家都有什么好的建議請提出，謝謝！

　　2. 每個項目都有一個 CordovaApp_CordovaLib 類庫，我想打包成 jar 包，然后工程直接引用，可惜會報錯，所以就先放着了。求助大家，幫忙解答，謝謝！

　　第一步：

　　好的，先開始建個基本頁面模板。（這里可以參考博主的 JQuery Mobile 實戰一）

　　HTML 代碼：

<!-- Begin PageSingle -->
<div data-role="page" id="pageSingle" >
    <div data-role="header" data-theme="b">
    <h1>單身管理</h1>
    <div data-role="navbar" >
        <ul>
            <li><a href="#" data-transition="fade"  data-theme="c" class="ui-btn-active ui-state-persist" >單身</a></li>
            <li><a href="#pageUnSingle" data-transition="fade"  data-theme="c" >非單身</a></li>
        </ul>
    </div>
    </div>

    <div data-role="content">
        <ul data-role="listview"  id="singleList" data-filter="true" data-filter-placeholder="請輸入姓名或者年齡">
   <!-- 動態 顯示單身列表 -->                                                        
  </ul>
    </div>

    <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist" >單身管理</a></li>
            <li><a href="#pageSystem" data-transition="slide" data-icon="star" >系統消息</a></li>
            <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系統設置</a></li>
        </ul>
    </div>
    </div> 
</div> 
<!-- End PageSingle -->

<!-- Begin PageUnSingle -->
<div data-role="page" id="pageUnSingle">
    <div data-role="header"  data-theme="b" >
    <h1>單身管理</h1>
    <div data-role="navbar">
        <ul>
            <li><a href="#pageSingle" data-transition="fade" data-theme="c" >單身</a></li>
            <li><a href="#" data-transition="fade" class="ui-btn-active ui-state-persist"  data-theme="c" >非單身</a></li>
        </ul>
    </div>
        
    </div>

    <div data-role="content">
        <ul  id="unsingleList" data-role="listview" data-filter="true" data-filter-placeholder="請輸入姓名或者年齡">
            <!-- 動態 顯示非單身列表 -->
        </ul>

    </div>

    <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist">單身管理</a></li>
            <li><a href="#pageSystem" data-transition="slide" data-icon="star">系統消息</a></li>
            <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系統設置</a></li>
        </ul>
    </div>
    </div>

</div> 
<!--- End PageUnSingle-->

　　JS 代碼：

<link rel="Stylesheet" href="js/jquery.mobile-1.4.5.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
    //AJAX服務調用地址
    var server_url = "http://192.101.109.71:80/TestWeb/";

    /** 頁面第一次初始化的時候加載列表 **/
    $(document).on("pageinit", "#pageSingle", function () {
        loadSingleList();
    });

    $(document).on("pageinit", "#pageUnSingle", function () {
        loadUnSingleList();
    });
    
    /** 每次頁面顯示時，重新加載列表  **/
    $(document).on("pageshow", "#pageSingle", function () {
        loadSingleList();
    });

    $(document).on("pageshow", "#pageUnSingle", function () {
        loadUnSingleList();
    });
    
    
    //單身列表頁面
    function loadSingleList() {

        $.post(server_url + "handler/AjaxHandler.ashx", { op: "getSingleStuInfo" }, function (data, textStatus) {

            $('#singleList li').remove();

            var json = eval(data);

            for (var i = 0; i < json.length; i++) {

                $("#singleList").append('<li><a href="#" onclick="viewStuInfo(' + json[i].StudentID +')"><image src="' + server_url + "/handler/" + json[i].PicPath + '" /><h1>姓名：' + json[i].UserName + "</h1><p>年齡：" + json[i].Age + "</p></a></li>");
            }

            $("#singleList").listview('refresh');

        });
    }

    //非單身列表頁面
    function loadUnSingleList() {

        $.post(server_url + "handler/AjaxHandler.ashx", { op: "getUnSingleStuInfo" }, function (data, textStatus) {
            
            $('#unsingleList li').remove();

            var json = eval(data);

            for (var i = 0; i < json.length; i++) {

                $("#unsingleList").append('<li><a href="#" onclick="viewStuInfo(' + json[i].StudentID +')"><image src="' + server_url + "/handler/" + json[i].PicPath + '" /><h1>姓名：' + json[i].UserName + "</h1><p>年齡：" + json[i].Age + "</p></a></li>");
            }

            $("#unsingleList").listview('refresh');

        });
    }

</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

　　頁面效果：

　　

　　第二步：

　　添加學生詳細頁面。

　　HTML 代碼：

<!-- Begin PageStuInfo -->
<div data-role="page" id="pageStuInfo">
    <div data-role="header" data-theme="b" data-add-back-btn="true" data-back-btn-text="返回">
        <!-- <a href="#" data-role="button" data-rel="back" data-icon="back">返回</a> -->
        <h1>學生信息</h1>
    </div>
    <div data-role="content">
        <div data-role="fieldcontainer">
            <label id="lbUserName"></label>
            <label id="lbAge"></label>
            <image id="imgPic" />
        </div>
    </div>            
</div>
<!-- End PageStuInfo -->

　　JS 代碼：

/** 查看學生信息 **/
function viewStuInfo(studentid){
         
    $.post(server_url + "handler/AjaxHandler.ashx", { op: "getStuInfo", studentid: studentid }, function (data, textStatus) {
             
        var json = eval('(' + data + ')');

         $("#lbUserName").html("姓名：" + json.UserName);
         $("#lbAge").html("年齡：" + json.Age);
         $("#imgPic").attr("src", server_url + "/handler/" + json.PicPath );
     
         $.mobile.changePage("#pageStuInfo", {
             transition:"slide"
         });
             
    });
}
</script>

　　頁面效果：

　　

　　第三步：

　　添加拍照和圖片上傳功能：

　　上傳圖片：

<!-- Begin PageStuInfo -->
<div data-role="page" id="pageStuInfo">
    <div data-role="header" data-theme="b" data-add-back-btn="true" data-back-btn-text="返回">
        <!-- <a href="#" data-role="button" data-rel="back" data-icon="back">返回</a> -->
        <h1>學生信息</h1>
        <a id="btnTakePhoto" onclick="takePhoto()" href="#" data-role="button" class="ui-btn-right">拍照</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontainer">
            <label id="lbStuId" class="ui-hidden-accessible"></label>
            <label id="lbUserName"></label>
            <label id="lbAge"></label>
            <image id="imgPic" />
            <input type="button" value="保存" data-theme="d" id="btnSave" /> 
        </div>
    </div>            
</div>
<!-- End PageStuInfo -->

　　JS 代碼：

/** 查看學生信息 **/
function viewStuInfo(studentid){
         
    $.post(server_url + "handler/AjaxHandler.ashx", { op: "getStuInfo", studentid: studentid }, function (data, textStatus) {
             
        var json = eval('(' + data + ')');

        $("#lbStuId").html(json.StudentID);
         $("#lbUserName").html("姓名：" + json.UserName);
         $("#lbAge").html("年齡：" + json.Age);
         $("#imgPic").attr("src", server_url + "/handler/" + json.PicPath );
     
         $.mobile.changePage("#pageStuInfo", {
             transition:"slide"
         });
             
    });
}

/** 拍照 **/
function takePhoto() {
    take_pic();//拍照方法
}    

$("#btnSave").click(save);

/** 保存圖片 **/
function save() {
    uploadPicture($("#lbStuId").html(), $("#imgPic").attr("src"));
}

　　頁面效果：

　　                                    　　

 　　第四步：

　　1. 要實現拍照功能和上傳功能，需要添加 Cordova 插件：cordova plugin add org.apache.cordova.file 和 cordova plugin add org.apache.cordova.file-transfer 。

　　2.  添加 JS 包引用：

<script type="text/javascript" charset="utf-8" src="js/apis/device.js"></script>
<script type="text/javascript" charset="utf-8" src="js/apis/camera.js"></script>

　　3. device.js ：

function init() {
    document.addEventListener("deviceready", onDeviceReady, true);
};

var onDeviceReady = function () {
    console.log("deviceready event fired");

    // api-camera  Photo URI
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
   
};

　　4. camera.js ：

/** 拍照 **/
function take_pic() {
    
    navigator.camera.getPicture(onPhotoDataSuccess, function (ex) {
        alert("Camera Error!");
    }, {
        //這里的更多設置參數參見官方文檔
        quality: 100, 
        targetWidth: 220,
        targetHeight: 220,
        destinationType: destinationType.FILE_URI
      });
}

/** 拍照回調函數 **/
function onPhotoDataSuccess(imageURI) {
    var cameraImage = document.getElementById('imgPic');
    cameraImage.src = imageURI;
}


/** 上傳圖片到服務器 **/
function uploadPicture(studentid, imageURI){
    
    var options = new FileUploadOptions();
    var ft = new FileTransfer();
    options.fileKey= 'file';    // 相當與表單中的name字段
    options.fileName= Number(new Date()) + ".jpg";//文件名
    options.mimeType= "image/jpeg";
    options.params = {
            studentid:studentid,
    };// 跟隨文件一起發送的自定義額外的字段

    //上傳
    ft.upload( imageURI, server_url + '/handler/AjaxHandler.ashx?op=updatePic', success, error, options );

    //上傳成功回調函數
    function success( fileUploadResult ){
          alert("上傳成功");
    }

    //上傳失敗回調函數
    function error( fileTransferError ){
        alert("上傳失敗");
    }
}

　　結束語：好的，今天給大家講解了一個非常簡單小巧的APP，怎么使用 Cordova 進行拍照，還有圖片文件上傳。大家有什么疑惑或者建議請指出，謝謝！

　　PS 疑惑：博主在使用 JQM 和 Cordova 的時候遇到一些疑惑，希望大家能夠幫忙解答：

　　1. 創建 Cordova 工程，有什么更簡便的方式嗎？大家是怎么創建的。

　　2. CordovaApp_CordovaLib 這個類庫怎么生成 jar 包，給工程引用呢？博主生成 jar 包后，工程添加引用，工程會報錯。

　　3. 博主寫的 JQM 頁面跳轉時，怎么沒有顯示加載框？是需要哪里設置嗎？怎么顯示加載框？之前有使用 showPageLoadingMsg，不過手機上好像會報錯。

　　謝謝大家！