STAY HUNGRY , STAY FOOLISH.

求知若饥，虚心若愚。

| Cordova        浏览:

创建HelloWorld项目

创建HelloWorld项目

前面讲了Cordova开发环境的搭建，这节我们就来创建我们的第一个Cordova HelloWorld项目。

这一节主要内容包括：
创建Android HelloWorld项目

  • 创建HelloWorld项目
  • 将HelloWorld项目导入到Eclipse开发环境
  • 利用Eclipse将HelloWorld部署到模拟器上面
  • 利用Chrome调试真机上面的HelloWorld App
  • 利用Eclipse签名打包生成apk

创建IOS HelloWorld项目

  • 创建Helloworld项目
  • 将HelloWorld项目导入到Xcode开发环境
  • 利用Xcode将HelloWorld部署到模拟器上面
  • 利用Safari调试真机上面的HelloWorld App
  • 利用Xcode签名打包生成ipa

创建HelloWorld项目

打开命令行，运行：

1
sudo cordova create hello com.example.hello HelloWorld -d

“hello”：指定项目创建的目录；
“com.example.hello”:为项目指定一个ID（域名倒序方式）；
“HelloWorld”：应用程序显示名称，这里不能使用中文；
“-d”：是为了显示更多的项目建立过程的信息。

添加平台

注意：接下来的命令运行都必须在hello这个文件夹下面操作！
进入hello目录，运行：

1
2
3
4
5
sudo cordova platform add android //android平台
sudo cordova platform add ios //ios平台
sudo cordova platform add browser //浏览器平台

sudo cordova platform ls //显示项目已经添加的平台

HelloWorld项目顶级重要目录文件解说

进入hello目录，以下列出了顶级目录的文件（夹）：

1
2
3
4
5
6
7
8
9
10
//顶级应用配置文件，决定了应用许多属性
config.xml
//扩展Cordova CLI框架，在应用的build生命周期中插入自定义的build构建内容
hooks/
//平台特定代码目录，每次添加一个平台就会新建一个目录，如android、ios、browser
platforms/
//安装的插件js源码目录
plugins/
//这里存放的就是你要用的JS、HTML、CSS等文件代码，其中index.html在App启动时是第一个被加载的文件
www/

添加常用的插件
运行：

1
2
3
4
5
6
7
sudo cordova plugin add cordova-plugin-device //添加设备插件
sudo cordova plugin add cordova-plugin-dialogs //添加对话框插件
sudo cordova plugin add cordova-plugin-network-information //添加网络插件

sudo cordova plugin ls //显示当前项目已经添加的插件

sudo cordova prepare -d //将项目置为准备编译状态

上面的命令做了一个重要的操作就是将hell/www/目录下的内容分别拷贝到了platforms/android/assets/www/、platforms/ios/www/、platforms/browser/www/目录下（覆盖操作），准备编译。
注意：
a.当你每次使用cordova plugin添加一个插件时，都需要运行一遍cordova prepare命令；
b.运行任何cordova命令之前，你在platforms/android/assets/www/、platforms/ios/www/、platforms/browser/www/下面编辑的代码一定要记得拷回顶级目录www下面。

OK！那么到了这里我们是继续用cordova命令来开发呢，还是使用SDK集成环境来开发（Eclipse、Xcode、Chrome/Safari）？这里我们采用后者！你选择在Eclipse、在Xcode、Chrome/Safari任一一个开发就行，看你个人习惯了。

1.使用Eclipse开发Cordova App

1.导入HelloWorld项目
打开Eclipse，点击File下面的Import，进入后选择Android=>Existing Android Code into Workspace，点Finish完成；
cordova

2.连接Android设备到电脑或打开Android模拟器，运行；
cordova

3.了解HelloWorld代码
Cordova启动完成后首先会加载platforms/android/assets/www/index.html（可以在config.xml文件中指定加载文件名称）文件。
精简版index.html如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <!-- 加载cordova.js -->
        <script type="text/javascript" src="cordova.js"></script>
        <!-- 加载helloworld项目js业务文件 -->
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

精简版index.js如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var app = {
    // App初始化函数：绑定事件。
    initialize: function() {
        this.bindEvents();
    },
    /**
     * 绑定Cordova丢出来的硬件相关事件。
     * 常用的事件包括：
     * 'deviceready' //设备准备好事件，只有这个事件发生时，你才能操作其他硬件设备API，如：摄像头API等。
     * 'offline'     //网络断线事件
     * 'online'      //网络连线事件
     */
    bindEvents: function() {
        //设备deviceready事件处理函数
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    //deviceready事件处理函数 ，这个函数才可以安全调用其他各种设备API
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    //接受到事件后更新DOM及其他业务代码
    receivedEvent: function(id) {
        
    }
};

app.initialize();

4.利用Chrome远程调试真机上面的App
打开Chrome浏览器，输入chrome://inspect，点击inspect即可与Andorid同步，想出现画面前提是要翻墙，得到如下的输出：
cordova

利用Eclipse签名打包生成apk

注意：打包之前先把工程clean一把，否则可能出现要么打包过程出错，要么打包出来的应用不能用等情况。
步骤一：
cordova

点完Next，进入步骤二：
cordova

步骤三：
cordova
最后点击完成，按照上述步骤打包完成，即可直接下载到手机安装。

2.使用Xcode开发Cordova App

1.导入HelloWorld项目
找到platforms/ios目录下的HelloCordova.xcodeproj，双击打开Xcode后完成导入；
cordova

下面是刚刚打开的项目目录结构（注意红字提醒）：
cordova

2.连接IOS设备到电脑或打开IOS模拟器，运行；

3.利用Safari远程调试IPhone上面的App
步骤一：打开开启IPhone/IPad上的Safari的远程调试功能，”通过 设置 > Safari > 高级”开启Web检查器：
cordova

步骤二：打开Safari，按照下图操作，调出调试窗口：
cordova

调出的调试窗口如下：
cordova
OK!这个调试很方便吧，修改的JS、HTML、CSS都可以马上反应到手机上面！

利用Xcode签名打包生成ipa

在苹果商店发布App上是比较麻烦的，必须要有发布证书才可以发布App，否则无法发布你的App到App Store上。
苹果开发者账号分为个人(individual ¥99)，公司(company $99) ，企业(enterprise $299)三种类型。
步骤一：申请苹果开发者账号；
步骤二：配置证书；
步骤三：调试源码；
步骤四：打包发布 APP 到 App Store
由于该节不是一两句话就能讲明白的，请参考**《手动发布iOS应用用户指南》**。

补充问题：

problem

解决方案：添加一个AppleWWDRCA.cer （也许在删除钥匙串的时候误删了什么～），下载请点击：AppleWWDRCA.cer。