(原创)Cordova从零到应用,iOS已存项目集成使用,插件自定义

网上iOS关于cordova的资料繁多,但都不太全面细致,经过最近这段时间的研究使用,总结出这一份集成使用教程,可以满足基本使用需求。调试环境Xcode9.4


1、参照cordova官网教程安装相应环境,创建一个标准cordova项目(http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html

下载和安装Node.js。安装完成后你可以在命令行中使用node 和 npm 。

(可选)下载和安装git client, 如果你没有。安装成功后,你可以在命令行中使用git。 这个命令行使用下载git仓库中的资源。

安装cordova 模块使用Nodejs的npm工具。cordova模块会被npm工具自动下载。

$ sudo npm install -g cordova

创建App:cd跳转到你维护源代码的目录中,并创建你的cordova项目:

$ sudo cordova create hello com.example.hello HelloWorld

添加iOS平台:所有后续命令都需要在项目目录或者项目目录的任何子目录运行

$ cd hello

$ sudo cordova platform add ios --save

检查你当前平台设置状况:

$ sudo cordova platform ls

这样就创建了一个标准cordova项目,在hello文件夹上右键显示简介,解锁访问权限!不然打开项目xcode会提示没有权限。打开读与写权限并应用到包含的项目。

用xcode打开hello项目(文件层级位置如下图),编译成功,至此创建完成

2、编辑插件,简略常用命令,使用很简单,cd到hello目录下,执行相应命令(http://cordova.axuer.com/plugins/

$ sudo cordova plugin search camera

$ sudo cordova plugin add cordova-plugin-camera

$ sudo cordova plugin remove cordova-plugin-camera

$ sudo  cordova plugin ls

添加的插件源文件在下图目录下,以后需要找到集成到其他已有项目:

3、测试插件,项目目录中包含两个config.xml配置文件,以下图标识配置文件为准,另外一个配置文件可以忽略,不用动。

3.1、修改配置文件中的“index.html”为测试插件的H5网页地址

3.2、配置文件中加入两行配置代码,允许在APP中打开链接,不然会自动跳转到safari打开网页。然后就可以运行调试插件了。

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

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

4、基于上面创建的cordova标准项目,在已存iOS项目中集成cordova功能

注意:将cordova集成到其它项目中,在其它项目中不能使用cordova命令进行插件编辑相关功能,其它已存项目不是标准的cordova项目,只是将cordova功能和插件分别集成进去,当做多功能webView使用。插件的添加操作在创建的标准项目中用命令行执行,然后手动添加相应插件的实现文件到其它已存项目中,删除也是手动删除插件及修改配置文件。

4.1、将Cordova本地相关文件copy到已存的项目中,hello/platforms/ios 路径下面需要copy的4个文件夹copy到新项目的根路径中

4.2、拷贝hello/platforms/ios/HelloWorld中的config.xml文件到对应的工程目录,到新项目的二级根目录下,如图

4.3、配置相关参数

4.3.1、打开新工程,进入工程TARGETS -> Build Phases 下,然后如下图所示,点击①中的按键,创建New Run Script Phase,②为创建的Run Script:

4.3.2、将下图中,①原名称Run Script修改为Copy www directory,然后将②中的选项去掉,最后将下面的代码字段复制到③中:

NODEJS_PATH=/usr/local/bin; NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find /usr/local/n/versions/node/* -maxdepth 0 -type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select --print-path`/usr/share/xcs/Node/bin; PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH && node cordova/lib/copy-www-build-step.js 


4.3.3、在工程 Build Settings -> Other Linker Flags 中添加:-ObjC

(可选添加 -ObjC -all_load ,先不添加,添加后某些三方库会报错,有问题再添加)

4.3.4、在项目适当位置新建New Group,cordova文件夹,便于把cordova相关内容放入统一管理。然后Add Files to ... -> CordovaLib.xcodeproj,注意只是引入文件,取消选择Copy items if needed选项,不能改变实际文件结构,为任何添加的文件夹选择Create groups

4.3.5、Add Files to ... -> config.xml,同样只是引入,取消选择Copy items if needed选项

4.3.6、Add Files to ... -> www文件夹,同样只是引入,取消选择Copy items if needed选项

4.3.7、Schemes按照下图配置,选择CordovaLib,然后编译一次程序(command+B),然后配置下面几项

Build Phases -> Target Dependencies -> CordovaLib

Build Phases -> Link Binary With Libraries -> libCordova.a

Build Phases -> Link Binary With Libraries -> cordova.framework

官方要求库文件:AssetsLibrary.framework,CoreLocation.framework,CoreGraphics.framework,MobileCoreServices.framework

4.3.8、在Build Phases中添加一个new copy file,选择Destination为frameworks,添加cordova.framework

4.3.9、在GitHub上下载cordova-ios源码,用于从中获取完整的Cordova文件夹,拷贝到新项目指定位置(如图),然后从项目中删除CordovaLib.xcodeproj中红色缺失的Cordova文件夹

然后再重新Add Files to ... ->Cordova文件夹,浅引用添加新拷贝到项目中的Cordova文件夹到删除的位置即可,不然会报文件缺失错误

4.3.其它、Set the Xcode Preferences → Locations → Derived Data → Advanced... to Unique.

其它官方要求(仅做参考,可忽略):http://cordova.axuer.com/docs/zh-cn/6.x/guide/platforms/ios/webview.html

至此cordova相关功能组件就集成配置完成了,接下来总结使用方法。

5、cordova在新项目中的使用,一般都是作为VC使用,既可以作为单独全屏webVC使用,也可将VC.view单独作为view使用。

5.1在新项目中新建CordovaViewController继承CDVViewController

.h文件

#import <UIKit/UIKit.h>

#import <Cordova/CDVViewController.h>

#import <Cordova/CDVCommandDelegateImpl.h>

#import <Cordova/CDVCommandQueue.h>

@interface CordovaViewController : CDVViewController

@end

.m文件

#import "CordovaViewController.h"

@interface CordovaViewController ()@end

@implementation CordovaViewController

- (void)viewDidLoad {       

[super viewDidLoad];   

//防止自动留出状态栏,使用全屏效果   

if (@available(iOS 11.0, *)) {       

((UIWebView*)(self.webView)).scrollView.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever;   

} else {        self.automaticallyAdjustsScrollViewInsets =NO;    }     

}@end

5.2、设置CordovaViewController页面打开的H5地址

方式一:修改config.xml文件,设置启动网页地址,跳转至CordovaViewController自动加载此地址

方式二:跳转页面前设置启动地址,此地址优先级比方式一要高,以此设置为准。

CordovaViewController *cordovaVC=[CordovaViewController new];       

cordovaVC.startPage=@"https://www.baidu.com";            

[[ShareMethod getCurrentVC].navigationController pushViewController:cordovaVC animated:YES];

附加:CordovaViewController页面内部刷新跳转指定网页方法:在CordovaViewController.m中

self.startPage=@"https://www.qq.com"; 

self.wwwFolderName = @"www";

NSURL *url = [self performSelector:@selector(appUrl)];

if (url){

    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];

    [(UIWebView *)self.webView loadRequest:request];

}

5.3、然后在新项目中就可以随意跳转CordovaViewController,加载相应的带有cordova功能的网页,实现各种插件功能,例如返回、录音、拍照、上传图片、调整状态栏等功能。

6、添加新插件(只需要操作插件实现文件和config.xml配置文件)

6.1在标准项目hello中,用命令行添加新插件,见“2”步骤。添加的插件的实现内容都在hello—>platforms —>ios —>HelloWorld中Plugins文件夹中,包含所有插件的实现文件,把Plugins文件夹拖拽拷贝到新项目中,选中Copy items if needed选项,以后添加插件就只需要把插件的独立文件夹拷贝到新项目的Plugins文件夹中即可,然后再配置注册插件

6.2配置注册插件,然后就可以使用插件了

参考标准hello项目中的config.xml文件内容变化,将相应插件的注册语句拷贝到新项目的config.xml文件中的指定位置,就注册成功了,在网页中就能随意调用了。

7、自定义插件,分为实现插件功能和注册插件两步,然后就能测试使用插件了

7.1创建插件文件继承CDVPlugin

例如创建CDVGetToken插件:

CDVGetToken.h文件

#import <Foundation/Foundation.h>

#import <Cordova/CDVPlugin.h>

@interface CDVGetToken : CDVPlugin

//定义方法名,用于H5调用此方法,command中包含H5调用时传递过来的信息

//也包含消息的callbackId,用于指定返回给网页相应数据

-(void)getToken:(CDVInvokedUrlCommand*)command;

@end

CDVGetToken.m文件

#import "CDVGetToken.h"

@implementation CDVGetToken

//方法实现

-(void)getToken:(CDVInvokedUrlCommand*)command{

    //定义返回值对象pluginResult

    CDVPluginResult* pluginResult =nil;

    if (AccessToken && AccessToken.length) {

        //有指定值,传递给网页,Status执行状态,messageAsString传递的内容

        pluginResult=[CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:AccessToken];

    }else{//错误情况

        pluginResult=[CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"UnLogin"];

    }

    //将创建的pluginResult返回数据给网页,需要指定command.callbackId

    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];

}

@end

7.2、在config.xml中注册自定义的插件

<feature name="GetToken">

        <param name="ios-package" value="CDVGetToken" />

        <param name="onload" value="true" />

    </feature>


至此结束,按照以上步骤操作,可以满足cordova的常规使用环境。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容