PhoneGap+jQm webapp本地化(2)-摄像头调用和本地数据库-阿里云开发者社区

开发者社区> 技术小大人> 正文

PhoneGap+jQm webapp本地化(2)-摄像头调用和本地数据库

简介:
+关注继续查看
前言

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

例子设计

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

原型设计:

显示用的主页

personal_infor

调用拍照的页面

2 

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

3

代码编写

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 --> <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, ;> <!--样式--> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" /> <!--end--> <!--导入的js框架--> <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> <!--end--> <!--自己写的js--> <script type="text/javascript"> </script> <!--end--> </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> <!--import custom library --> <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> <!--end--> </body> </html>

 

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, target 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); }

以上就是这次的内容了.

说点题外话

研究了一个星期的phonegap,由于在家,没学校那么方便可以找同学借iphone来测试应用,说下phonegap在android的体验吧,在我手头上一台能在象限跑分到2000的设备,运行这个,与Java写的应用相同的显示,要慢很多....以目前,android 2000分以上的设备而言,我觉得还不是主流,所以,这个phonegap的应用目前而言,用来开发Iphone程序觉得还可以,Iphone的webview性能还算可以吧...

  接下来,说下这次的例子,这个例子里面有个比较严重的拖慢性能的地方,有兴趣的可以在swipe几次以后用backbutton来才一下,代码的话晚些时候我整理出来在发布吧...

  下一次,估计得很久才更新这个系列了,有空的话,我专门搞个视频,来跟大家演示一下...phonegap目前而言,做android的web native app的性能问题吧....



本文转自 liam2199 博客,原文链接:  

http://blog.51cto.com/youxilua/779553

 如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
App Store 4.3 大礼包被拒解决方案-本地差异化
从2017年年底开始, Apple似乎做了很大的升级, 让众多开发者陷入困境, 不单单是马甲, 就连正常的 App 也被误伤; 周围很多开发者向我"求救", 诉说新品处于【等待审核】或【正在审核】状态长达一两个月的; 似乎 iOS 开发者不单单只是开发项目, 高效上新和稳定更新 App 变得愈发重要。
2423 0
【转】ADO.NET连接访问dbf数据库问题
from:http://space.cnblogs.com/question/7423/    悬赏园豆:20 [已解决问题] 浏览: 2067次   我发现当dbf文件的长度超过8的时候,使用OleDbCommand 查询就会出现“jet 数据库引擎找不到对象”的错误,我搜索到(http://space.cnblogs.com/question/2046/)说解决了这个问题,方法是将表的名字加个中括号。
1108 0
7.数据本地化CCString,CCArray,CCDictionary,tinyxml2,写入UserDefault.xml文件,操作xml,解析xml
 数据本地化 A CCUserDefault 系统会在默认路径cocos2d-x-2.2.3\projects\Hello\proj.win32\Debug.win32下生成一个名为UserDefault.xml.所有的key皆为char *型,value类型为bool intfloat double std::string. 读操作
1233 0
eclipse部署web项目至本地的tomcat但在webapps中找不到
一、发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并没有出现所建立的工程名字。   二、验证 很明显项目并没有自动部署到Tomcat的Webapps中而是部署在了别的容器中。在内置浏览器中输入http://localhost:8080/
1261 0
C#调用本机摄像头
原文:C#调用本机摄像头 这段时间一个小项目中需要调用本机的摄像头进行拍照,网上搜集了一些资料以及解决的一些小问题,在此记录以便后续使用。 硬件环境:联想C360一体机,自带摄像头 编写环境:vs2010 语言:C# WPF   下载AForge类库,并添加引用: using AForge; using AForge.
924 0
1046
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载