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,不过手机上好像会报错。
谢谢大家!
JQuery Mobile + Cordova 实战一的更多相关文章
- JQuery Mobile+cordova构建一个Android项目
1.安装Android开发环境 Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.goo ...
- JQuery Mobile 实战一
今天我们来使用JQuery Mobile来开发一个web mobile app. 要实现的如下所示效果: 开始: 第一步:添加JS包等引用,直接去官网下载最新的JQuery Mobile 包,http ...
- Cordova+jQuery Mobile+Spring REST
Cordova可以方便地建立跨平台的移动应用,使用jQuery Mobile做手机界面,后台使用rest提供数据交互. 首先,使用jQuery Mobile建立一个页面: <!DOCTYPE h ...
- jQuery Mobile学习日记之HelloWorld
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] ...
- PhoneGap与Jquery Mobile组合开发android应用的配置
PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...
- 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载四(场景切换)
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- jqueryMobile应用第一课《构建跨平台APP:jQuery Mobile移动应用实战》连载一(Hello World)
有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...
- PhoneGap与Jquery Mobile结合开发android应用配置
由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...
- jQuery Mobile和PhoneGap混合开发
其实二者并不影响,PhoneGap负责调用系统的接口,jQuery Mobile实现一些网页效果.PhoneGap开发请看上一篇文章,jQuery Mobile开发环境搭建如下:[请先阅读上一篇文章, ...
随机推荐
- CSS Gradient文字效果
你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...
- 解决从内部存储设备安装apk提示Permission Denied
做应用商店,下载apk,考虑一种情况,如果没有sd卡的情况下就将apk下载到 Internal Cache目录下. 下载都正常,但是在安装的时候提示Permission Denied /data/da ...
- C# DateTime 日期加1天 减一天 加一月 减一月 等方法
//今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-).ToShortDateString ...
- [Express] Level 2: Middleware -- 2
Logging Middleware Help finish the following middleware code in the logger.js file: On the response ...
- Device Pixel Ratio & Media Queries
一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...
- 剑指 offer set 10 栈的压入、弹出序列
总结 1. 通过按位对比来判断, 没有更优的方法了
- stm32出现错误“identifier file is undefined”
为什么记录这个问题,说来很简单,这已经是第二次犯这个小错误了. 出现了错误“identifier file is undefined”的解决方法;option->general options- ...
- stm32f107vc在IAR环境下,引用库函数的工程文件的配置方法
stm32做开发很方便的一个原因是大家可以稍稍放松对于硬件寄存器等的设置,因为stm32有了非常丰富和实用的库函数,外设文件等等,所以我们在使用的时候可以更加关注程序开发的过程和逻辑关系.但是,在开发 ...
- git-ssh 配置和使用
1.设置Git的user name和email:(如果是第一次的话) $ git config --global user.name "humingx" $ git config ...
- Android 之 用WebView显示网页
WebView可以使得网页轻松的内嵌到 app 里,还可以直接跟js相互调用. WebView有两个方法:setWebChromeClient 和 setWebClient (1) setWebCli ...