前言
Cordova
提供了一组设备相关的
API
，通过这组
API
，移动应用能够以
JavaScript
访问原生的设备功能，如摄像头、麦克风等。
Cordova
还提供了一组统一的
JavaScript
类库，以及为这些类库所用的设备相关的原生后台代码。
Cordova
支持如下移动操作系统：
iOS, Android,ubuntu phone os, Blackberry, Windows
Phone, Palm WebOS, Bada
和
Symbian
。
适用人群
本文是
Apache Cordova
教程适合初学者学习。
学习前提
在学习本教程之前，你需要对
JavaScript
相关的知识有一定了解。
版本信息
书中演示代码基于以下版本：
标准
版本信息
Cordova
5.1.1
Node.js
0.12.7
1
创建一个
Cordova
项目
步骤
1
、确保你已经将
Node.js
的最新版本安装到你的系统上。
2
、打开终端（
Mac
）或命令窗口（
Windows
），键入以下命令来安装
Cordova CLI
：
npm install -g cordova
如果在
Mac
上：
sudo npm install -g cordova
如果你已经将
Cordova
安装到你的电脑上，请确保你已经将其升级到最新版本。
npm update -g cordova
3
、确定你在你的文件系统中存储项目的路径。
4
、打开
Cordova CLI
，在命名为
workshop
的目录中创建一个命名为
Workshop
的
Cordova
项目：
cordova create workshop com.yourname.workshop Workshop
5
、导航到项目目录：
cd workshop
6
、增加对
iOS
平台的支持（可选项）
为了能够为
iOS
平台创建项目，那么必须在你的电脑上安装
iOS
软件开发工具包。如果不需要支持
iOS
平台，那么你可以跳过这一步，并增加对其他平台的支持或只是简单地在浏览器中
运行本教程的应用。
1
、
确保你的系统中
iOS SDK
是可用的。
2
、
在命令行
，
确保你处在
workshop
目录
，
并键入
：
cordova platforms add ios
7
、增加对安卓平台的支持（可选项）
为了能够在安卓平台上创建项目，那么必须将安卓软件开发工具包安装到你的系统中。如果你不需要支持安卓平台，那么你可以跳过这一步，并增加对其他平台的支持或只是简单地在
浏览器中运行本教程的应用。
确保你的系统中安卓软件开发工具包和蚂蚁构建工具（
ant build tool
）是可用的。在这里，安卓软件开发工具包是可用的。在你的路径中，安卓和蚂蚁工具必须是可用的。
8
、确保你处在
workshop
目录，并添加基本插件到你的项目中：
cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console
9
、在
workshop
下测试目录结构。
•
www
文件夹是你将要编码你的
HTML / JavaScript
应用的位置。在一个浏览器中打开
index.html
文件，以查看由
Cordova CLI
创建的默认应用。
•
Platforms
文件夹是
Cordova
将要为
不同的平台（
iOS
、安卓等等）创建你的应用的位置。这个文件夹的内容将由
Cordova CLI
自动生成，而且你千万不要在该目录中进行编辑代码。
•
在
plugins
目录中安装插件。
•
应用参数（姓名、作者等等）都存储在
config.xml
文件中。
2
建立一个
Cordova
项目
该单元是可选的。如果你在以前的单元中就没有增加对任何平台的支持，那么你可以跳过本单元，进入第三单元。
为
iOS
平台创建项目
为了为你的应用程序建立一个
iOS
版本，你需要已经在你的电脑中安装了
iOS
软件开发工具包。使用以下步骤在
iOS
平台中建立项目。
在命令行，确保你处在
workshop
目录，并键入：
cordova build ios
本项目创建于
workshop / platforms / ios
文件夹。双击
Workshop.xcodeproj
在
Xcode
中打开项目，并在模拟器或设备上运行该项目。
你也可以在
iOS
模拟器中直接从命令行运行该应用。首先安装
ios-sim
：
npm install -g ios-sim
或者
sudo npm install -g ios-sim
为安卓平台创建项目
为了为你的应用程序建立一个安卓版本，你需要已经在你的电脑中安装了安卓软件开发工具包。使用以下步骤在安卓平台中建立项目。
为了在
workshop/platforms/android
文件夹创建项目，并在使用
USB
线连接到你电脑的安卓设备运行它，键入：
cordova run android
为了在
workshop/platforms/android
文件夹创建项目，并在安卓模拟器上运行它，键入：
cordova emulate android
3
设置
Workshop
文件
步骤
1
、删除你的项目的
workshop/www
文件夹内的内容。
2
、从这里下载本教程的支持文件，或者复制资源库
git clone https://github.com/ccoenraets/cordova-tutorial
3
、如果下载了压缩文件，那么把它解压到你的文件系统中的任何位置。
4
、复制
starter-www
的内容到你的项目的
workshop/www
文件夹中。
5
、构建和测试你的应用程序：
•
如果你已经将
Mobile
软件开发工具包安装到你的系统中，重复第
2
单元的步骤。
•
如果你没有安装
Mobile
软件开发工具包，那么只需简单地在你的电脑上的一个浏览器中打开
www/index.html
。
6
、在搜索框内键入几个字符，以通过名称搜索员工。这个时候点击一个员工连接不会产生任何结果。
4
选择一个数据存储策略
步骤一：探索不同的持久化机制
打开以下文件，并探索不同的持久性服务：
1.
www/js/services/memory/EmployeeService.js
2.
www/js/services/json/EmployeeService.js
3.
www/js/services/localstorage/EmployeeService.js
4.
www/js/services/websql/EmployeeService.js
步骤二：用不同的持久化机制测试应用程序
应用程序最初被配置为与内存数据存储一同工作。为了改变应用程序的本地持久机制：
1
、在
index.html
中：代替
js/services/memory/EmployeeService.js
，为你选择的服务输入
.js
文件；例如：
js/services/websql/EmployeeService.js
。
2
、测试应用程序。
为了测试
JSON
服务，确保提供的作为实体一部分的
Node.js
服务正在运行：
1
、打开终端或命令窗口，并导航到
cordova
教程的服务目录下
2
、安装依赖服务：
npm install
3
、启动服务
node server
服务工具
CORS
（跨源资源共享）支持跨站点
HTTP
检索。因此，你可以从一个加载自于其他区域或加载自于文件系统的文件调用服务。
由于
services/json/EmployeeService.js
指向
localhost
，这只有当在你的计算机上运行应用程序时才会工作，而在你的设备上运行应用程序时，它不会工作，这是因为它不把你的计算机看
作是
“localhost”
。为了使得你在你的设备上运行应用程序时
JSON
服务工作，确保你的计算机和设备是在同一子网中，识别你的计算机的
ip
地址，在
services/json/EmployeeService.js
中以
这个
ip
替换
localhost
。作为一个选择，你也可以将服务部署在公开可用的服务上。在现实生活中的应用程序中，你通常会在某种配置文件中具体化主机名称。
当在浏览器中和设备上运行应用程序时，
www/js/services
中的所有其他数据存储服务是即开即用的。
5
使用本地通知
一个默认的
JavaScript
警告显示出你的应用程序不是本地化的事实。在本章节中，我们建立基本的下部结构以实现，当应用程序在设备上运行时显示本地化的警告，并且当应用程序在
浏览器中运行时，又回到默认的
JavaScript
警告。
步骤
1
、确保你处在
workshop
目录，添加本地对话框插件到你的项目中：
cordova plugin add org.apache.cordova.dialogs
2
、在
index.html
中，添加下面的脚本标记（作为主体底部的第一个脚本标签）：
<script src="cordova.js"></script>
本
Cordova CLI
命令用以在建立项目时向平台内注入特定的
cordova.js
版本。换句话说，
cordova.js
不需要（也不应该）显示在你的
project/www
文件夹内。
3
、当与可用的
navigator.notification
对象一同在一台设备上运行时（对话框插件已安装），重写
window.alert()
函数，并用一个对
navigator.notification.alert()
的调用替换它的默认实现。
打开
js/app.js
，并添加这些代码到
“Event Registration”
时钟：
document.addEventListener('deviceready', function () {
if (navigator.notification) { // Override default HTML alert with native dialog
window.alert = function (message) {
navigator.notification.alert(
message, // message
null, // callback
"Workshop", // title
'OK' // buttonName
);
};
}
}, false);
4
、测试应用：点击
Help
按钮。
•
当你在浏览器中运行应用程序时，你应该看到一个标准的浏览器警告。
•
当你在你的设备上运行应用程序时，你应该看到一个本地警告。
6
避免
300 ms
点击延迟
步骤
1
、在你的
iOS
设备或
iOS
模拟器上测试该应用程序：点击
Help
按钮，并留意弹出对话框之前的延迟。
这个延迟的发生时由于操作系统要大约等待
300 ms
以确认用户是否要再次点击目标（并因此执行一个双击事件）。
2
、在
index.html
中，添加以下脚本标记：
<script src="lib/fastclick.js"></script>
FastClick
是由金融时报创建的开源库。更多信息请点击这里。
3
、在
app.js
中，在
deviceready
事件处理器中注册
FastClick
。
FastClick.attach(document.body);
4
、测试应用程序：点击
Help
按钮。现在对话框会没有延迟地出现。
7
设置单页应用程序
“
单页应用程序
”
是一个网页应用程序，存在于单个
HTML
页面中。根据用户使用该应用程序的导航需要，已在应用程序中增加
“views”
，并从
DOM
中移除。一个单页应用程序的布局是
尤其适合于移动应用程序的：
•
没有刷新页面提供了一个更流畅和更接近于本地化的体验。
•
用户界面是完全在客户端创建的，而不依赖于服务器创建用户界面，使其成为脱机工作应用程序的理想架构。
在本单元中，我们设置基本的下部构造将员工目录转为单页应用程序。
步骤
1
、在
index.html
中：在主体标签内删除
HTML
标记（伴随有脚本标签异常）。
2
、将立即执行函数添加到
app.js
内，定义一个命名为
renderHomeView()
的函数（刚好在
findByName
函数之后）。执行函数以编程方式增加
Home View
标记到主体元素。
function renderHomeView() {
var html =
"<h1>Directory</h1>" +
"<input class='search-key' type='search' placeholder='Enter name'/>" +
"<ul class='employee-list'></ul>";
$('body').html(html);
$('.search-key').on('keyup', findByName);
}
3
、修改数据服务的初始化逻辑：当服务已经成功地初始化后，调用
renderHomeView()
函数以程序化显示
Home View
。
var service = new EmployeeService();
service.initialize().done(function () {
renderHomeView();
});
4
、由于你已经移动注册的
KeyUp
事件到
renderHomeView()
函数中，确保你在事件注册（
Event Registration
）部分移除原来的事件注册。
5
、由于
Help
按钮已不在该位置，对
Help
按钮移除点击事件处理器（在
10:27
注册部分）。
6
、测试应用程序。
确保你没有忽略上述第
4
和第
5
步，否则你可能运行到难以跟踪的问题，这与本教程中后续讲解的事件触发两次有关。
8
使用
Handlebars
模板
在
JavaScript
中编写
HTML
片段和以编程方式将它们插入到
DOM
是令人乏味的。它使你的应用程序更难写，更难以维护。
HTML
模板通过从你的代码中断开用户界面定义（
HTML
标记）
解决了这一问题。这里有很多不错的
HTML
模板解决方案，包括
Mustache.js
、
Handlebars.js
和
Underscore.js
等等一系列例子。
在本单元中，我们创建了两个模板用以简化员工目录应用程序的代码。我们使用
Handlebars.js
，但是可以与使用其他
HTML
模板解决方案实现同样的结果。
步骤
1
：定义模板
根据如下步骤修改
index.html
：
1
、增加一个脚本标签以包含
handlebars.js
库：
<script src="lib/handlebars.js"></script>
2
、增加
ratchet.css
和
styles.css
到
index.html
的头部
Ratchet
是一个简单的
CSS
工具包，可以为移动应用程序提供样式。
<link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
3
、创建一个
HTML
模板以渲染
Home View
。在主体标签的第一子标签增加本脚本标签：
script id="home-tpl" type="text/template">
<header class="bar bar-nav">
<h1 class="title">Directory</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<input class='search-key' type="search"/>
</div>
<div class="content"></div>
</script>
4
、创建一个
HTML
模板以渲染员工列表。在上一个之后立即增加本脚本标签：
script id="employee-list-tpl" type="text/template">
<ul class="table-view">
{{#each this}}
<li class="table-view-cell media">
<a href="#employees/{{ id }}">
<img class="media-object pull-left" src="assets/pics/{{pic}}">
<div class="media-body">
{{firstName}} {{lastName}}
<p>{{title}}</p>
</div>
</a>
</li>
{{/each}}
</ul>
</script>
步骤
2
：使用模板
在
app.js
中修改即用函数如下：
1
、在
service
变量声明以前，立即声明两个变量，这两个变量持有上述定义模板的编译版本：
var homeTpl = Handlebars.compile($("#home-tpl").html());
var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());
2
、修改
renderHomeView()
函数以使用
homeTpl
模板代替内联
HTML
：
function renderHomeView() {
$('body').html(homeTpl());
$('.search-key').on('keyup', findByName);
}
3
、修改
findByName()
函数以使用
employeeListTpl
模板代替内联
HTML
：
function findByName() {
service.findByName($('.search-key').val()).done(function (employees) {
$('.content').html(employeeListTpl(employees));
});
}
4
、测试应用程序。
步骤
3
：解决
iOS7
的状态栏问题
在
iOS7
中，状态栏与应用程序视图重叠。结果是，状态栏文本可能与应用程序的标题文本冲突，如上截图所示。你可以使用状态栏插件解决这个问题。
1
、增加状态栏插件：
cordova plugins add org.apache.cordova.statusbar
2
、在
app.js
中，在
deviceready
处理器的顶部增加以下代码：
StatusBar.overlaysWebView( false );
StatusBar.backgroundColorByHexString('#ffffff');
StatusBar.styleDefault();
3
、再次建立应用程序，并在
iOS
模拟器或者
iOS
设备上测试你的应用程序。
9
创建视图
是时候提供带有一些结构的应用程序了。如果我们继续将应用程序的所有核心功能添加到引导应用程序的即时函数，那么它将很快变得难以控制。在本部分，我们创建一个
HomeView
对象，其封装逻辑以创建和渲染
Home
视图。
步骤
1
：创建
Home View
1
、在
js
目录创建一个命名为
HomeView.js
的文件，并定义一个
HomeView
构造函数执行如下：
var HomeView = function (service) { }
构造函数将雇员数据服务作为一个参数
2
、
HomeView
使用一个嵌套视图来显示员工列表。定义员工的列表作为单独视图，使它在其他情况下可重复使用。我们将在下面的步骤
2
定义
EmployeeListView
。现在，顶一个本地变
量以继续跟踪嵌套视图。
var HomeView = function (service) { var employeeListView; }
3
、在
HomeView
构造函数内定义一个
initialize()
函数。
•
为视图定义一个
div
封装。该
div
封装用于附加视图相关事件。
•
实例化嵌套视图（你将在步骤
2
定义
EmployeeListView
）
.
•
最后，在
HomeView
构造函数中调用
initialize()
函数。
var HomeView = function (service) {
var employeeListView;
this.initialize = function () {
// Define a div wrapper for the view (used to attach events)
this.$el = $('<div/>');
this.$el.on('keyup', '.search-key', this.findByName);
employeeListView = new EmployeeListView();
this.render();
};
this.initialize();
}
4
、从
app.js
移动
renderHomeView()
函数到
HomeView
类。为了保持视图的可重用性，附加
HTML
到
div
封装（
this.el
）代替文档主体。现在由于该函数被封装在
HomeView
中，你也可以从
renderHomeView()
到
render()
重新命名它。
this.render = function() {
this.$el.html(this.template());
$('.content', this.$el).html(employeeListView.$el);
return this;
};
5
、从
app.js
移动
findByName()
函数到
HomeView
，并将调整其与嵌套视图一同工作。
this.findByName = function() {
service.findByName($('.search-key').val()).done(function(employees) {
employeeListView.setEmployees(employees);
});
};
步骤
2
：创建
EmployeeList
视图
1
、在
js
目录创建一个命名为
EnployeeListView.js
的文件。
2
、执行
EmployeeListView
如下：
var EmployeeListView = function () {
var employees;
this.initialize = function() {
this.$el = $('<div/>');
this.render();
};
this.setEmployees = function(list) {
employees = list;
this.render();
}
this.render = function() {
this.$el.html(this.template(employees));
return this;
};
this.initialize();
}
步骤
3
：使用
Home View
1
、在
index.html
中，增加脚本标签以包含
EmployeeListView.js
和
HomeView.js
（仅在
app.js
的脚本标签之前）：
<script src="js/EmployeeListView.js"></script>
<script src="js/HomeView.js"></script>
2
、在
app.js
中，移除
renderHomeView()
函数。
3
、移除
findByName()
函数。
4
、修改模板初始化。不是将它们声明为局部变量，而是增加它们到它们各自类的原型：
HomeView.prototype.template = Handlebars.compile($("#home-tpl").html());
EmployeeListView.prototype.template =
Handlebars.compile($("#employee-list-tpl").html());
5
、当服务已经成功初始化后，修改服务初始化逻辑以显示
Home View
。将服务传递给主视图构造函数。
service.initialize().done(function () {
$('body').html(new HomeView(service).render().$el);
});
6
、测试应用程序。
10
执行视图路由
在本部分中，我们增加一个员工细节视图。由于现在该应用程序有一个以上的视图，我们也增加一个简单的视图路由机制。
步骤
1
：创建员工模板。
打开
index.html
，并添加一个模板，以提供详细的员工视图：
<script id="employee-tpl" type="text/template">
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left" href="#">
<span class="icon icon-left-nav"></span>
</a>
<h1 class="title">Employee</h1>
</header>
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell media">
<img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
<div class="media-body">
{{ firstName }} {{ lastName }}
<p>{{ title }}</p>
</div>
</li>
<li class="table-view-cell media">
<a href="tel:{{ officePhone }}" class="push-right">
<span class="media-object pull-left icon icon-call"></span>
<div class="media-body">
Call Office
<p>{{ officePhone }}</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a href="tel:{{ cellPhone }}" class="push-right">
<span class="media-object pull-left icon icon-call"></span>
<div class="media-body">
Call Cell
<p>{{ cellPhone }}</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a href="sms:{{ cellPhone }}" class="push-right">
<span class="media-object pull-left icon icon-sms"></span>
<div class="media-body">
SMS
<p>{{ cellPhone }}</p>
</div>
</a>
</li>
<li class="table-view-cell media">
<a href="mailto:{{ email }}" class="push-right">
<span class="media-object pull-left icon icon-mail"></span>
<div class="media-body">
<p>{{ email }}</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</script>
步骤
2
：创建
EmployeeView
类
1
、在
js
目录创建一个命名为
EmployeeView.js
的文件，并定义它如下：
var EmployeeView = function(employee) {
this.initialize = function() {
this.$el = $('<div/>');
};
this.render = function() {
this.$el.html(this.template(employee));
return this;
};
this.initialize();
}
2
、在
index.html
中，增加一个脚本标签以包含
EmployeeView.js
（仅在
app.js
的脚本标签之前）。
<script src="js/EmployeeView.js"></script>
步骤
3
：执行视图路由
1
、在
index.html
中，增加一个脚本标签以包含
router.js
（仅在
jquery.js
的脚本标签之前）。
<script src="lib/router.js"></script>
2
、打开
app.js
。增加编译的员工模板到
EmployeeView
的原型：
EmployeeView.prototype.template = Handlebars.compile($("#employee-tpl").html());
3
、在应用程序中定义两个使用的路由：
service.initialize().done(function () {
router.addRoute('', function() {
$('body').html(new HomeView(service).render().$el);
});
router.addRoute('employees/:id', function(id) {
service.findById(parseInt(id)).done(function(employee) {
$('body').html(new EmployeeView(employee).render().$el);
});
});
router.start();
});
4
、测试应用程序。
11
使用硬件加速
在本单元中，当用户在列表和细节视图之间导航时，你添加硬件加速页转换。
步骤
修改
index.html
如下：
1
、在
index.html
中增加
pageslider.css
到顶部标签之中：
<link href="assets/css/pageslider.css" rel="stylesheet">
2
、增加一个脚本标签以包含
pageslider.js
库（在
jquery.js
之后）：
<script src="lib/pageslider.js"></script>
这里
PageSlider
是
GitHub
上
I
主机的微型库。
修改
app.js
如下：
1
、在
Local Variables
部分，声明
PageSlider
对象的一个实例如下：
var slider = new PageSlider($('body'));
2
、在路由中，用对
slider.slidePage()
的调用替代对
$('body').html()
的调用，传递相同的参数到函数。
slider.slidePage(new HomeView(service).render().$el);
和
slider.slidePage(new EmployeeView(employee).render().$el);
12
使用本地
API
在本部分中，我增加了给员工添加他
/
她的位置信息标签的能力。在本示例应用程序中，我们在一个警告中显示原始信息（经度
/
纬度）。在现实生活中的应用程序中，我们通常在数据
库中保存位置信息作为员工信息的一部分，并在一张图上显示。
当将应用程序作为一个
Cordova
应用程序在你的设备上运行时，下面的这些代码就会工作。当页面是由
http://
协议服务时，这些代码也会在桌面系统中的
Chrome
上工作，并且在
Firefox
中，忽视该协议（
http://
或
file://
）。
步骤
1
、增加
geolocaton
插件到你的项目中：
cordova plugin add org.apache.cordova.geolocation
2
、在
index.html
中，增加以下列表项到
employee-tpl
模板：
<li class="table-view-cell media">
<a hre="#" class="push-right add-location-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Add location
</div>
</a>
</li>
3
、在
EmployeeView
的
initialize()
函数中，为
Add Location
列表项的单击事件注册一个事件侦听器。
this.$el.on('click', '.add-location-btn', this.addLocation);
确保你增加的这一行是作为
initialize()
函数的最后一行（在
this.$el
被分配以后）。
4
、在
EmployeeView
中，定义
addLocation
事件处理程序如下：
this.addLocation = function(event) {
event.preventDefault();
navigator.geolocation.getCurrentPosition(
function(position) {
alert(position.coords.latitude + ',' + position.coords.longitude);
},
function() {
alert('Error getting location');
});
return false;
};
5
、测试应用程序。
13
使用联系人
API
在本部分中，你使用
Cordova
联系人
API
提供给用户能够添加一个员工到设备联系人列表的能力。
当在你的设备上作为一个
Cordova
应用程序运行该应用程序时，下面的代码才工作。换句话说，你不能在你电脑上的浏览器中测试它。
1
、添加联系人插件到你的项目中。
cordova plugin add org.apache.cordova.contacts
2
、在
index.html
中，添加以下列表项到员工模板：
<li class="table-view-cell media">
<a hre="#" class="push-right add-contact-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Add to contacts
</div>
</a>
</li>
3
、在
EmployeeView
的
initialize()
函数中，为
Add to Contacts
列表项的单击事件注册一个事件侦听器。
this.$el.on('click', '.add-contact-btn', this.addToContacts);
4
、在
EmployeeView
中，定义
addToContacts
事件处理程序如下：
this.addToContacts = function(event) {
event.preventDefault();
console.log('addToContacts');
if (!navigator.contacts) {
alert("Contacts API not supported", "Error");
return;
}
var contact = navigator.contacts.create();
contact.name = {givenName: employee.firstName, familyName: employee.lastName};
var phoneNumbers = [];
phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true);
contact.phoneNumbers = phoneNumbers;
contact.save();
return false;
};
14
使用照相机
API
在本部分中，你使用
Cordova
照相机
API
提供给用户能够采集员工照片的能力，并将该图片用作应用程序中的员工图片。我们没有在这个示例应用程序存留这样的照片。
当在你的设备上作为一个
Cordova
应用程序运行该应用程序时，下面的代码才工作。换句话说，你不能在你电脑上的浏览器中测试它。
1
、添加照相机插件到你的项目中：
cordova plugin add org.apache.cordova.camera
2
、在
index.html
中，添加以下列表项到员工模板：
<li class="table-view-cell media">
<a hre="#" class="push-right change-pic-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Change Picture
</div>
</a>
</li>
3
、在
EmployeeView
的
initialize()
函数中，为
Change Picture
列表项的单击事件注册一个事件侦听器。
this.$el.on('click', '.change-pic-btn', this.changePicture);
4
、在
EmployeeView
中，定义
changePicture
事件处理程序如下：
this.changePicture = function(event) {
event.preventDefault();
if (!navigator.camera) {
alert("Camera API not supported", "Error");
return;
}
var options = { quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Album
encodingType: 0 // 0=JPG 1=PNG
};
navigator.camera.getPicture(
function(imgData) {
$('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
},
function() {
alert('Error taking picture', 'Error');
},
options);
return false;
};
5
、测试应用
更多信息请访问
http://wiki.jikexueyuan.com/project/apache-cordova-tutorial/
