Phonegap3.4 教程

英文原扯：http://coenraets.org/blog/cordova-phonegap-3-tutorial/

我只是对着原文学习一遍，记录在这里，一来为了加深印象（边翻译边学习），二来为了自己以后的查阅。需要说明的是，我并没翻译，有时候也结合了自己的理解，有时候根本就翻译不好，望阅者赐教、见谅。

本篇教程会带领大家用Cordova（Phonegap）建一个功能完善的员工簿（employee directory）应用程序。

我们将会学到：

1、如何使用不同的本地数据存储技术。

2、如何使用Geolocation, Contacts, Camera这几个API。

3、如何处理手机特定的一些问题，比如触屏事件，滚动，风格化，页面切换等。

4、如何使用单面架构和HTML模板来构建一个应用程序。

5、如何使用Cordova CLI（Command Line interface）构建（编译并打包）一个应用程序。

准备工作：

为了完成本次教程，您需要一个代码编辑器，较新的浏览器，电脑可以上网，会HTML和Javascript更好，但不必多么精通Javascript。

移动设备或者移动SDK并不是必需的，不过如果您想在模拟器或设备上测试运行，你就需要了，否则，您只须在浏览器测试即可。

Part 1：创建一个Cordova 项目：

1、确保安装了最新的Node.js。

2、cmd打开Windows系统的命令行窗口（原教程兼顾了Mac OS、IOS 和Windows、Android，我这里只针对Windows），输入

npm install -g cordova

3、然后cd到一个目录，该目录下会保存您的项目。

4、创建一个名为“workshop的项目：

cordova create workshop com.yourname.workshop Workshop

5、转到项目目录：

cd workshop

6、添加Android平台支持：

cordova platforms add android

7、添加控件（确保现在仍然在workshop目录下）：

cordova plugin add org.apache.cordova.device

cordova plugin add org.apache.cordova.console

8、现在可以看看workshop目录下的项目结构了。

Part 2：构造一个Cordova项目：

确保电脑上安装了Android SDK。（关于环境搭建，可以参考我的另一篇文章）

为了workshop/platforms/android下的项目并在在真实设备上运行它（当然了，前提是你的Android机已经通过USB和电脑连起来了），输入：

cordova run android

为了在模拟器上整，可以输入：

cordova emulate android

Part 3：准备Workshop文件：

1、从这里下载assets。另外，老外的网站经常出现打不开的情况——伟大的党和政府——为了以防万一，我存一份到百度网盘里。

2、解压。

3、删除工程（通过上面的步骤创建出来的项目）workshop/www目录下除了config.xml以外的其他所有文件。（tmd，我创建的项目的workshop/www下里根本就没什么config.xml文件，这个文件明明在上级workshop下边，不知道什么原因）

4、将下载的www下的内容拷贝到workshop/www下。

5、cordova run android 在手机上测试下。

Part 4：选择一个本地存储选项（Choosing a Local Storage Option）：

第1步：看看几种不同的持久化机制：

workshop/js/adapters下的文件提供了几个adapter：

1.MemoryAdapter (在memory-adapter.js中)

2.JSONPAdapter (在jsonp-adapter.js中)

3.LocalStorageAdapter (在localstorage-adapter.js中)

4.WebSqlAdapter (在websql-adapter.js中)

第2步：用几中不同的持久化机制测试程序：

默认情况下，程序支持提内存数据存储，为了变更程序本地的数据存储，需要以下几步：

1、在index.html中：不导入memory-adapter.js，而是将你需要的js导入，比如 jsonp-adapter.js或localstorage-adapter.js或websql-adapter.js。

2、在js/app.js中：实例化你选择的adapter（JSonAdapter或LocalStorageAdapter或WebSqlAdapter)，以代替MemoryAdapter的实例化。

3、测试程序。

Part 5：使用本地Notification：

一个默认的JavaScript Alert会让人觉得你的程序不是本地的。我们可以做一些工作，使得程序在手机上运行时显示本地弹窗，在浏览器中运行时显示JavaScript弹窗。

1、为项目添加本地对话框插件：cordova plugin add org.apache.cordova.dialogs

2、在index.html中添加下面的一行：

<script src="cordova.js"></script>，让其作为body底部的第一个script标签（打开index.html可以看到底部已经导入几个js文件了）。

这会告诉Cordova CLI在构建项目时注入一个特定版本的cordova.js。就是说，cordova.js不需要预先保存在项目目录下。

3、用下面的代码替换”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);

当在移动设备上运行时，navigator.notification是可用的，if成立（当然，前提是你已经安装了对话框插件，我们上面已经安装过了），进而就覆盖了默认的alter实现。

4、测试程序：点击”help“按钮，当在浏览器上运行时显示的是浏览器中的alter窗口，当在手机上运行时显示的就是手机设备本地的Notification窗口。（我做的结果是没什么两样，而且在浏览器中老提示cordova.js找不到，tmd）。

Part 6：避免300毫秒的点击延时：（貌似这是针对IOS的，略过）

Part 7：打造一个单页程序：

这里指的是只有一个HTML页面的程序。

1、index.html：将body中的HTML标签移除（script除外）

2、在app.js的立即函数中定义一个renderHomeView函数，在findByName函数右边）。函数的功能是：给body标签动态地添加内容：

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、更新data adapter的初始化逻辑：adapter初始化后，调用renderHomeView函数：

var adapter = new MemoryAdapter();
adapter.initialize().done(function () {
    renderHomeView();
});

4、把Event-Registration代码块中的这一行$('.search-key').on('keyup', findByName);注释掉，毕竟我们已经在renderHomeView写过了。
5、把Event-Registration代码块中的Help Button响应事件代码也移除，因为现在已经没这个按钮了。

6、测试程序。

Part 8：使用处理条模板（Handlebars Templates）：

通过Javascript编程的方式动态插入HTML碎片是非常不爽的，HTML模板解决这个问题的办法就是：将UI的定义（HTML）从代码中分离出来，有几个很不错的HTML 模板方案，包括Mustache.js，Handlebars.js和Undercore.js等。

在这一部分，我们创建两个模板，让程序更加合理。我们使用Handlebars.js，按如下的步骤更新index.html：

1、包含Handlebars.js（注意，要加到body底部的最上面，至少不要加到app.js的下面，因为app.js里用到了Handlebars）：<script src="lib/handlebars.js"></script>

2、创建一个HTML模板来渲染Home View，让下面的代码作为body的第一个子标签：

<script id="home-tpl" type="text/x-handlebars-template">
    <div class="topcoat-navigation-bar">
        <div class="topcoat-navigation-bar__item center full">
            <h1 class="topcoat-navigation-bar__title">Employee Directory</h1>
        </div>
    </div>
    <div class="search-bar">
        <input type="search" placeholder="search" class="topcoat-search-input search-key">
    </div>
    <div class="topcoat-list__container">
        <ul class="topcoat-list list employee-list"></ul>
    </div>
</script>

3、创建一个HTML模板来呈现员工列表项，下面的代码紧跟在上面添加的代码后面：

<script id="employee-li-tpl" type="text/x-handlebars-template">
    {{#.}}
    <li class="topcoat-list__item">
        <a href="#employees/{{id}}">
            <img src="assets/pics/{{pic}}">
            <p>{{firstName}} {{lastName}}</p>
            <p>{{title}}</p>
            <span class="chevron"></span><span class="count">{{reports}}</span>
        </a>
    </li>
    {{/.}}
</script>

4、把topcoat-mobile-light.css 和 styles.css 引入到index.html：

<link href="assets/topcoat/css/topcoat-mobile-light.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">

更新app.js的立即函数：

1、在adapter变量的声明后面紧跟下面两行：

var homeTpl = Handlebars.compile($("#home-tpl").html());

var employeeLiTpl = Handlebars.compile($("#employee-li-tpl").html());

这两个变量保存着上面定义的两个模板的编译后的版本号

2、更新renderHomeView函数，以使用homtTpl模板来代替内联HTML：

function renderHomeView() {
    $('body').html(homeTpl());
    $('.search-key').on('keyup', findByName);
}

3、更新findByName函数，以使用employeeLITpl来代替内联HTML：

function findByName() {
    adapter.findByName($('.search-key').val()).done(function (employees) {
        $('.employee-list').html(employeeLiTpl(employees));
    });
}

4、测试。

Part 9：创建一个视图类：

是时候把我们的程序结构化一下了。如果一直往app.js的立即函数里给程序添加功能，功能多了后就会难以维护。这部分，我们会创建一个HomeView对象，它封装了创建、渲染Home View的逻辑。

第1步：创建HomeView类：

a、在js目录下创建一个HomeView.js文件，里面的代码如下：

var HomeView = function (adapter, template, listItemTemplate) {

 

}

该构造有三个参数：数据适配器，Home View Template，以及员工列表项Template。

b、在HomeView构造里定义一个Initialize函数。为HomeView定义一个div，用来绑定一些视图相关的事件，在构造内调用Initialize函数。

c、将renderHomeView函数从app.js里移到HomeView构造里。为了视图重用，我们将HTML绑定到div而不是body上。将renderHomeView重命名为render：

this.render = function() {
    this.el.html(template());
    return this;
};

d、将findByName也移到HomeView中：

this.findByName = function() {
    adapter.findByName($('.search-key').val()).done(function(employees) {
        $('.employee-list').html(listItemTemplate(employees));
    });
};

第2步：使用HomeView：

a、在index.html中包含HomeView.js（在app.js引入之前）。

b、在app.js中移除renderHomeView。

c、同理移除findByName。

d、更新适配器初始化逻辑，从而当适配器成功初始化后显示Home View。将adapter,Home View Template,员工列表项template作为参数传给HomeView构造：

adapter.initialize().done(function () {
    $('body').html(new HomeView(adapter, homeTpl, employeeLiTpl).render().el);
});

e、测试。
Part 10：实现本地化的滚动：