【PhoneGap】环境安装配置浅析

因为项目须要,须要了解PhoneGap架构以其在各个平台的环境配置,阅读了官网部分文档,总结以下。 html

【官网地址】 node

http://phonegap.com/ android


【环境配置】 ios

参考: http://phonegap.com/install/ git

1. 安装NodeJs。 打开NodeJs的官网:http://nodejs.org/   点击“install”,便可完成安装。 github

 NodeJS安装完成后,会自带把npm安装好,npm也在第二步中须要用到。 web

2. 安装phoneGap chrome

在控制台运行命令: shell

sudo npm install -g phonegap

输出结果以下: express

  1. /usr/local/bin/phonegap -> /usr/local/lib/node_modules/phonegap/bin/phonegap.js  
  2. phonegap@3.1.0-0.15.0 /usr/local/lib/node_modules/phonegap  
  3. ├── colors@0.6.0-1  
  4. ├── pluralize@0.0.4  
  5. ├── semver@1.1.0  
  6. ├── qrcode-terminal@0.9.4  
  7. ├── shelljs@0.1.4  
  8. ├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.5)  
  9. ├── node-static@0.7.0 (colors@0.6.2, mime@1.2.11)  
  10. ├── phonegap-build@0.8.4 (qrcode-terminal@0.8.0, optimist@0.3.7, shelljs@0.0.9, phonegap-build-api@0.3.3)  
  11. ├── prompt@0.2.11 (revalidator@0.1.5, pkginfo@0.3.0, read@1.0.5, winston@0.6.2, utile@0.2.0)  
  12. └── cordova@3.1.0-0.1.0 (ncallbacks@1.0.0, colors@0.6.2, open@0.0.3, mime@1.2.11, shelljs@0.1.2, follow-redirects@0.0.3, tar@0.1.18, prompt@0.2.7, glob@3.2.6, elementtree@0.1.5, xcode@0.5.1, npm@1.3.13, express@3.0.0, request@2.22.0, plist@0.4.3, ripple-emulator@0.9.18, plugman@0.13.0)  


3. 使用phoneGap

输入命令:

  1. $ phonegap create my-app  
  2. $ cd my-app  
  3. $ phonegap run android  


其中,能够关联create命令: (在bashrc中关联bin里面的create命令)

  1. # PhoneGap  
  2. alias pgap='/Library/PhoneGap/bin/create'  

‘=’右边为具体的phoneGap路径。
建立工程的格式为:

  1. pgap <project_folder_path> <package_name> <project_name>  


【PhoneGap在IOS平台的应用】

官网连接为:  http://docs.phonegap.com/en/edge/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide

  1. $ cordova create hello com.example.hello "HelloWorld"  
  2. $ cd hello  
  3. $ cordova platform add ios  
  4. $ cordova prepare              # or "cordova build"  


[error1] cordova: command not found

[solution1]

须要安装:

sudo npm install -g cordova

cordova 和phonegap虽然是来自同一家,但仍是不一样的,他们的关系就像webkit和google chrome。。要运行这个cordova固然得安装。

[solution2]

执行命令及结果:

  1. Scotts-iMac:helloworld mac$ phonegap create hello com.example.hello "HelloWorld"  
  2. [phonegap] missing library phonegap/www/3.1.0  
  3. [phonegap] downloading https://github.com/phonegap/phonegap-app-hello-world/archive/3.1.0.tar.gz...  
  4. [phonegap] created project at /Users/mac/Documents/PhoneGap/helloworld/hello  


[error2] 运行命令:phonegap run ios 失败

[solution2]

  1. phonegap run ios  
  2. [phonegap] detecting iOS SDK environment...  
  3. [phonegap] using the local environment  
  4. [phonegap] adding the iOS platform...  
  5. [phonegap] missing library cordova/ios/3.1.0  
  6. [phonegap] downloading https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;a=snapshot;h=3.1.0;sf=tgz...  
  7. [phonegap] compiling iOS...  
  8. [phonegap] successfully compiled iOS app  
  9. [phonegap] trying to install app onto device  
  10. [phonegap] no device was found  
  11. [phonegap] trying to install app onto emulator  
  12.  [warning] missing ios-sim  
  13.  [warning] install ios-sim from http://github.com/phonegap/ios-sim  
  14.    [error] An error occurred while emulating/deploying the ios project.=== CLEAN TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===  


但这个命令会再对应路径下生成响应的IOS 工程文件,打开“HelloWorld.xcodeproj”, 能够正常编译,运行。

错误的缘由是签名致使,没有正确的profile文件。


【PhoneGap系统架构】

网上找的架构图以下:



【IOS中使用方法】

    1. #import <Cordova/CDVViewController.h>  
    2. CDVViewController* viewController = [CDVViewController new];  
    3. viewController.wwwFolderName = @"myfolder";  
    4. viewController.startPage = @"mystartpage.html";  
    5. viewController.useSplashScreen = YES;  
    6. viewController.view.frame = CGRectMake(00320480);  
    7. [myView addSubview:viewController.view];  
相关文章
相关标签/搜索