码迷,mamicode.com
首页 > 移动开发 > 详细

Cordoval在iOS中的运用整理

时间:2016-07-06 11:42:05      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:

 

一:关于Cordoval理论知识

1:PhoneGap是手机平台上流行的一款中间件。它构建在各种手机平台所提供的WebView(浏览器内核)组件的基础之上,使用javascript语言对应用开发者提供统一的接口(如调用相机、调用其他本地组件),从而屏蔽了各手机平台上OS的异构。在无线小组的调研任务中,我的任务主要是负责iOS平台上的调研,本文简单描述了iOS平台上PhoneGap与平台本地的互操作性的实现。 

2:PhoneGap因为被捐赠给了Apache而改名为Cordova,所以PhoneGap里的类名都以CDV作为前缀。在iOS平台上,最重要的一个核心类是CDVViewController。该类直接继承自UIViewController,因而具备了所有UIViewController所具备的特性。同时,该类还实现了两个Protocol(即接口):UIWebViewDelegate和CDVCommandDelegate。因此它也负责UIWebView的一些callback,以及CDVInvokedUrlCommand的执行。

3:CDVViewController类的主要对象成员是CDVCordovaView *webView,在源代码中可以看出,这个webView对象是CDVViewController的self.view上的唯一被add进来的子对象,即负责了整个CDVViewController类的显示。而CDVCordovaView类则没什么特别的,它直接继承自UIWebView

4:当CDVViewController在构建时,它有两个很重要的属性:NSString*wwwFolderName和NSString *startPage。这两个属性值使得CDVViewController在load之后直接加载wwwFolderName下的startPage作为初始显示的页面。

以上是对CDVViewController的一个简单介绍。容易明白的是,在iOS应用中使用了CDVViewController之后,界面实际上就完全交给了CDVCordovaView*webView,即一个UIWebView

技术分享

 

 

二:使用Cordoval常碰到的问题

1:如何在Cordoval加载远程的URL网址

Config.xml配置文件时增加下面两个,便可以打开URL的HTML页面

    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />

2:在Cordoval中加载同一个域的URL是在APP打开,跳转到其它却是用safari浏览器打开

同样是在Config.xml配置中把下面两个删除,这样它便会一直在APP里面进行跳转

<!--    <allow-intent href="http://*/*" />-->
<!--    <allow-intent href="https://*/*" />-->

3:如何加载不同的启动页URL地址

在配置Config.xml文件中有个content的节点,里面默认是有一个打开本地的地址index.html(比如:<content src="index.html" />); 这个就是跳转到本地包里面的html页面,也可以修改成(比如:<content src="https://www.baidu.com/" />)

上面这种只是修改默认的地址,可能不符合对于项目实际用法,项目中要加载Cordova都会有一个viewController的控制器继承于CDVViewController,它时就有一个属性startPage用于设置跳到webView加载的html页面;其中使用CDVViewController通常需要设置wwwFolderName的目录名称,和startPage首页的名称即可。默认wwwFolderName为www,startPage默认为index.html;这个也是模板直接生成时文件的名称;

self.viewController.startPage=@"http://www.cnblogs.com";

4:使用pod管理Cordoval及其插件

 pod Cordova

如果需要引入一些相关的插件,可以加入如下配置,下面的这些插件可以通过pod搜索到:

    pod CordovaPlugin-console
    pod cordova-plugin-camera
    pod cordova-plugin-contacts
    pod cordova-plugin-device
    pod cordova-plugin-device-orientation
    pod cordova-plugin-device-motion
    pod cordova-plugin-globalization
    pod cordova-plugin-geolocation
    pod cordova-plugin-file
    pod cordova-plugin-media-capture
    pod cordova-plugin-network-information
    pod cordova-plugin-splashscreen
    pod cordova-plugin-inappbrowser
    pod cordova-plugin-file-transfer
    pod cordova-plugin-statusbar
    pod cordova-plugin-vibration

注意:如果没有用pod来管理Cordova,默认工程都会有一个CordovaLib.xcodeproj来把Cordova的类引入,所以建议Cordova用pod引入,就可以调用,而关于html、JS等静态模板还是在工程中;可以查看下面两个网址

iOS中Cordova开发初探 地址:http://blog.devzeng.com/blog/hello-cordova-ios.html

Cordova使用Pod实例 地址:https://github.com/phonegap/phonegap-webview-ios

 

三:插件内容

对于Cordova在插件上面还是比较多,也可以自定义插件的开发,对于插件下面已经有列出一些,其它插件可以上Cordova或者gitHub进行查找;

支付宝支付插件:
iOS/Android 地址:https://github.com/fami2u/cordova-plugin-alipay.git

微信支付插件:
iOS/Android 地址:https://github.com/fami2u/cordova-plugin-weipay.git

ping++支付插件:
iOS 地址:https://github.com/fami2u/cordova-ping-fami.git

扫描二维码和条形码插件:
iOS/Android 地址:https://github.com/fami2u/cordova-barcodescanner-fami.git

拍照插件:
iOS/Android 地址:https://github.com/fami2u/cordova-plugin-camera.git

极光推送插件:
iOS/Android 地址:https://github.com/fami2u/jpush-phonegap-plugin.git
iOS 地址:https://github.com/fami2u/cordova-Jpush-fami.git

第三方登录插件:
iOS 地址:https://github.com/fami2u/cordova-UMLogin-fami.git
JS 地址:https://github.com/fami2u/cordova-plugin-wechat.git

第三方分享插件:
iOS 地址:https://github.com/fami2u/cordova-UMShare-fami.git

跳转地图插件:
iOS 地址:https://github.com/fami2u/cordova-plugin-map.git

视频播放插件:
iOS 地址:https://github.com/fami2u/cordova-player-fami.git

 

四:有可能出现的问题

1:在使用cordova6.0的过程中,编译好的APP运行在IOS7+系统上默认是与状态栏重叠的,而运行在IOS6及老版本中时是于状态栏分离的。

解决办法:把文件MainViewController.m中的方法viewWillAppear进行相关修改如下。 作用是更改view的边界,使其下移20px,刚好是状态栏的高度。

- (void)viewWillAppear:(BOOL)animated
{
    if([[[UIDevice currentDevice]systemVersion ] floatValue]>=7)
    {
        CGRect viewBounds=[self.webView  bounds];
        viewBounds.origin.y=20;
        viewBounds.size.height=viewBounds.size.height-20;
        self.webView.frame=viewBounds;
    }
    [super viewWillAppear:animated];
}

2:在html页面内调用系统相机以后再返回,整个页面底部会有白色的空白控件,用调试工具查看后空白区域的高度是20px.该如何解决?

解决办法:由于整个cordova项目相当于一个页面的应用,不同的模块聚集在一起,所以当当前屏幕消失后(比如进入系统相机拍照页面)再出现的时候,还是会执行上面的代码,所以界面高度再次减少20px.

-(void)viewWillDisappear:(BOOL)animated
{
    if([[[UIDevice currentDevice]systemVersion ] floatValue]>=7)
    {
        CGRect viewBounds=[self.webView  bounds];
        viewBounds.origin.y=20;
        viewBounds.size.height=viewBounds.size.height+20;
        self.webView.frame=viewBounds;
    }
    [super viewWillDisappear:animated];
}

 

 

五:分享Cordova不错的文章:

使用Cordova进行iOS开发 (环境配置及基本用法) :http://www.jianshu.com/p/d24219c008b6

使用Cordova进行iOS开发 (第三方插件的使用:Camera插件):http://www.jianshu.com/p/1e3d0c915dbc

使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件):http://www.jianshu.com/p/e982b9a85ae8 

Cordova插件开发入门(IOS版OC跟JS交互):http://my.oschina.net/crazymus/blog/516388

浅析 Cordova for iOS(OC跟JS交互的说明):http://www.cocoachina.com/industry/20130520/6238.html

cordova CDVViewController解析 :http://blog.csdn.net/u011417590/article/details/50895734

 

附整理的Cordova小实例:https://github.com/wujunyang/jiaCordovaDemo

Cordoval在iOS中的运用整理

标签:

原文地址:http://www.cnblogs.com/wujy/p/5646341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!