JQuery Mobile + Cordova 實戰一

時間  2019-11-24
標籤 jquery mobile cordova 實戰 欄目 JQuery 简体版
原文   原文鏈接

　　好的，今天給你們繼續講解 JQM 和 Cordova 的結合吧。Cordova 和 Phonegap 反正是一個東西，你們就當作一個是舊版（Phonegap）的一個是新版（Cordova）的就行。不一樣分支而已，具體能夠網上搜搜。javascript

　　要實現的效果以下：css

　　　　　　　　　  　　　　

　　開始：html

　　安裝配置環境：java

　　1. 用 Cordova 以前須要你們先 安裝 node.js http://www.nodejs.org/ ，而後把安裝目錄添加到環境變量 PATH中， cmd 輸入 npm -v 看安裝是否成功。node

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

　　3. 新建個文件夾，而後 cmd cd 進入到那個文件夾。apache

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

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

　　6. 添加相機插件，輸入命令 cordova plugin add org.apache.cordova.camera。添加了相機功能。後續要用的什麼，就在這裏添加就能夠了（刪除插件：cordova plugin remove org.apache.cordova.camera）。api

　　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，不過手機上好像會報錯。

　　謝謝你們！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程