Mac笔记( 二) Mac OS X 10.10 安装与配置PhoneGap

Mac OS X 10.9.4 已经升级到了Mac OS X 10.10(Yosemite)，本次解决的问题是PhoneGap的安装以及在android和iOS平台的搭建（本帖原创，转载请注明出处。）

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系 人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用。

参阅文章： http://www.cnblogs.com/JustRun1983/p/3819433.html 和 http://www.cnblogs.com/willian/p/3516613.html  

 

PhoneGap Bridge 和 PhoneGap系统架构图

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

我是分割线

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

一、安装Node.js

官网下载安装版：http://www.nodejs.org/download/

安装完成信息提示：

 

检测Node.js环境：

Darren-2:~ Darren$ node -v

v0.10.33

二、安装PhoneGap

根据官网文档指示：http://phonegap.com/install/

$ sudo npm install -g phonegap

安装过程：

Darren-2:~ Darren$ sudo npm install -g phonegap

Password:

npmWARNdeprecated deflate-crc32-stream@0.1.2: module has been merged into crc32-stream

> ws@0.4.31 install /usr/local/lib/node_modules/phonegap/node_modules/connect-phonegap/node_modules/socket.io/node_modules/engine.io/node_modules/ws

> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o

  SOLINK_MODULE(target) Release/bufferutil.node

  SOLINK_MODULE(target) Release/bufferutil.node: Finished

  CXX(target) Release/obj.target/validation/src/validation.o

  SOLINK_MODULE(target) Release/validation.node

  SOLINK_MODULE(target) Release/validation.node: Finished

> ws@0.4.31 install /usr/local/lib/node_modules/phonegap/node_modules/connect-phonegap/node_modules/socket.io/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws

> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o

  SOLINK_MODULE(target) Release/bufferutil.node

  SOLINK_MODULE(target) Release/bufferutil.node: Finished

  CXX(target) Release/obj.target/validation/src/validation.o

  SOLINK_MODULE(target) Release/validation.node

  SOLINK_MODULE(target) Release/validation.node: Finished

/usr/local/bin/phonegap -> /usr/local/lib/node_modules/phonegap/bin/phonegap.js

phonegap@3.6.3-0.22.4 /usr/local/lib/node_modules/phonegap

├── pluralize@0.0.4

├── colors@0.6.0-1

├── semver@1.1.0

├── minimist@0.1.0

├── qrcode-terminal@0.9.4

├── shelljs@0.1.4

├── prompt@0.2.11 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.5, utile@0.2.1, winston@0.6.2)

├── phonegap-build@0.9.0 (qrcode-terminal@0.8.0, shelljs@0.0.9, optimist@0.3.7, phonegap-build-api@0.3.3)

├── cordova@3.6.3-0.2.13 (q@0.9.7, underscore@1.4.4, nopt@2.2.1, cordova-lib@0.21.13)

└── connect-phonegap@0.13.0 (home-dir@0.1.2, connect-inject@0.3.2, ip@0.3.1, mkpath@0.1.0, ncp@0.6.0, findit@2.0.0, shelljs@0.2.6, request-progress@0.3.1, localtunnel@1.3.0, node-static@0.7.0, useragent@2.0.8, tar@0.1.19, gaze@0.4.3, request@2.33.0, archiver@0.10.1, connect@2.12.0, socket.io@1.0.6)

完成安装并验证：

Darren-2:~ Darren$ phonegap

Usage: phonegap [options] [commands]

Description:

  PhoneGap command-line tool.

Commands:

  help [command]       output usage information

  create <path>        create a phonegap project

  build <platforms>    build the project for a specific platform

  install <platforms>  install the project on for a specific platform

  run <platforms>      build and install the project for a specific platform

  platform [command]   update a platform version

  plugin [command]     add, remove, and list plugins

  info                 display information about the project

  serve                serve a phonegap project

  version              output version number

Additional Commands:

  local [command]      development on local system

  remote [command]     development in cloud with phonegap/build

  prepare <platforms>  copies www/ into platform project before compiling

  compile <platforms>  compiles platform project without preparing it

  emulate <platforms>  runs the project with the flag --emulator

  cordova              execute of any cordova command

Experimental Commands:

  Requires the --experimental flag to use the command

  save                 save installed platforms and plugins

  restore              restores saved platforms and plugins

Options:

  -d, --verbose        allow verbose output

  -v, --version        output version number

  -h, --help           output usage information

Examples:

  $ phonegap help create

  $ phonegap create path/to/my-app

  $ cd my-app/

  $ phonegap run ios

三、配置PhoneGap及平台开发环境

3.1 安装Cordova：

解释：现在PhoneGap的代码已经贡献给了Apache软件基金会（ASF），并且改名为 Apache Cordova。这个名字来源于温哥华的科尔多瓦街（Cordova Street），它是创建PhoneGap时Nitobi公司的所在地。

sudo npm install -g cordova

安装成功：

Darren-2:lib Darren$ sudo npm install -g cordova

Password:

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

cordova@4.1.2 /usr/local/lib/node_modules/cordova

├── underscore@1.7.0

├── q@1.0.1

├── nopt@3.0.1 (abbrev@1.0.5)

└── cordova-lib@4.1.2 (osenv@0.1.0, properties-parser@0.2.3, bplist-parser@0.0.6, mime@1.2.11, semver@2.0.11, unorm@1.3.3, shelljs@0.3.0, dep-graph@1.1.0, rc@0.5.2, elementtree@0.1.5, xcode@0.6.7, npmconf@0.1.16, glob@4.0.6, tar@1.0.2, request@2.47.0, d8@0.4.4, npm@1.3.4, plist@1.1.0, cordova-js@3.7.2)

3.2 创建PhoneGap项目：

cordova create hello com.example.hello HelloWorld

Darren-2:lib Darren$ cordova create hello com.example.hello HelloWorld

Creating a new cordova project with name "HelloWorld" and id "com.example.hello" at location "/usr/local/lib/hello"

Downloading cordova library for www...

Download complete

3.3.1 iOS 配置

（1）添加iOS平台（进入/usr/local/lib/hello 该目录下！）

cordova platform add ios

Darren-2:hello Darren$ cordova platform add ios

npmhttpGET https://registry.npmjs.org/cordova-ios/3.7.0

npmhttp200 https://registry.npmjs.org/cordova-ios/3.7.0

npmhttpGET https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.7.0.tgz

npmhttp200 https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.7.0.tgz

Creating ios project...

添加完成，进入目录下查看文件结构：

Darren-2:platforms Darren$ ls /usr/local/lib/hello/platforms

ios

（2）构建iOS平台

cordova build ios

构建过程：最后会出现“SUCCEED”提示

Darren-2:platforms Darren$ cordova build ios

Running command: /usr/local/lib/hello/platforms/ios/cordova/build 

Build settings from command line:

    ARCHS = i386

    CONFIGURATION_BUILD_DIR = /usr/local/lib/hello/platforms/ios/build/emulator

    SDKROOT = iphonesimulator8.1

    SHARED_PRECOMPS_DIR = /usr/local/lib/hello/platforms/ios/build/sharedpch

    VALID_ARCHS = i386

=== BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===

Check dependencies

Write auxiliary files

/bin/mkdir -p /usr/local/lib/hello/platforms/ios/CordovaLib/build/CordovaLib.build/Debug-iphonesimulator/CordovaLib.build

write-file /usr/local/lib/hello/platforms/ios/CordovaLib/build/CordovaLib.build/Debug-iphonesimulator/CordovaLib.build/Cordova-all-non-framework-target-headers.hmap

write-file /usr/local/lib/hello/platforms/ios/CordovaLib/build/CordovaLib.build/Debug-iphonesimulator/CordovaLib.build/Cordova-project-headers.hmap

……

……

……

构建成功查看目录变化：

Darren-2:ios Darren$ ls /usr/local/lib/hello/platforms/ios

CordovaLib HelloWorld.xcodeproj cordova www

HelloWorld build platform_www

从finder进入（Go To Folder : /usr/local/lib/hello/platforms/ios）下，双击打开“HelloWorld.xcodeproj”文件即可运行。

但是从终端运行出现问题：

phonegap run ios

出现如下错误：（iOS部署未发现？－－该问题未解决，留待）

Darren-2:ios Darren$ phonegap run ios

[phonegap] executing 'cordova run ios'...

Running command: /usr/local/lib/hello/platforms/ios/cordova/run 

Error: ios-deploy was not found. Please download, build and install version 1.2.0 or greater from https://github.com/phonegap/ios-deploy into your path. Or 'npm install -g ios-deploy' using node.js: http://nodejs.org/

Error: /usr/local/lib/hello/platforms/ios/cordova/run: Command failed with exit code 1

    at ChildProcess.whenDone (/usr/local/lib/node_modules/phonegap/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)

    at ChildProcess.emit (events.js:98:17)

    at maybeClose (child_process.js:756:16)

    at Process.ChildProcess._handle.onexit (child_process.js:823:5)

3.3.2 Android 配置

（1）添加android平台（进入/usr/local/lib/hello 该目录下！）：

cordova platform add android

结果出现错误（原因是android的全局变量没有添加到path中）

Darren-2:hello Darren$ cordova platform add android

npmhttpGET https://registry.npmjs.org/cordova-android/3.6.4

npmhttp200 https://registry.npmjs.org/cordova-android/3.6.4

npmhttpGET https://registry.npmjs.org/cordova-android/-/cordova-android-3.6.4.tgz

npmhttp200 https://registry.npmjs.org/cordova-android/-/cordova-android-3.6.4.tgz

Creating android project...

/Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/node_modules/q/q.js:126

                    throw e;

                          ^

Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.

    at /Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/lib/check_reqs.js:159:19

    at _fulfilled (/Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/node_modules/q/q.js:798:54)

    at self.promiseDispatch.done (/Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/node_modules/q/q.js:827:30)

    at Promise.promise.promiseDispatch (/Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/node_modules/q/q.js:760:13)

    at /Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/node_modules/q/q.js:821:14

    at flush (/Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/node_modules/q/q.js:108:17)

    at process._tickCallback (node.js:419:13)

    at Function.Module.runMain (module.js:499:11)

    at startup (node.js:119:16)

    at node.js:906:3

Error: /Users/Darren/.cordova/lib/npm_cache/cordova-android/3.6.4/package/bin/create: Command failed with exit code 8

    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)

    at ChildProcess.emit (events.js:98:17)

    at maybeClose (child_process.js:756:16)

    at Process.ChildProcess._handle.onexit (child_process.js:823:5)

（2）添加android目录到全局变量中：(create bash_profile if not exist when run on Mac OS X)

A.创建并以TextEdit的方式打开 ~/.bash_profile 文件

touch ~/.bash_profile;

open -t ~/.bash_profile

B.新增环境变量

export PATH=/Users/Darren/DevTools/adt-bundle-mac-x86_64-20140702/sdk/platform-tools:$PATH

export PATH=/Users/Darren/DevTools/adt-bundle-mac-x86_64-20140702/sdk/tools:$PATH

C.让以上所做的配置生效

source ~/.bash_profile

D.查看是否生效（有时可能需要关闭当前 Terminal 窗口重新开启一个）

echo $PATH

Darren-2:/ Darren$ touch ~/.bash_profile

Darren-2:/ Darren$ open -t ~/.bash_profile 

Darren-2:/ Darren$ source ~/.bash_profile

Darren-2:/ Darren$ echo $PATH

/Users/Darren/DevTools/adt-bundle-mac-x86_64-20140702/sdk/tools:/Users/Darren/DevTools/adt-bundle-mac-x86_64-20140702/sdk/platform-tools:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

（3）再次添加android平台（进入/usr/local/lib/hello 该目录下！）

cordova platform add android

添加成功：

Darren-2:hello Darren$ cordova platform add android

Creating android project...

Creating Cordova project for the Android platform:

Path: platforms/android

Package: com.example.hello

Name: HelloWorld

Android target: android-19

Copying template files...

Project successfully created.

查看目录结构：

Darren-2:hello Darren$ ls /usr/local/lib/hello/platforms/android

AndroidManifest.xmlbuild.gradlelibs res

CordovaLib cordova platform_www settings.gradle

assets custom_rules.xmlproject.propertiessrc

（4）构建平台项目，但是报错（没有安装ant）

cordova build android

Darren-2:hello Darren$ cordova build android

Running command: /usr/local/lib/hello/platforms/android/cordova/build 

/usr/local/lib/hello/platforms/android/cordova/node_modules/q/q.js:126

                    throw e;

                          ^

Error: Failed to run "ant -version", make sure you have ant installed and added to your PATH.

    at /usr/local/lib/hello/platforms/android/cordova/lib/check_reqs.js:43:27

    at ChildProcess.exithandler (child_process.js:652:7)

    at ChildProcess.emit (events.js:98:17)

    at maybeClose (child_process.js:756:16)

    at Socket.<anonymous> (child_process.js:969:11)

    at Socket.emit (events.js:95:17)

    at Pipe.close (net.js:465:12)

Error: /usr/local/lib/hello/platforms/android/cordova/build: Command failed with exit code 8

    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)

    at ChildProcess.emit (events.js:98:17)

    at maybeClose (child_process.js:756:16)

    at Process.ChildProcess._handle.onexit (child_process.js:823:5)

（5）安装ant：

brew install ant

Darren-2:~ Darren$ brew install ant

==> Downloading http://www.apache.org/dyn/closer.cgi?path=ant/binaries/apache-an

==> Best Mirror http://mirrors.cnnic.cn/apache/ant/binaries/apache-ant-1.9.4-bin

######################################################################## 100.0%

��  /usr/local/Cellar/ant/1.9.4: 1597 files, 39M, built in 4 seconds

（6）再次构建平台项目：

cordova build android

finally，构建成功：

Darren-2:hello Darren$ cordova build android

Running command: /usr/local/lib/hello/platforms/android/cordova/build 

Buildfile: /usr/local/lib/hello/platforms/android/build.xml

-set-mode-check:

-set-debug-files:

-check-env:

 [checkenv] Android SDK Tools Revision 23.0.5

 [checkenv] Installed at /Users/Darren/DevTools/adt-bundle-mac-x86_64-20140702/sdk

……………

……………

……………

BUILD SUCCESSFUL

Total time: 32 seconds

Built the following apk(s):

    /usr/local/lib/hello/platforms/android/ant-build/CordovaApp-debug.apk

（7）运行模拟器：

cordova emulate android

Darren-2:hello Darren$ cordova emulate android

Running command: /usr/local/lib/hello/platforms/android/cordova/run --emulator

Buildfile: /usr/local/lib/hello/platforms/android/build.xml

…………

…………

…………

BUILD SUCCESSFUL

Total time: 3 seconds

Built the following apk(s):

    /usr/local/lib/hello/platforms/android/ant-build/CordovaApp-debug.apk

WARNING : no emulator specified, defaulting to Nexus4-Darren

Waiting for emulator...

Creating filesystem with parameters:

    Size: 69206016

    Block size: 4096

    Blocks per group: 32768

    Inodes per group: 4224

    Inode size: 256

    Journal blocks: 1024

    Label: 

    Blocks: 16896

    Block groups: 1

    Reserved block group size: 7

Created filesystem with 11/4224 inodes and 1302/16896 blocks

emulator: emulator window was out of view and was recentered

Booting up emulator (this may take a while)..................................................................BOOT COMPLETE

Installing app on emulator...

Using apk: /usr/local/lib/hello/platforms/android/ant-build/CordovaApp-debug.apk

Launching application...

LAUNCH SUCCESS

（8）安装apk至android虚拟机：

phonegap install android

安装成功并启动：

Darren-2:hello Darren$ phonegap install android

 [warning] The command `phonegap install` has been DEPRECATED.

 [warning] The command has been delegated to `phonegap run`.

 [warning] The command will soon be removed.

[phonegap] executing 'cordova run android'...

[phonegap] completed 'cordova run android'

启动完成：