收藏，10.1k 浏览
编者注：我们发现了比较有趣的系列文章，准备翻译，一天一篇更新，年终礼包。下面是第10天的内容。
今天又是的一天。长期以来，我觉得手机开发很恐怖，大部分应用都没有商业模式。事实上，编写手机应用从来都不能让我兴奋。然而，考虑到手机领域的飞速发展，以及更多的人通过手机而不是桌面访问互联网，我决定尝试下手机开发。我的手机开发之旅将从 起步。
本文首先介绍 PhoneGap 的基本情况，接着我们使用 PhoneGap 开发一个手机应用。
我们将为是开发一个手机阅读器。用户可以将该应用安装在Android、Symbian、webOS或Windows设备上。该手机应用可以在
这个应用可以做到：
给出所有已经发布的系列文章的列表。用户点击列表中的条目则调用浏览器打开链接。
读者可以使用该应用回馈想法。
什么是 PhoneGap？
是一个自由开源的手机开发框架，可以使用标准的 web 技术，即 HTML，CSS 和 JavaScript 进行手机应用开发。
它将应用的web资源封装在原生应用中，这些应用可以提交到各大应用商店。更重要的是，我们可以通过 PhoneGap 进行跨平台的手机应用开发。这意味着，在理想情况下，我们只需编写一次手机应用，就可以将该应用移植到多个平台。例如，我为Android设备编写了这个应用，然而使用 ，我同时为其他设备打包了应用。大多数标准的设备特性，例如照相、地理位置、存储等都由JavaScript API提供了。取决与目标设备，PhoneGap提供的JavaScript API会有所不同。
关于 PhoneGap 的一些事实：
2009年，Nitobi开发了PhoneGap框架。
2011年10月，Adobe 购买了 Nitobi（PhoneGap）背后的公司。
Adobe 将 PhoneGap 贡献给 Apache 基金会。
此开源项目被命名为
Apache Cordova.
PhoneGap 是 Adobe 完成的 开源项目 Apache Cordova 的实现。 PhoneGap的核心使用 Apache Cordova.
PhoneGap使用基于插件的架构。所有设备的特性以插件方式提供。本文中，我们将使用一些插件。
为什么我关心PhoneGap？
没有必要为每个平台学习一种原生的开发环境。如果开发者打算针对多个平台，那么PhoneGap的跨平台特性可以节约开发者大量的时间和精力。我了解HTML、CSS和JavaScript，可以很平滑地进入手机世界。
对于开发基于REST API的CRUD手机应用，PhoneGap很好用。
它不强迫开发者选择特定的CSS库。开发者可以使用任何他们喜欢的移动端的库。本应用中我使用jQuery mobile。
PhoneGap Prerequisites
PhoneGap依赖NodeJS，我们需要使用npm来安装PhoneGap。Npm是NodeJS的包管理器，新版的NodeJS自带npm。你可以从下载最新版的NodeJS。
你需要同时安装目标机器的SDK。例如，如果我们创建Android程序，我们需要在操作系统上安装 Android 开发者工具。PhoneGap 使用 SDK 为目标平台构建包。
PhoneGap起步
使用如下命令安装PhoneGap：
sudo npm install -g phonegap
以上命令将全局安装 phonegap 包，这样任何目录下都可以使用 phonegap。
安装插件需要安装Cordova.
使用如下命令安装Cordova。
sudo npm install -g cordova
GitHub 仓库
今天的demo应用的代码在上。
创建PhoneGap应用
phonegap命令行提供了使用模板创建新phonegap项目的命令：
phonegap create reader --id io.reader --name Reader30
上面的命令会创建一个reader目录。
io.reader和Reader30是可选的：io.reader提供了一个类似反域名的识别符，而Reader30提供了应用的显示文本。
应用的文件结构如下：
让我们看下这些生成的目录：
merges文件夹存放专门针对某个特定平台的资源。例如，我们可能使用merges来为Android设备改变字体大小。
platforms目录存放平台构建文件。
plugins存放应用使用的插件。当我们安装一个插件的时候，插件会被存放在这个目录下。
www目录存放应用资源，例如html、css、js和img。这是我们要花最多时间的目录。config.xml包含了生成和分发应用所需的元信息。元信息也包括应用名称、描述、作者详情、应用权限等信息。在可以看到一个完整的列表。
运行下列命令即可在android上运行应用：
phonegap run android
这是我们的android平台阅读器应用的第一次构建。如果有真实设备连接，应用会跑在真实设备上。如果没有设备，会启动Android虚拟器，应用会被部署到虚拟器上。
注意：Android虚拟器的性能相当差劲，所以我建议你总是连接上你的真实手机设备。Grant Shipley的提供了一些加速Android虚拟器的信息。
开发手机应用
如上所述，我们的应用有两个页面。我们先开发第一个。
初始页面列出所有已发布文章的列表。我们修改下index.html，请从我的中复制css和javascript资源。
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
&title&Learn 30 technologies in 30 days&/title&
&link rel="stylesheet" href="css/vendor/jquery.mobile-1.3.1.min.css"&
&link rel="stylesheet" href="css/vendor/jquery.loadmask.css"&
&div data-role="page" id="mainPage"&
&div data-role="header" data-position="fixed"&
&h1&30Technologies30Days&/h1&
&a href="#feeback" data-icon="edit" data-theme="b" class="feedback ui-btn-right" data-role="button" data-inline="true" data-ajax="false"&Feedback&/a&
&div data-role="navbar"&
&li&&a href="#home" class="home ui-btn-active" data-icon="home"&Home&/a&&/li&
&div id="main" data-role="content"&
&div data-theme="a" data-role="footer"&
(C) Shekhar Gulati 2013
&script type="text/x-mustache-template" id="home-template"&
&ul id="blogs" data-role="listview" data-filter="true" data-filter-placeholder="Search blogs..." data-inset="true"&
&script type="text/x-mustache-template" id="blog-template"&
&a href="{{url}}" target="_blank"&
&h3&{{title}}&/h3&
&p&&strong&{{publishedOn}}&/strong&&/p&
&script src="phonegap.js"&&/script&
&script src="js/vendor/jquery-1.9.1.min.js"&&/script&
&script src="js/vendor/jquery.mobile-1.3.1.min.js"&&/script&
&script src="js/vendor/jquery.ui.map.js"&&/script&
&script src="js/vendor/jquery.loadmask.min.js"&&/script&
&script src="js/vendor/jquery.timeago.js"&&/script&
&script type="text/javascript" src="js/vendor/mustache.js"&&/script&
&script type="text/javascript" src="js/app.js"&&/script&
上面的html导入了所需的css和javascript文件。它使用jQuery mobile达到原生效果。我们同时定义了一个mustache模板来呈现列表。
应用相关的javascript代码放在 app.js文件中：
$(document).ready(function(){
homeView();
$('.home').on('tap', renderHomeView);
$('.feedback').on('tap', renderFeedbackFormView);
function renderHomeView(event){
event.preventDefault();
homeView();
function homeView(){
$('#main').empty();
$('.home').addClass("ui-btn-active");
$('#main').html(template("home"));
var url = 'http://30technologiesin30days-/api/v1/blogs';
$.mobile.loading( 'show',{});
url : url,
dataType : 'json',
success : function(data){
$.mobile.loading( 'hide',{});
$.each(data , function(i , obj){
var template = $("#blog-template").html();
obj.publishedOn = $.timeago(obj.publishedOn);
$("#blogs").append(Mustache.to_html(template,obj));
$('#blogs').listview('refresh');
error : function(XMLHttpRequest,textStatus, errorThrown) {
$.mobile.loading( 'hide',{text:"Fetching blogs.."});
alert("Something wrong happended on the server. Try again..");
$('#main').trigger('create');
function template(name) {
pile($('#'+name+'-template').html());
function showNotification(message , title){
if (navigator.notification) {
navigator.notification.alert(message, null, title, 'OK');
alert(title ? (title + ": " + message) : message);
上面的app.js做了这些事：
绑定了文档的就绪事件。一旦就绪，将渲染初始页面。
初始页面进行REST调用以获取所有博客。我们使用jQuery来调用REST。
接受信息后，我们创建一个列表。最后刷新下。
允许访问REST服务
PhoneGap默认不允许应用访问远程资源。这就意味着应用无法进行REST调用。为了允许应用进行REST调用，我们需要允许它访问。我们可以通过通配符*允许应用访问一切资源。请参阅了解更多信息。
在config.xml下修改访问控制信息：
&access origin="*" /&
应用使用一些插件来访问特定设备的特性。
cordova plugin add org.apache.cordova.geolocation
cordova plugin add org.apache.cordova.dialogs
第一个命令安装了geolocation插件。Geolocation提供了设备位置的信息，例如经度和纬度。我们稍后将使用此特性。参阅 了解更多信息。
第二个命令安装了dialogs插件。dialogs插件提供了原生的设备视觉提醒。参阅了解更多信息。
反馈提交表单
第二个屏幕允许用户提交反馈。
我们增加了一个反馈表单，来记录用户的反馈。
&script type="text/x-mustache-template" id="feedback-form-template"&
&form action="" id="feedbackForm"&
&div data-role="fieldcontain"&
&label for="name"&
&input type="text" name="name" id="name" placeholder="Full Name eg. Shekhar Gulati "&
&div data-role="fieldcontain"&
&label for="description"&
&textarea name="description" id="description" placeholder="Message for author.."&&/textarea&
&div id="checkboxes1" data-role="fieldcontain"&
&fieldset data-role="controlgroup" data-type="vertical"&
Share my location
&input id="sharemylocation" name="sharemylocation" type="checkbox" value="true"&
&label for="sharemylocation"&
&/fieldset&
&button id="create-button" data-inline="true"&Feedback&/button&
修改app.js文件，监听tap事件。
$(document).ready(function(){
homeView();
$('.home').on('tap', renderHomeView);
$('.feedback').on('tap', renderFeedbackFormView);
function renderFeedbackFormView(event){
event.preventDefault();
$('#main').empty();
$('#main').html(template("feedback-form"));
$('#main').trigger('create');
$('#create-button').bind('tap',shareFeedback);
function shareFeedback(event){
event.preventDefault();
$('#feedbackForm').mask();
var name = $('#name').val();
var description = $('textarea#description').val();
var sharemylocation = $("#sharemylocation:checked").val() === undefined ? "false" : "true";
var data = {name:name , description:description , lngLat :[]};
if(sharemylocation === "true"){
navigator.geolocation.getCurrentPosition(function(position){
var lngLat = [position.coords.longitude , position.coords.latitude];
data.lngLat = lngL
postFeedback(data);
} , function(error){
alert('code: '
+ error.code
'message: ' + error.message + '\n');
$('#feedbackForm').unmask();
postFeedback(data);
function postFeedback(data){
type : 'POST',
url : 'http://30technologiesin30days-/api/v1/feedback',
crossDomain : true,
data : JSON.stringify(data),
dataType : 'json',
contentType: "application/json",
success : function(data){
$('#feedbackForm').unmask();
$('#feedbackForm')[0].reset();
showNotification('Received your feedback', 'Info');
homeView();
error : function(XMLHttpRequest,textStatus, errorThrown) {
$('#feedbackForm').unmask();
alert("Error status :"+textStatus);
alert("Error type :"+errorThrown);
当反馈表单提交后，我们从表单获取了数据。如果用户勾选了“分享我的位置”，我们会使用geolocation插件来获取用户的位置。最后，我们将POST请求提交到我们的REST服务。一旦成功提交，我们显示一个提醒。
现在我们可以在设备上安装和运行应用了。使用如下命令：
phonegap run android
今天就到这里了。多多回馈。
你可能感兴趣的文章
3 收藏，727 浏览
11 收藏，1.3k 浏览
不要错过 TA 的任何更新
如果这篇文章对你有帮助，记得点赞收藏哦，你的支持是我们的动力 ^___^
本文隶属于专栏
新闻资讯一手掌握
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
举报理由：
发布推广（招聘、广告、SEO 等）方面的内容
发布带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
发布不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知PhoneGap&jQuery Mobile应用开发环境配置（For Android） - 看引擎 KENGINE | 看看新闻网 IT资讯
PhoneGap&jQuery Mobile应用开发环境配置（For Android）
4人收藏此文章,
发表于2小时前( 16:53) ,
已有20次阅读 ，共个评论
关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述，有兴趣的童鞋可以自行问“度娘”，有很多这方面的文章。本文主要介绍PhoneGap&jQuery Mobile移动应用开发环境的具体配置。
　　PhoneGap是一个基于HTML（5）、CSS（3）、Javascript创建跨平台移动应用的开发框架（称之为平台可能更合适些）。从 Adobe收购了PhoneGap之后，就有了一个新的名字Cordova，目前已经到了3.0的版本，本文中所使用的是2.9的版本。
　　jQuery Mobile是jQuery在移动设备上的版本，不仅提供了jQuery的核心库，还提供了一套比较完整的移动UI框架。
　　要搭建PhoneGap&jQuery Mobile移动应用开发环境（For Android），需要有以下资源：
Android SDK；
Eclipse ADT Plugin；
PhoneGap资源包；
jQuery Mobile资源包。
　　至于如何安装jdk、Android SDK、Eclipse、Eclipse Plugin的如何安装本文同样，不再赘述，请配置好相关环境之后，创建一个Android Application Project，至于如何创建同样不再赘述，因为本文的重点是说明如何将PhoneGap和jQuery整合到Android Application Project中去，下面将一步一步说明如何整合。Android示例项目名称为：HelloWorld（为啥叫这个名字，我想程序员都懂的）。
将D:\phonegap-2.9.0\lib\android下的cordova-2.9.0.jar复制到D:\androidws\HelloWorld\libs下，同时需要把cordova-2.9.0.jar加到Build Path中。
在Android项目中创建路径：D:\androidws\HelloWorld\assets\www。
将cordova.js复制到D:\androidws\HelloWorld\assets\www\js。
将D:\phonegap-2.9.0\lib\android\xml整个文件夹复制到D:\androidws\HelloWorld\res。
修改主Activity类，把Activity继承的父类修改为DroidGap，onCreate方法的权限修饰符改为public（默认为 protected，不改编译出错），将onCreate方法中的setContentView替换成super.loadUrl(“启动的主页面地 址”)，删除onCreateOptionsMenu方法。修改后的主Activity类如下所示：　
package com.example.
import org.apache.cordova.DroidG
import android.os.B
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
　　6.　修改AndroidMenifest.xml文件，修改后的文件示例如下：
&?xml version="1.0" encoding="utf-8"?&
&manifest xmlns:android="/apk/res/android"
package="com.example.helloworld"
android:versionCode="1"
android:versionName="1.0" &
&!-- 增加Cordova的屏幕支持 --&
&supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true"
android:resizeable="true"
android:anyDensity="true"
&!-- 增加Cordova插件支持 --&
&uses-permission android:name="android.permission.CAMERA" /&
&uses-permission android:name="android.permission.VIBRATE" /&
&uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /&
&uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&
&uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /&
&uses-permission android:name="android.permission.INTERNET" /&
&uses-permission android:name="android.permission.RECEIVE_SMS" /&
&uses-permission android:name="android.permission.RECORD_AUDIO" /&
&uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /&
&uses-permission android:name="android.permission.READ_CONTACTS" /&
&uses-permission android:name="android.permission.WRITE_CONTACTS" /&
&uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&
&uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&
&uses-permission android:name="android.permission.GET_ACCOUNTS" /&
&uses-permission android:name="android.permission.BROADCAST_STICKY" /&
&uses-feature android:name="android.hardware.camera" /&
&uses-feature android:name="android.hardware.camera。autofocus" /&
&uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" /&
&application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" &
&!-- 为Activity节点增加属性configChanges --&
&activity
android:configChanges="orientation|keyboardHidden"
android:name="com.example.helloworld.MainActivity"
android:label="@string/app_name" &
&intent-filter&
&action android:name="android.intent.action.MAIN" /&
&category android:name="android.intent.category.LAUNCHER" /&
&/intent-filter&
&/activity&
&/application&
&/manifest&
　　7. 在asset/www下添加主页面index.html，添加完页面后，这时候其实已经可以运行了，这个时候一个完整的PhoneGap应用开发环境配置就结束了。但是为了使用jQuery Mobile，我们还需要做一些其他配置：
将D:\jquery.mobile-1.3.2\demos\css复制到D:\androidws\HelloWorld\assets\www\css中；
将D:\jquery.mobile-1.3.2\demos\js复制到D:\androidws\HelloWorld\assets\www\js中，如果之前没有把cordova.js放到这个目录下面，这个时候可以把它移到这个路径下面。
　　8.以上所有配置完成，那么一个基于PhoneGap&jQuery Mobile的移动应用开发环境就配置完成了。
　　那下面就让我们玩一玩吧，在Android项目中我新建了一个index.html文件来作为主页面显示，为了测试页面的跳转，我又加了一个test.html的页面。
　　具体的代码结构如下图所示，图中标注红框的部分是这次新增或者需要修改的地方：
　　下面给出两个页面的源代码，因为仅是为了测试所用，所以页面中的前端代码写的比较糙一点，也没有按照W3C的规范来做。
index.html
&!doctype html&
&html&
&head&
&meta charset="utf-8"&
&meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&
&title&PhoneGap with jQuery Mobile&/title&
&link rel="stylesheet"
href="css/themes/default/jquery.mobile-1.3.2.min.css"&
&script src="js/jquery.js"&&/script&
&script src="js/jquery.mobile-1.3.2.min.js"&&/script&
&script type="text/javascript" src="js/cordova-2.6.0.js"&&/script&
&/head&
&body&
&h1 style="text-align:"&
PhoneGap with jQuery Mobile
&/h1&
&div style="background-color:#FF7300;color:#CCCCCC;height:60line-height:60border:2px solid #CCCCCC;padding:10margin:10border-radius:5"&
My First PhoneGap & jQuery Mobile
&/div&
&a href="test.html" style="height:60line-height:60border:2px solid #CCCCCC;padding:10margin:10border-radius:5"&
Click me
&/a&
&div data-role="footer" class="jqm-footer"&
&p class="jqm-version"&&/p&
&p&Copyright 2013 The jQuery Foundation&/p&
&/div&
&/body&
&!doctype html&
&html&
&head&
&meta charset="utf-8"&
&meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&
&title&HTML5Paint with jQuery Mobile&/title&
&link rel="stylesheet"
href="css/themes/default/jquery.mobile-1.3.2.min.css"&
&script src="js/jquery.js"&&/script&
&script src="js/jquery.mobile-1.3.2.min.js"&&/script&
&script type="text/javascript" src="js/cordova-2.6.0.js"&&/script&
&/head&
&body&
&h1 style="text-align:"&
PhoneGap with jQuery Mobile
&/h1&
&div style="background-color:#FF7300;color:#CCCCCC;height:60line-height:60border:2px solid #CCCCCC;padding:10margin:10border-radius:5"&
Welcome to you!
&/div&
&div data-role="footer" class="jqm-footer"&
&p class="jqm-version"&&/p&
&p&Copyright 2013 The jQuery Foundation&/p&
&/div&
&/body&
　　好，一切准备OK，开始让我们运行吧，运行时和Android应用运行是一样的，可以选择模拟器和手机，也可以打包成apk文件下载安装到手机上，具体方法我就不多做介绍了，下面给出我在模拟器上跑完的两幅结果图片。
　　也许看的迷糊，那就动手搞一搞吧，搞出来之后就是收获，从现在开始我会把自己在研究PhoneGap + jQuery Mobile中的一些示例代码和心得问题随时发出来，到时候希望各位不吝赐教，多多交流！
声明：OSCHINA 博客文章版权属于作者，受法律保护。未经作者同意不得转载。
No tags for this post.
除非注明，本站文章均为原创或编译，转载请注明： 文章来自
分享给朋友：
查看全部：