PhoneGap 解析和上传文件
几天后我如何解析的JavaScript API现在可以很容易地通过他们的SDK文件上传发布。内置的演示中，我是非常快速和简单，而使用PhoneGap的，这不是一个很好的例子的技术一起。PhoneGap的解析日（显然，影片将很快发布，我会分享，当他们）在我发言之前，我掀起了一个稍微更好的例子。让我们来看看。（对不起）我的例子是应用程序的注意的另一个例子。然而，这一次，我已经添加了附加图片的能力的一个音符。主屏幕是您当前的票据上市，按日期排序。http://www.raymondcamden.com/images/iOS%20Simulator%20Screen%20shot%20Jul%2023,%202013%209.07.24%20AM.png点击加号的形式让你写一个新的笔记。http://www.raymondcamden.com/images/iOS%20Simulator%20Screen%20shot%20Jul%2023,%202013%209.08.19%20AM.png在这一点上，你可以选择拍摄照片。现在 - 我的iOS模拟器测试目的，我设置源到本地文件系统。在一个真实世界的应用程序，你会问，相机本身（或允许用户选择），但我想快速和肮脏的东西。一旦你单击“保存”，然后创建一个新的注释对象解析。的代码，以确定是否已经拍摄了一张照片或不和，如果你有了，它将会为你处理上传。现在让我们看一下代码。第一故乡-页。我使用jQuery Mobile的应用程序并放在“页”核心的index.html。由于似乎有一些混乱，让我绝对清楚。jQuery移动并没有让你使用一个HTML页面。期间。这一点，我有一个小的应用程序（2页）在类似的情况下，那么它是有道理的，我将它们包含在一个HTML文件。这是个人的选择，没有什么jQuery Mobile的强迫我做100％。<! DOCTYPE html >< html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parse-1.2.8.min.js"></script>
<script src="js/app.js"></script>
<style>
div img {
max-width: 200px;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<a href="#addNote" data-icon="plus" data-iconpos="notext" class="ui-btn-right">Add</a>
<h1>Notebook</h1>
</div>
<div data-role="content">
</div>
</div>
<div data-role="page" id="addNote">
<div data-role="header">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>Notebook</h1>
</div>
<div data-role="content">
<h2>Add Note</h2>
<textarea id="noteText"></textarea>
<button id="takePicBtn">Add Pic</button>
<button id="saveNoteBtn">Save</button>
</div>
</div>
</body>
</html>
这里的HTML是很空的，因为几乎所有的内容是动态的。现在，让我们来看看在app.js.
var parseAPPID = "supersecret";
var parseJSID = "mybankpinis1234";
//Initialize Parse
Parse.initialize(parseAPPID,parseJSID);
var NoteOb = Parse.Object.extend("Note");
$(document).on("pageshow", "#home", function(e, ui) {
$.mobile.loading("show");
var query = new Parse.Query(NoteOb);
query.limit(10);
query.descending("createdAt");
query.find({
success:function(results) {
$.mobile.loading("hide");
var s = "";
for(var i=0; i<results.length; i++) {
//Lame - should be using a template
s += "<p>";
s += "<h3>Note " + results.createdAt + "</h3>";
s += results.get("text");
var pic = results.get("picture");
if(pic) {
s += "<br/><img src='" + pic.url() + "'>";
}
s += "</p>";
}
$("#home div").html(s);
},error:function(e) {
$.mobile.loading("hide");
}
});
});
$(document).on("pageshow", "#addNote", function(e, ui) {
var imagedata = "";
$("#saveNoteBtn").on("touchend", function(e) {
e.preventDefault();
$(this).attr("disabled","disabled").button("refresh");
var noteText = $("#noteText").val();
if(noteText == '') return;
/*
A bit complex - we have to handle an optional pic save
*/
if(imagedata != "") {
var parseFile = new Parse.File("mypic.jpg", {base64:imagedata});
console.log(parseFile);
parseFile.save().then(function() {
var note = new NoteOb();
note.set("text",noteText);
note.set("picture",parseFile);
note.save(null, {
success:function(ob) {
$.mobile.changePage("#home");
}, error:function(e) {
console.log("Oh crap", e);
}
});
cleanUp();
}, function(error) {
console.log("Error");
console.log(error);
});
} else {
var note = new NoteOb();
note.set("text",noteText);
note.save(null, {
success:function(ob) {
$.mobile.changePage("#home");
}, error:function(e) {
console.log("Oh crap", e);
}
});
cleanUp();
}
});
$("#takePicBtn").on("click", function(e) {
e.preventDefault();
navigator.camera.getPicture(gotPic, failHandler,
{quality:50, destinationType:navigator.camera.DestinationType.DATA_URL,
sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY});
});
function gotPic(data) {
console.log('got here');
imagedata = data;
$("#takePicBtn").text("Picture Taken!").button("refresh");
}
function failHandler(e) {
alert("ErrorFromC");
alert(e);
console.log(e.toString());
}
function cleanUp() {
imagedata = "";
$("#saveNoteBtn").removeAttr("disabled").button("refresh");
$("#noteText").val("");
$("#takePicBtn").text("Add Pic").button("refresh");
}
});先看一看＃家pageshow事件。这是我们得到的数据解析。这是通过一个简单的查询对象创建的订单。我限制数到10，如果我想可以添加分页。的addNote逻辑是一个比较复杂的。保存解析数据是异步的，所以如果我们需要存储的文件有两个，而不是一个，异步调用。因此，大IF块来检查，如果我们已经有了选择现有的图像。说句实话，这可能是做了一些，也许更好。例如，创立初期注对象可以肯定IF子句，以及我行的text属性设置。但总的来说，我认为你的想法。
本文来自
http://www.raymondcamden.com/index.cfm/2013/7/23/Better-example-of-PhoneGap-Parse-and-uploading-files
人不错，学习学习 感觉phonegap+html越来越火了。 好东西啊，谢谢分享 感谢phonegap中文网 非常好 感谢 开始学习html5 app开发了 未来属于html5 phonegap 微信 wap全部搞定
页:
[1]