当前时间:Monday 2017年10月23日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> Android开发,phonegap开发 >> 正文

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、测试。

作者:夜阑小雨
原文链接:Phonegap3.4 教程
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

评论信息

0 条评论 发表评论

发布评论

您必须登录才能发表评论。

网站客户端下载