ios之混合开发phonegap2016.7

一、关于phonegap
是什么？honegap是一个利用HTML5去开发App的框架。可以为安卓、iOS、WP、黑莓、火狐等移动操作系统。采用HTML5来编写交互界面。
优点：是编写一次可以编译到各种移动平台上，大大为公司节省了开发周期。
缺点：性能不如原生的好，只能做一些简单的APP，比如介绍公司的那种，或者网站客户端。要是做游戏还是算了吧。PhoneGap集成多了个平台.程序的载入和UI界面的反应都比原生的程序慢，UI反应延时——这是个致命伤 .它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。 这在用户体验上来说PhoneGAp依然无法替代原生应用程序。另外，html、javascript、css都运行在各平台内置浏览器webkit之上，受到webkit处理速度影响。目前来说运行速度比较慢，性能较差。

---

二、开始安装
1.安装GIT:http://www.git-scm.com/

2.安装NODEJS：http://nodejs.org/
最新版6.3.0版本都自带npm安装环境

3.进入终端命令行使用npm安装cordova 代码如下：
sudo npm install -g cordova
说明：
Cordova是PhoneGap贡献给Apache后的开源项目，是从PhoneGap中抽离出的核心代码，是驱动PhoneGap的核心引擎。
4.进入你要创建的项目目录，然后创建phonegap项目
cordova create hello com.example.hello HelloWorld
说明：
hello文件夹名
com.example.hello:Bundle Identifier
HelloWorld:工程名

0A33B8AF-7D63-48A1-9396-9B3AED52144C.png

5.进入刚才已经创建的项目中，这时候可以添加ios平台,无先后顺序。

$ cd hello
$ cordova platform add ios

用xcode打开工程，
工程目录：

6A62B961-77F1-4BAC-B12B-C72B33EB84FF.png

运行就可以看到效果了

878DE0AD-1A8E-40C2-B810-FB165814117D.png

---

三、查看效果
下载安装PhoneGap for mac
点击+号，选择打开已经有的工程，就是上面创建的hello

A0480420-69F0-4C6D-B0DB-BB269BF7ACE0.png

随便点开一个网址，也就能看到了
电脑打开http://192.168.0.207:3000/
或者同一wifi下的手机打开，都可以看到helloworld的界面

---

四、已有项目集成
原有的项目叫testPhoneGap。

1. 打开testPhoneGap文件目录
   将刚才上面hello目录的config.xml拷贝过去
   进入platforms/ios，将cordova、www、cordovaLib文件夹全部拷贝过去
   打开testPhoneGap项目，Add Files添加CordovaLib.xcodeproj 和 config.xml

   工程目录如下：

   
   
   

   0F9C23F5-54DC-493E-B069-C0DF8A56A964.png

选择主项目，进入Build Phases，在Target Dependencies 和Link Binary 中添加Cordova
点击buiild stetings 的 other Liner flags 添加 -all_load和-Objc

编译成功

添加资源文件，把www文件夹拖进去工程， 不要直接Add Files添加， 并且Added folders要选择folder references，这样添加进去的文件夹是蓝色的，一定要是蓝色的，而不是黄色的。

ViewController的Classes属性关联到CDVViewController
运行就又可以显示helloworld效果了。

使用代码的话，就导入#import "Cordova/CDVViewController.h"
使用CDVViewController

---

五、真正开始使用
开始简单使用，实现js和native(原生)代码之间的通信。
index.html

ViewController.m中

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}
 
-(BOOL)webView:(nonnull UIWebView *)webView shouldStartLoadWithRequest:(nonnull NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSURL *url = [request URL];
    if ([[url scheme] isEqualToString:@"cj"]) {
        // 在这里做 js 调 native 的事情
     
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"test" message:[url absoluteString] preferredStyle:UIAlertControllerStyleAlert];
 
         UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"好的"style:UIAlertActionStyleDefault handler:nil];
        
         [alertController addAction:okAction];
  
        [self presentViewController:alertController animated:YES completion:nil];
       
        // 做完之后用如下方法调回 js
       [webView  stringByEvaluatingJavaScriptFromString:@"alert('hello world!')"];
        return NO;
    }
    return YES;
}
 
@end

六、附录
PhoneGap的API文档地址：
http://www.phonegapcn.com/docs/zh/cn/index.html

添加插件命令 cordova plugin add *

设备信息插件：  
  cordova plugin add org.apache.cordova.device  
  网络连接插件：  
  cordova plugin add org.apache.cordova.network-information  
  cordova plugin add org.apache.cordova.battery-status  
  陀螺仪：  
  cordova plugin add org.apache.cordova.device-motion  
  cordova plugin add org.apache.cordova.device-orientation  
  cordova plugin add org.apache.cordova.geolocation  
  摄像头拍照录制等：  
  cordova plugin add org.apache.cordova.camera  
  cordova plugin add org.apache.cordova.media-capture  
  cordova plugin add org.apache.cordova.media  
  访问文件：  
  cordova plugin add org.apache.cordova.file  
  cordova plugin add org.apache.cordova.file-transfer  
  提醒：  
  cordova plugin add org.apache.cordova.dialogs  
  cordova plugin add org.apache.cordova.vibration  
  联系人：  
  cordova plugin add org.apache.cordova.contacts  
  全球化：  
  cordova plugin add org.apache.cordova.globalization  
  闪屏（启动画面）：  
  cordova plugin add org.apache.cordova.splashscreen  
  打开新的浏览器 (InAppBrowser):  
  cordova plugin add org.apache.cordova.inappbrowser  
  调试主控制台：  
  cordova plugin add org.apache.cordova.console

终端切换到工程目录，例如test目录下，输入
cordova plugin add cordova-plugin-camera
就可以成功添加一个插件了。