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：實現本地化的滾動：