Phonegap3.4 教程

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

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

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

咱们将会学到：

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

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

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

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

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

准备工做：

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

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

Part 1：建立一个Cordova 项目：

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

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

npm install -g cordova

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

四、建立一个名为“workshop的项目：

cordova create workshop com.yourname.workshop Workshop

五、转到项目目录：

cd workshop

六、添加Android平台支持：

cordova platforms add android

七、添加控件（确保如今仍然在workshop目录下）：

cordova plugin add org.apache.cordova.device

cordova plugin add org.apache.cordova.console

八、如今能够看看workshop目录下的项目结构了。

Part 2：构造一个Cordova项目：

确保电脑上安装了Android SDK。（关于环境搭建，能够参考个人另外一篇文章）

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

cordova run android

为了在模拟器上整，能够输入：

cordova emulate android

Part 3：准备Workshop文件：

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

二、解压。

三、删除工程（经过上面的步骤建立出来的项目）workshop/www目录下除了config.xml之外的其余全部文件。（tmd，我建立的项目的workshop/www下里根本就没什么config.xml文件，这个文件明明在上级workshop下边，不知道什么缘由）

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

五、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步：用几中不一样的持久化机制测试程序：

默认状况下，程序支持提内存数据存储，为了变动程序本地的数据存储，须要如下几步：

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

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

三、测试程序。

Part 5：使用本地Notification：

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

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

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

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

这会告诉Cordova CLI在构建项目时注入一个特定版本的cordova.js。就是说，cordova.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);

View Code

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

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

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

 

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

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

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

二、在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);
}

View Code

三、更新data adapter的初始化逻辑：adapter初始化后，调用renderHomeView函数：

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

View Code

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

六、测试程序。

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

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

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

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

二、建立一个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>

View Code

三、建立一个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>

View Code

四、把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">

View Code

更新app.js的当即函数：

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

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

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

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

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

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

View Code

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

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

View Code

四、测试。

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;
};

View Code

d、将findByName也移到HomeView中：

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

View Code

第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);
});

View Code

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