我开展此课程的一个目标，就是希望有更多人成为全栈型程序猿，如果你希望能上手开发一个APP，你懂得如何写代码，那就来Cordova新手训练营吧。

Cordova新手训练营

• 适合人员：新手
• 时间：1天
• 人数：5-10人
• 费用：现场付300元、提前付200元（不含午餐）
• 提前付款方式：（有事不能参加当期，可随时联系我退款，也可放着参加后一期公益课）
• 付款后会把你加入微信群，你也加入 Cordova新手公开课 QQ群： 487443714
• 备注：尽量自带笔记本并准备好开发环境，这样可以动手操练
• 组织方：周金根（个人）

第一期

• 日期：2015-10-17
• 时间：9：00-16:00
• 地点：报名后通知
• 主要内容：Cordova+JQueryMobile开发

• 1   APP研发，认识Cordova

  2    前端知识准备（Web、JQueryMobile、Andorid、iOS）

  3    Cordova开发环境搭建

  4    演练一个示例

  5    如何调试

  6    启动页

  7    滚动翻页

  8    自动更新

  9    插件开发

  10  二维码

  11  社交分享

  12  Javascript和本地代码交互 13  打包发布

感兴趣也可以看看以下文章：

Cordova webapp实战开发：（1）为什么选择 Cordova webapp？

Cordova webapp实战开发：（2）认识一下Cordova

Cordova webapp实战开发：（3）后面可能会学到的东西

Cordova webapp实战开发：（6）如何写一个iOS下获取APP版本号的插件？

文档下载地址：http://vdisk.weibo.com/s/DdpOrnCAkbxi

本次练习你能学到的

1. 学习如何动态不发布APP来修复bug
2. 学习如何动态增加功能
3. 学习如何躲开苹果的一些严格审核

如何动态不发布APP来修复bug

做过网站的都知道，修复bug很方便，只要更改一个网站，所有访问此网站的人使用的都是最新版本。其实这对做PC端产品的人也不陌生，大家都做自动升级，也就是客户端会在开启时启动检查服务器端是否有最新版本提供，有的就自动下载更新。这也是Android和iOS原生APP检查更新的传统方式。

对于一些善于思考和优化运营的原生APP开发者来说，他们会想要做增量更新，也就是把服务器的资源下载到手机上，省去了重新安装APP的过程，这个需要一些技术含量的。幸运的是，现在Web App的兴起让大家做APP时也考虑是否能像web站点一样来动态更新呢？不说新增功能，至少能够动态修复一下bug吧？

如果你有这种想法，那么接下来的一些小技巧可能能派上用场。这不需要你有什么技术含量，我把代码一贴出来，你就会比一般人高一些的经验了。

在做 掌中广材 的时候，我人手严重不够，测试力度在当前团队组成来看也一定不足，我就想如何保证快速响应，能够在发现问题后马上更改修复呢？

虽然前几年我用Web APP方式做了敏捷个人的应用，但是基本上很少花心思在上面去想技术的问题，但是做产品不一样，这不只是兴趣，更要承担所应承担的责任。于是开始思考如何能够做到在不重新发布APP的情况下来修复一些bug？

事情要做到完美或极致都是需要付出时间和努力的。我没有太多时间，所以只能想一个比较简单，但又相对有效，能解决某一类问题的解决方案，最终想到的方案也很简单有效，简单的说，就是在Cordova的每个页面调用一个服务器端的脚本，这个脚本可以重写和新增函数，如果发现之前写的函数有bug，那就重写这个函数，然后发布到Web服务器上。这样的话，用户安装的APP不需要重新安装，就会调用更新后的函数体中。

说起来是不是很简单，如果还不明白，不要紧，接着我会贴出一些代码，这样你就会更明白我在说什么了。

上面是掌中广材APP的一个【选择城市】的截图，发布时遗漏了一个bug出去。在Andorid下一切正常，但是发布到iOS上却出现了一个奇怪现象。那就是输入b之后软键盘就自动消失了，以致于不能再输入j。这个问题折腾我两天了，当时很郁闷。试了很多步骤都没有找到问题所在，最后才发现原来问题是公司的统计平台的一个js代码导致，这个就不具体说了，不是本文重点。重点是我发现问题了，并知道如何修改了，现在怎么修复让用户立刻正常使用的问题？

发布Andorid还好说，iOS那可不是你说发布就发布的，审核周期一般两周，出点问题让你审核不通过一个月就只能发一次，如果只因为修改一个bug就发一次，那代价太大了，但如果不发布，让用户用一个月错误的软件，代价就更大，用户流失率一定会剧增。那我是如何做到立刻修复这个问题的呢?

看看代码，在城市输入框中输入事件代码如下图所示，在 scj.js 有一个函数 inputCityKeyWord。这个问题的修复其实就是我把这个代码里关于统计的那一行代码注释掉，也就是不进行统计。

我现在的做法是，在另一个叫做 scjEx.js 中重写了这个函数 inputCityKeyWord，

现在你一定很好奇，我这个scjEx.js 文件和 scj.js 有什么关系？

在scj.js文件最后，我有一行这样的代码

$.getScript("http://【隐去了我工作的地址，这里是你的具体网址】/www/js/app/scjEx.js");

要理解这段代码到意思，需要先了解jQuery.getScript()函数。这个函数用于通过HTTP GET形式的加载JavaScript文件并运行它。可以动态加载JS文件，并在全局作用域下执行文件中的JS代码。这个js代码可以是该函数可以以异步方式加载跨域的JS文件。

理解这个函数之后就应该知道我写上这句，其实就是为了让cordova加载完业务js之后，加载执行一段服务器的js。

接下来的事情就有意思了。

你想想，如果这两个文件都有相同名字的函数，程序会怎么办？不知道答案的可以自己去尝试一下。尝试完了是否也理解了我是如何做到不重新发布APP来修复bug的呢？如果还不明白，再重头看一遍，这个必须看懂，否则以后系列出来更复杂更完善增量更新，那就更不好懂了。（其实增量更新，我还一直没时间去做，或者说连思考还没有开始，我一个人需求、开发、测试、运营都做，结果技术上没有以前那么投入了）

如何增加新功能

看下面两张图，有什么区别？

第二幅图比第一幅图多了一个广告栏，提示下载APP。

使用Web App还有个好处时，你可以发布手机版、网页版（还可通过微信菜单调用）、桌面版，如果非手机版使用时，我们就想在底下加一个推荐下载APP的广告栏。这些并不是在我原有计划之中的功能，但是我不能因为这个功能重新发版，特别是iOS更不可能呢。

现在如果是你，你可以如何做到不发布APP做到这点？

别告诉我你不会啊。如果还不会，那就返回看上一小节。

简单的说，就是在这个页面调用的一个js的服务器端扩展js文件中在$(‘document’).ready(function(){   });中动态生成这个广告栏，并放置到底下就行了。至于如何动态生成页面内容，这个不是本文重点，不懂得可以网上找找如何用JQuery动态创建页面内容

如果这个你自己搞明白了，那么你还可以动态生成一个page，例如这几天我在思考如何做一个活动页面，我想了三种方案，最后还是选择这种方式来实现本次活动

躲开苹果的一些严格审核

在掌中广材的分享功能是使用友盟的社会化分享组件的。我没什么开发经验啊，不懂iOS那么多道道，结果提交APP Store之后，竟然被严厉的拒绝了。理由很简单，当手机没有安装微信、QQ时，会弹出页面使用方式，这样的处理令苹果很生气，以不友好为由拒绝了。

还有一个理由就是说我的APP中有一个【检查更新】，这个苹果是不允许的，因为只能使用它们APP的更新提醒，在APP内不让做这个功能。

但是，我也不是听话的人，苹果不让我这么做，我就要乖乖的听话吗？

我仍旧使用了第一小节提到的方式，在提交苹果审核期间，我在服务器端代码中增加了隐藏分享和检查更新按钮的代码，这样苹果就看不到了。眼不见心不烦，看不到他自然也不会拒绝我了，就这样我被苹果接收了。

接下来的事情你也能想到。那就是一上架之后，我把那些代码一删，iOS上的这些功能又出现在用户面前了。

增量更新要做好其实要狠下功夫的，弄好了就可以更敏捷了，只是真是没时间弄这一块。不过今天说的这些也足够让大家比以往更敏捷一些。最后想说的是，如果大家想真正敏捷，技术是其次，了解一下敏捷个人，学习它背后的价值观和思维，会让你终身受益。

本次练习你能学到的

1. 学习如何获取iOS当前版本号
2. 学习iOS下插件类的编写
3. 学习iOS下插件的配置
4. 学习iOS下插件的调用

主要内容

• APP中【检查更新】显示当前版本号

插件类的编写

在上一篇介绍Andorid插件时我们贴出了很多源码，这里也直接贴出代码，首先是iOS下插件的代码。

我们在Plugins下新建两个文件，一个头文件 CDVGcapp.h，一个实现文件 CDVGcapp.m。（文件名自己取，这是我在项目中的名称）

• CDVGcapp.h

#import <Foundation/Foundation.h>
#import <Cordova/CDVPlugin.h>

@interface CDVGcapp : CDVPlugin
- (void)version:(CDVInvokedUrlCommand*)command;@end

• CDVGcapp.m

#import "CDVGcapp.h"
#import <Cordova/CDVViewController.h>
#import <Cordova/CDVScreenOrientationDelegate.h>

@implementation CDVGcapp

- (void)version:(CDVInvokedUrlCommand*)command
{
    NSString* value0 = [NSString stringWithFormat:@"%@(%@)", [[[NSBundle mainBundle] infoDictionary] valueForKey:@"CFBundleShortVersionString"] ,[[NSBundle mainBundle] objectForInfoDictionaryKey:(NSString*)kCFBundleVersionKey]];

    CDVPluginResult* result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:value0];
    [self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
}

 

Javascript如何得到插件调用后的返回结果？主要通过类似  [self.commandDelegate sendPluginResult:result callbackId:command.callbackId]; 代码返回

CDVPluginResult，失败和成功都可以触发Javascript执行对应的自定义函数

插件的配置

插件写完了，很多人遇到的下一个问题就是怎么配置才能在Javascript中调用呢？我们今天也不解析源码，为什么呢？因为我没看：）不过，我一定要给大家说清楚如何配置，否则就永远调用不了插件。

打开staging/config.xml文件，添加feature，必须匹配类名，因为源码中是通过这些去配对的。上面我们写了更新插件，现在就是要配置一下这个插件类到功能名称，我在配置文件中加入了下文粗体部分内容

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.glodon.gcapp" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <preference name="AllowInlineMediaPlayback" value="false" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="BackupWebStorage" value="cloud" />
    <preference name="DisallowOverscroll" value="false" />
    <preference name="EnableViewportScale" value="false" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="FadeSplashScreenDuration" value=".25" />
    <preference name="KeyboardDisplayRequiresUserAction" value="true" />
    <preference name="MediaPlaybackRequiresUserAction" value="false" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <preference name="SuppressesIncrementalRendering" value="false" />
    <preference name="TopActivityIndicator" value="gray" />
    <preference name="GapBetweenPages" value="0" />
    <preference name="PageLength" value="0" />
    <preference name="PaginationBreakingMode" value="page" />
    <preference name="PaginationMode" value="unpaginated" />
    <preference name="AutoHideSplashScreen" value="false" />

    <name>zgxxj</name>
    <description> 随时随地查找全国最完整最及时的信息价     </description>
    <author email="22626496@qq.com" href="http://www.中国信息价.cn">  周金根    </author>
    <content src="html/scj/scj.html" />
    <access origin="*" />

    <feature name="Device">
        <param name="ios-package" value="CDVDevice" />
    </feature>
    <feature name="NetworkStatus">
        <param name="ios-package" value="CDVConnection" />
    </feature>
    <feature name="SplashScreen">
        <param name="ios-package" value="CDVSplashScreen" />
        <param name="onload" value="true" />
    </feature>
    <feature name="InAppBrowser">
        <param name="ios-package" value="CDVInAppBrowser" />
    </feature>
    <feature name="Gcapp">
        <param name="ios-package" value="CDVGcapp" />
    </feature>
    <feature name="BarcodeScanner">
        <param name="ios-package" value="CDVBarcodeScanner" />
    </feature>
</widget>

代码贴完了，我还是要再多说一下，

• CDVGcapp是插件类名

• Gcapp是 feature 名称，下面大家就知道在哪里会用到了

以上文件就是告诉cordova，我们新增了一个Gcapp功能，这个功能会调用我们的原生插件Java对象，接下来就是Javascript如何能调用到这个类了，最重要的就是这个Gcapp功能名称。

我们接着就要写Javascript代码来调用这个功能了，如何写呢？继续往下看，我在assets/www/plugins/下新增目录并建立了文件gcapp.js，完整路径是 assets/www/plugins/com.gldjc.guangcaiclient/www/gcapp.js，代码如下：

cordova.define('com.gldjc.guangcaiclient.gcapp', function(require, exports, module) {
        var exec = require("cordova/exec");

        function Gcapp() {};

        Gcapp.prototype.version = function (getversion) {
            exec(getversion, null, 'Gcapp', 'version', []);
        };    

        var gcapp = new Gcapp();
        module.exports = gcapp;
});

exec是cordova.js中内部的函数，当插件返回 PluginResult.Status.OK 时会执行exec的成功回调函数，如果插件返回的是错误，则会执行exec的错误回调函数。这里我们解释一下

exec(getversion, null, 'Gcapp', 'version', []);

其中Gcapp就是我们在上一步骤加的feature名称，大小写匹配着写，通过这个名称，cordova才能找到调用那个java插件类，然后通过version知道调用这个插件类的哪个方法，后面[]中则是参数。因为我这个插件不需要参数，所以为空。

Javascript插件类也配对成功了，那如何调用呢？你可以直接在html中包括这个js，不过我们一般会再配置一个js，那就是assets/www/cordova_plugins.js，这样就不用对每个插件类都去写一遍了，cordova会遍历你的配置去加载它们。

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/org.apache.cordova.device/www/device.js",
        "id": "org.apache.cordova.device.device",
        "clobbers": [
            "device"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.networkinformation/www/network.js",
        "id": "org.apache.cordova.networkinformation.network",
        "clobbers": [
            "navigator.connection",
            "navigator.network.connection"
        ]
    },
     {
        "file": "plugins/org.apache.cordova.networkinformation/www/Connection.js",
        "id": "org.apache.cordova.networkinformation.Connection",
        "clobbers": [
            "Connection"
        ]
    },
     {
        "file": "plugins/org.apache.cordova.splashscreen/www/splashscreen.js",
        "id": "org.apache.cordova.splashscreen",
        "clobbers": [
            "navigator.splashscreen"
        ]
    },
        {
        "file" : "plugins/org.apache.cordova.camera/www/CameraConstants.js",
        "id" : "org.apache.cordova.camera.Camera",
        "clobbers" : [ "Camera" ]
    },
    {
        "file" : "plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js",
        "id" : "org.apache.cordova.camera.CameraPopoverOptions",
        "clobbers" : [ "CameraPopoverOptions" ]
    },
    {
        "file" : "plugins/org.apache.cordova.camera/www/Camera.js",
        "id" : "org.apache.cordova.camera.camera",
        "clobbers" : [ "navigator.camera" ]
    },
    {
        "file" : "plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js",
        "id" : "org.apache.cordova.camera.CameraPopoverHandle",
        "clobbers" : [ "CameraPopoverHandle" ]
    },
    {
        "file" : "plugins/com.phonegap.plugins.barcodescanner/www/barcodescanner.js",
        "id" : "com.phonegap.plugins.barcodescanner.barcodescanner",
        "clobbers" : [ "barcodescanner" ]
    },
    {
        "file": "plugins/com.gldjc.guangcaiclient/www/gcapp.js",
        "id": "com.gldjc.guangcaiclient.gcapp",
        "clobbers": [
            "gcapp"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "org.apache.cordova.device": "0.2.13"
}
// BOTTOM OF METADATA
});

file表示我们去哪里找脚本插件定义js，id是之前我们在gcapp.js中开头cordova.define中写的标识，cordova通过这个标志去找到我们的Javascript插件定义，而clobbers则是我们在前端通过什么对象名来调用这个插件。这里我写的是gcapp，则后面调用则只需要写成gcapp.checkUpdate 即可

插件的调用

万事俱备，只欠东风，你们可以开始看到结果了，如果从头到这里一步成功，那应该还是蛮兴奋的事情吧。

具体前端页面如何设计我就不说了，我的页面效果就如本文最前面的图片，在js中我是这些调用version的

$(document).on("PG_pageinit", function(event) {
    gcapp.version(function(version){
            $("#version").html(version);
    });
});

 

周五的时候大家就给我上一篇点了40多个赞，并有20条回复，我又要开始写下一篇了。本来决定下周一开始写，不过看群里大家聊得蛮积极的，被这种学习热情所打动，我就把这个系列写的勤快一些吧。

那这一篇要写些什么呢？

如果对想学的东西在一开始有一个大概的了解，我想会增加对学习的信心和热情，所以，今天我要说的是后面我们可能会学到的东西。为什么说可能呢？因为我也在用Cordova做产品，后续可能会使用一些现在还没有使用到的东西，所以后续可能讲的会比我现在说的多。

今天的这篇博客没有作业，毕竟是周末，轻松一点也算是对自己好的一种表现，劳逸结合才能让自己更加高效。那我就开始罗列一下你可能会学到的东西吧。大家也可以补充你们想学的东西。如果正好是我也会的，我可以考虑是否加入以及如何加进去。

开发工具和开发环境

我们只讲Android和iOS下的App，所以也只要讲对这两个平台下的开发工具的环境搭建

• 开发Android我用的是Eclipse，Windows下进行
• 开发iOS用的是XCode，Mac OS下进行
• 服务器端为了简单，实际项目是JAVA，为了简单起见，我们就是用PHP语言来说，使用的工具仍旧是Eclipse，Windows下进行

前后端知识普及

• Javascript简要知识
• JQueryMobile简要知识
• PHP
• Android原生
• iOS原生

Cordova项目

• 如何新建项目
• Cordova项目文件介绍
• 如何使用Cordova自带插件
• 如何使用自己的插件
• （不会涉及源码解析）

App功能点

• JQuery Mobile页面编写
  
• 趋势图
  
• 自动完成
  
• 定位
  
• Splash Screen
  
• 二维码和社交分享
  
• 自动更新
  
• 应用体验，自动登录
  
• 录音
• 传文件
• 拍照
  
• 推送

APP发布

• Android市场
• AppStore

运营

也许还会讲一些运营方面的内容，

PhoneGap App开发 348192525   

如何封装一个浏览器成webapp？

在群里，有个朋友问了一个问题“如何封装一个浏览器成webapp？”

每个手机就像电脑一样，都带着自己的操作系统。如果你愿意，你可以从头写一个浏览器，把浏览地址隐藏了，这就像你的一个app了，对吧。当然，我们自己写浏览器，这也太难了，所以我们肯定不是这么做的。其实，我们只是基于各种手机上Web浏览器内核去做手脚，而Js是Web开发的最佳语言，至于如何封装成一个Web app？说实话，我也没有真正去探究过是如何去做的，因为我对Andorid和iOS原生开发也不熟悉，最主要是现在也没有时间去研究这些了，但是我告诉你的是，通过一些移动开发框架，你只需要专注于写你的前端代码，然后通过一个开发框架的黑盒的操作，编译后就成了一个可以安装的App了。是否很神奇呢：）

不用管它有多神奇了，看看下面这张图，先从架构上总体了解到这个层次就行了。最上面是H5，中间是Web前端框架，以及移动开发框架的API。如果你需要调用手机原生的功能，例如摄像头、录音等，这些工作会由移动开发框架去做，你只需要了解这种框架是如何工作的即可。学会如何使用摄像头，就知道如何使用录音了，举一反三。

移动开发框架

在准备使用Web App重新编写之前的原生APP前，工信部的人有点怀疑，因为大家都听说HTML5的移动应用太慢，体验太差，这万一做完不行怎么办？我解释了一下，发现没用，所以索性自己就动工了。我想告诉大家的是，只要你不是对性能要求特别高，例如画图之类的App，其实很多应用都可以使用HTML5来做的。昨天我还在一个材料计算器群里和群主说，可以使用Web App方式来做，免得群里的人都在等着你的iOS版本出来。群主说他尝试过，但是每次计算要等好几秒，还给我举例说见过12306订火车票的App吗？

我想告诉大家的就是，这里存在很多偏见，因为以前手机性能差，H5也没有这么普及，所以体验不好、效率差强人意，但是现在HTML5越来越好，移动硬件性能也越来越强，很多应用都已悄然上演了混合式开发的方式。你看看支付宝、淘宝，其实手机App里面都有Web的影子，你发现了吗？

因为移动设备的普及，App也越来越多，早就了高价收购Andorid和iOS开发者的现象，而现在因为Web App的兴起，又造价了Web前端的高价，虽不是主要原因，但肯定是其中一个原因，所以学习移动开发会提升你的身价，当然前提是你真的一个人能搞定。

以前我们做桌面或Web应用一样，语言和框架都有很多可以选择，那做移动开发框架呢？依然我们有很多选择，只是我真的很长时间或者没有太多时间专注学习每一个，所以下面只能简单介绍一下了。

PhoneGap

PhoneGap是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化，提供了一系列丰富的API供开发者调用，只要你会HTML和Javascript或 者Java语言，就可以利用PhoneGap提供的API去调用各种功能，制作出在各种手机平台(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone)上运行的应用。目前phonegap获得Apple,IBM,NOKIA,palm等众多公司的支持。简单来说使用PhoneGap就是使用HTML,JavaScript和CSS来开发程序，最终通过PhoneGap可以产生对应版本的native 程序。

IONIC

IONIC 是目前最有潜力的一款HTML5手机应用开发框架，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就 。

IONIC的开发团队将尽快开发出一种通过IONIC creator提供开发者快速创建IONIC应用的方式。我们将很快就会看到一个支持拖拉功能的可视化开发工具，几分钟内开发一个app将不再只是吹xx。

这里要说一AngularJS，这个框架我在前两年看过，我喜欢这种MVVM框架的东东，当时只是简单学习了一下，如果有时间我可能会把现在急于JQueryMobile和没有框架的Js改为急于IONIC来编写。

……

除了以上一个我实际做过，一个我想学的之外，还有很多Web App开发框架，国内现在网上也能收到好几个，不过我都没怎么用过，这里也就不做介绍了，总之这一小段就是告诉，开发框架有很多，基于我以前自己也做框架（OpenExpressApp）的经验，任何东西都不可能完美，所以我们不要太苛求了，如果你喜欢这个框架，那就去学习，学习之后如果觉得可行，那就找个小项目试试，如果试后觉得不错，那就多花些功夫做好，仅此而已。 

大家看此系列blog就知道，我后续所有的博文都是围绕第一个来介绍，所以如果你对第一个不感兴趣，那么可能这个系列就不适合你了，当然，你以后也可以择取系列中一些单独篇章来学习你所需要的。

cordova与phonegap有什么关系？

phoengap

• 官方网址：http://phonegap.com

如果能了解一个框架的兴起还是一件比较有趣的事。08年一次ios开发者大会上来自Nitobi软件公司的几个家伙突发奇想，提出一个想法，想做一个工具来弥补web和ios开发之间的不足，并提出 Bridging the gap between the web and the iPhone sdk。一开始的目标并不是很大，但是做到了现在的written once,run everywhere。我们很多人做事其实也应该这样，一开始不要把目标弄得那么大，跳一步能够上就好，敏捷个人的形成也是这样，一开始只是分享而已，随着分享越多才成为了一个帮助有成长意识的人去认识自我管理自我的成长体系。如果一下子目标太大，你会因为难以实现而给自己找理由，这样到头来你什么都没有。

09年他们推出android adk和blackberry sdk，成了移动开发者的福音，就连ibm也加入进来。phonegap继续成长，在2011年10月，整个Nitobi团队被adobe收购，PhoneGap的项目主管Brian LeRoux指出开源PhoneGap的决定在Adobe收购Nitobi之前就做出了，由于Adobe现在拥有PhoneGap商标，他们不得不换个名字，第一个选中的名字是Callback，毫无创意，因此再改一次，产品现在叫Apache Cordova。随后adobe把 phonegap送给了apache软件基金会，接着apache把phonegap改名为cordova，cordova是Nitobi团队当时坐落的街道名称，用此名来纪念Nitobi团队的贡献。

所以Apache Cordova是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎，你看着两个官网风格多差不多。

Cordova

• 官方网址：http://cordova.apache.org/

我们后续的所有文章和代码都是基于Cordova的，如果有谁知道Phonegap和Cordova的具体差异在哪里，可以回复补充一下。

谁在使用PhoneGap

诚实的说，上面的都是在官网看到放上去的，至于真的用的怎么样就不知道了。这样说起来感觉我很不负责似的，所以在本系列第一盘中我就告诉了大家，我自己做的敏捷个人App和掌中广材App就是用Cordova做的，而且都已经在各大Andorid市场和iOS AppStore上架了。

支持平台

我相信很多人选择这种方式，而不是原生，很看重的一点就是跨平台，也就是一次代码，多个平台复用。没错，我现在主要在Andorid上开发，然后把www目录下的所有文件都拷贝到iOS目录下，然后就OK了。至于你说，wp系列的复用起来如何呢？很抱歉，我没有wp的手机，没有试过。之所以还没有试过，是因为这类客户群数量还比较少，所以我们也没有投入精力去做这个部分，这不是技术问题，而是产品对技术的定位方面决定的。

但是，从官网我们可以看到，它对平台的支持是很不错的，我也相信它们能做到iOS和Andorid复用，就能做到其他平台复用，因为从架构原理来看是一样的。

预习作业

真是晕？竟然还有预习作业，弄得我就像老师一样。呵呵，不过还真有很多人叫我周老师，可能是因为我把敏捷个人的博客当做练习变成习惯了，所以在本篇结尾时，希望大家在轻松读完本篇之后，做一下几个练习，遇到问题呢可以回复，这样我在写下一篇的时候呢就可以帮你解决问题了，这既锻炼你的学习能力，也能够更及时更好的解决你的问题。

1. 去官网下载Cordova框架（提醒，不是Phonegap）
2. 自己建立一个Andorid项目，并在手机上调试安装成功
3. 在iOS上也调试安装一下。（如果没有iOS环境，那就略过吧）

PhoneGap App开发 348192525   

时隔几年，我在 《掌中广材产品经理日志（1）- 妈的，不想再呆在广联达了》写到，今年初我到了工信部负责一款之前已经做过一年多的APP，这款产品叫做掌中广材，大家可以各大市场下载到。

本系列初衷

现在Web App越来越流行，但是很多人却不知如何开始，自己学习使用Cordova开发，却遇到各种问题不知如何解决。本系列就是帮助大家从0开始学习，如何成为一个全栈型的Web App开发人员。也希望有更多优秀的开发人员出现，而不是像现在，Web前端因人多而泛滥且难招而贵，但是却没有多少优秀的开发者。

开发人员构成

之前的掌中广材使用的是原生开发方式，在我接手项目的时候，开发人员有3个，一个Android、一个iOS、一个后台Java，在我的产品经理日志系列文章中也都对团队进行详细介绍，这里就不再重复。

接手任何一个新项目其实还不难，接手一个已有项目却显得更难一些，因为很多人都不愿改变，也有很多人会拿着以前好的与你现在不足的比，不过幸好我对这些都不感冒，我就是我，按照自己的开放产品开发方法，一步一步重头开始。

这个项目组的开发效率并不高，遗留的一些老问题一直未能解决，后台经常不能与大家一起配合可能是一个主要原因，这与我要的快速开发产生了一些差距。其实做一个产品，可能很多技术都可以，而最后决定采用哪种技术，是由做产品的人来决定，你感觉能越有信心把控哪种技术，可能就会采用这种技术。

我要求快速开发，我要求将来还能通过其他方式的渠道来使用掌中广材，所以最后我选择了Web App的方式来开发掌中广材。从技术上来说，掌中广材不需要高性能和特别高的原生体验，所以Web App完全可以满足。当然，在我决定做之前，工信部是没有人使用过H5来开发APP的，很多人都很怀疑，我能理解，但是我不能耽误我的时间，所以我不做太多解释，而是自己开始做，等做完了也就不用解释了，因为即使我现在再解释，对他们来说都是没用的，反而会耗费我的精力。

因为采用Web App方式，所以Android和iOS开发人员并不是主要人员，之前的这两位程序员也离职。而后台JAVA工作方式与团队不吻合，也被我辞退。在没有开发人员的日子，我重新开始做起了码农，想想一别那么久没有写代码，重新敲起代码，依然能感受到自己对技术的那份热情依旧存在。

所以，有一个多月的时间，我即是产品经理，也是架构师、程序员，还是运营推广人员。即使到现在，我们也就还有一个后台和一个产品助理，我依旧兼做着多个角色的工作，但是忙而不乱。

采用的技术

掌中广材App看起来不复杂，就几个页面，但是说实话，现在做的代码有点点乱了，有时间我要把单元测试做起来，再换成面向对象的一些方式来更好地处理维护性，这算是敏捷中说的技术债务吧。

下面我说一下这个产品的一些技术说明，以便大家在后续学习中有所总体了解，后面我会再慢慢与大家一步一步的介绍，如何从0到1的做一个Web App的全栈型开发人员。

• 移动开发框架：Cordova
• Web页面框架：JQueryMobile
• 前端脚本库：JQuery、iscroll、progress等
• 后台语言：JAVA

看看产品长什么样吧

学习之前看看使用Cordova+JQueryMobile开发出来的App长什么样吧，看完之后你觉得还比较适合自己的胃口，那就继续关注这个系列来学习吧。

另外，如果你身边有与建筑、造价、采购相关的人员，可以向他们推荐这款APP啊，掌中广材，随时随地快速的找到各地信息价和靠谱市场价

如果想下载体验一下，那就扫描上图带有二维码的图吧，实际跑一跑，看看运行效果，然后决定是否继续学习这个。

开发感受

为什么选择 Cordova webapp？不是我觉得Web App一定就比原生开发好。如果我有足够的原生开发人员、我有足够的时间，我选择原生技术也许会更好。正如本文开篇所说，任何选择只有考虑了当前情形之下做出的选择才是有效的，所以为什么选择Cordova webapp呢？那是因为在时间、人力、未来产品形态上，这种形式我更觉得有把控力。

从总体开发进度来说，开发Web App，我觉得至少会比原生App开发要快比较多，而且通过Web方式开发可以在Android和iOS，以及微信等Web方式重用，所以你要的人力资源也会少，当然，前提是你需要一个愿意成为全栈型开发人员的人。而这也是本系列的一个初衷，我希望现在的开发人员不要总是被精专一词所迷惑，其实不是做技术难度特别大的，你成为通才有助于你锻炼自己的学习能力，还能加强你的核心竞争力，成为全栈型开发人员不是为了别人，而是为了自己。

PhoneGap App开发 348192525