星期六, 2014-06-28 22:11 — shiping1

PhoneGap+jQuery Mobile打造本地化Web App

2012-03-08 09:09 佚名互联网字号：T | T

我们没必要学习苦行僧那样,用记事本来打代码.目前而言呢,PhoneGap的IDE工具最好的当然是Dreamweaver CS 5.5.不过,我这里使用Eclipse作为我的开发IDE,因为之前使用过Dreamweaver CS 5.5 ,这次就换个IDE工具.

AD：WOT2014：用户标签系统与用户数据化运营培训专场

Eclipse 的配置

1,一站式新建项目 phonegap + jqm

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download/

这个插件还是很给力的,已经支持默认支持最新版本的phonegap,jqm,sencha

安装完以后选择这个图标

2,选择要建何种类型的phoneGap (1),默认已经支持直接创建最新版本的phoneGap

(2),这个插件支持两大移动js框架jqm & Sencha Touch,当然..这两个框架只能二选一了,你不选也行…

(3),我这里选择我最为熟悉的jQm框架,默认已经支持最新版本了

3,接着,创建android项目即可

接下来就不啰嗦了…

完成以后:项目结构,activity都已经写好的了..

代码也已经写好了.

注意:新建完以后,可能androidmainifest会报错,你把报错的那行代码删掉即可,你也可以根据那个代码要求找一个支持xlarge包的android版本(4.0吧)(貌似2.2没有这玩意),我这里省事直接删掉算了…

自带例子简单介绍

在新建一个page,想使用插件帮你打包好的API你需要以下步骤

1,准备JS文件,滑轮到index.l文件最后几行;

//这个JS是必须的,调用的是设备的初始化//以下API自己按照自己的喜好调用和修改吧

2,在body上调用init()方法,具体使用参见device.js.

3,顺便你写了…

例子演示

感觉,这个跟这个jqm一起的例子,个人感觉比官方那个好很多…截个图,结束吧…

前言

上一章中,我们讨论了环境的配置,这本章中我们,写一个小模块来贯通学习,phonegap对摄像头的调用,已经phonegap对于拍下来的照片的处理,已经,使用本地数据库保存我们的数据,让在程序重新运行的时候能够保留我们的结果.先说明一下,为了,减少工作量,很多地方由于,官方文档已经很详细了我就难得在描述了,如果有些地方,没有而官方文档也没有的话,可以来问我...

例子设计

我们一般注册都有一个,上传图像的模块,以前,用电脑注册的话,这个头像就比较麻烦了,不过,我们用手机的话就基本没这个问题了,这个例子就是,使用phonegap 调用摄像头拍下我们的头像,上传到服务器,然后,也保存到本地里面,方便加载.

原型设计:

显示用的主页

调用拍照的页面

为了,突显出我们用jqm的好处的,增加一个swip事件来控制,页面的切换

代码编写

1,写个模板,方便,我们以后的代码的重用

<!DOCTYPE l>
<l>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" name="viewport"
content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script src="jquery.mobile/jquery-1.6.4.min"></script>
<script src="jquery.mobile/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body onload="init();">
<div data-role="page" id="home">
<div data-role="header">
<h1>Hello,World</h1>
</div>
<div data-role="content" id="content">
<h1>content</h1>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
<script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
<script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>
</body>
</l>

2,模板写好了,就开始我们实际代码的编写吧.

1,首先,编写我们的device.js文件进行对应用的初始化工作

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

2,然后接着写初始化用干的事情

var onDeviceReady = function() {
console.log("deviceready event fired");
// api-camera Photo URI
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
//这里是初始化主页,如果,已经有头像的话,就加载
var saveImage = kget("image");
if(saveImage){
//console.log("have image"+saveImage);
var cameraImage = document.getElementById('cameraImage');
cameraImage.style.visibility = 'visible';
cameraImage.src = "data:image/jpeg;base64," + saveImage;
}
//系统的事件,按需求实现自己的回调方法,这里就默认了..
document.addEventListener("searchbutton", onSearchKeyDown, false);
document.addEventListener("menubutton", onMenuButtonDown, false);
document.addEventListener("pause", onEventFired, false);
document.addEventListener("resume", onEventFired, false);
document.addEventListener("online", onEventFired, false);
document.addEventListener("offline", onEventFired, false);
document.addEventListener("backbutton", onEventFired, false);
document.addEventListener("batterycritical", onEventFired, false);
document.addEventListener("batterylow", onEventFired, false);
document.addEventListener("batterystatus", onEventFired, false);
document.addEventListener("startcallbutton", onEventFired, false);
document.addEventListener("endcallbutton", onEventFired, false);
document.addEventListener("volumedownbutton", onEventFired, false);
document.addEventListener("volumeupbutton", onEventFired, false);
};

这样我们的devices.js就简单的写完了.

3,写UI界面,这里也很简单

<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>个人信息</h1>
<a href="#setting" data-icon="home" id="intro" class="ui-btn-right">设置</a>
</div>
<div data-role="content" id="homeContent">
<p>头像</p>
<img id="cameraImage" src="" />
<p>名字:阿柴</p>
<p>联系方式:xxxxx</p>
</div>
</div>
<div data-role="page" id="setting">
<div data-role="header">
<h1>头像设置</h1>
</div>
<div data-role="settingContent">
<p>头像</p>
<img id="settingImage" src="" />
<div class="ui-grid-a">
<div class="ui-block-a"><div data-role="button" id="takePhoto">take photo</div></div>
<div class="ui-block-b"> <div data-role="button" id="upload">upload</div></div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
<script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
<script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>
</body>

上面就是页面的代码,就两个DIV的page,学过,jqm的朋友应该对此毫无压力了...

4,开始写点jqm的事件js,写在模板那个head,自己的那个块里面

<script type="text/javascript">
//在页面初始化的时候,利用phonegap初始化我们的应用
$('body').live("pageinit",function(){
init();
});
//为页面添加swip 事件
$("#home").live("pageinit",function(){
//当我们向左滑动的时候,进入setting页面
$('#homeContent').bind("swipeleft",function(){
$.mobile.changePage('#setting', { transition: "fade"});
});
});
$('#setting').live("pageinit",function(){
//显示头像图片
var saveImage = kget("image");
if(saveImage){
//console.log("have image"+saveImage);
var cameraImage = document.getElementById('settingImage');
cameraImage.style.visibility = 'visible';
cameraImage.src = "data:image/jpeg;base64," + saveImage;
}
//当我们向右滑动的时候,回到主页
$('#settingContent').bind("swiperight",function(){
$.mobile.changePage('#home',{ transition: "fade"});
});
//进行拍照
$('#takePhoto').bind("tap",function(){
take_pic();
});
});
</script>

这块代码的就要有一点熟悉jqm的人写好了,有啥不懂的先看一下jqm的官方文档吧...

5,写了这么久,都没怎么用到phonegap,接下来就是phonegap大展身手的时刻到了..

phonegap的照片类型

还记得我们在devices.js定义的两个变量吗?

//这个是设置图片是调用摄像头还是，本机相册，默认是调用摄像头
//更多参见官方文档
pictureSource=navigator.camera.PictureSourceType;
//这个是,当phonegap 获取图片的时候,我们希望获取的是路径?还是
//给予base64编码的图像格式
destinationType=navigator.camera.DestinationType;

以上就是等下,可能要用到的参数介绍

新建一个camera.js,

function take_pic() {
navigator.camera.getPicture(onPhotoDataSuccess, function(ex) {
alert("Camera Error!");
}, {
//这里的更多设置参数参见官方文档
quality : 50,
targetWidth: 320,
targetHeight: 240,
//用data_url,而不用file_url的原因是,file_url在不同平台有差异
//不好编写,而用data_url就可以不考虑这个,加上,拍张图片,不要太好的话,就几十k存到数据库里面也没多慢..
destinationType:destinationType.DATA_URL
});
}
function onPhotoDataSuccess(imageData) {
console.log("* * * onPhotoDataSuccess");
var cameraImage = document.getElementById('cameraImage');
cameraImage.style.visibility = 'visible';
//把图片存进数据库里面
kset("image",imageData);
cameraImage.src = "data:image/jpeg;base64," + imageData;
}

接下来,新建一个storage.js,用来简单封装storage的api

function kset(key, value){
console.log("key"+key+"value"+value);
window.localStorage.setItem(key, value);
}
function kget(key){
console.log(key);
return window.localStorage.getItem(key);
}
function kremove(key){
window.localStorage.removeItem(key);
}
function kclear(){
window.localStorage.clear();
}
//测试更新方法
function kupdate(key,value){
window.localStorage.removeItem(key);
window.localStorage.setItem(key, value);
}

以上就是这次的内容了.

来自 http://mobile.51cto.com/web-322411_all.

普通分类:

app

You are here

PhoneGap+jQuery Mobile打造本地化Web App

PhoneGap+jQuery Mobile打造本地化Web App

友情链接

搜索表单

用户登录

You are here

PhoneGap+jQuery Mobile打造本地化Web App

PhoneGap+jQuery Mobile打造本地化Web App

友情链接