博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery Mobile + Cordova 实战一
阅读量:4465 次
发布时间:2019-06-08

本文共 6125 字,大约阅读时间需要 20 分钟。

  好的,今天给大家继续讲解 JQM 和 Cordova 的结合吧。Cordova 和 Phonegap 反正是一个东西,大家就当做一个是旧版(Phonegap)的一个是新版(Cordova)的就行。不同分支而已,具体可以网上搜搜。

  要实现的效果如下:

               

  开始:

  安装配置环境:

  1. 用 Cordova 之前需要大家先 安装 node.js  ,然后把安装目录添加到环境变量 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 包,然后工程直接引用,可惜会报错,所以就先放着了。求助大家,帮忙解答,谢谢!

  第一步:

  好的,先开始建个基本页面模板。(这里可以参考博主的 )

  HTML 代码:

  JS 代码:

  页面效果:

  

  第二步:

  添加学生详细页面。

  HTML 代码:

学生信息

  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"         });                 });}

  页面效果:

  

  第三步:

  添加拍照和图片上传功能:

  上传图片:

学生信息

拍照

  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 包引用:

  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,不过手机上好像会报错。

  谢谢大家!

转载于:https://www.cnblogs.com/hundansrs/p/4283019.html

你可能感兴趣的文章
Pascal程序练习-与7无关的数
查看>>
Linux:cut命令...未完待续
查看>>
(十一)tina | openwrt关闭调试串口(DEBUG UART)
查看>>
angularjs 使用angular-sortable-view实现拖拽效果(包括拖动完成后的方法使用)
查看>>
7. 单位,移动布局
查看>>
多路复用IO模型
查看>>
2019秋招复习笔记--数据库基本操作
查看>>
2019秋招复习笔记--智力题
查看>>
MySQL学习笔记
查看>>
面试题
查看>>
DS博客作业08-课程总结
查看>>
利用Python爬虫刷店铺微博等访问量最简单有效教程
查看>>
浅谈软件测试与墨菲定律
查看>>
文件安全复制之 FastCopy
查看>>
强烈推荐美文之《从此刻起,我要》
查看>>
敏捷开发流程
查看>>
leetcode 412. Fizz Buzz
查看>>
对Netflix Ribbon的Loadbalancer类源码设计合理性的一点质疑
查看>>
关于日历的算法
查看>>
[QT编程]QT实现的一个渐隐渐显窗体
查看>>