关于iOS Cordova自定义插件的傻瓜式讲解

因为公司的需求,自己做了一段时间的Cordova,作为一个脑袋直到爆的人总是会把坑从最简单的开始从头碰到尾。这篇文章我会把自己这段时间遇到的所有的每一个问题和方向都说下,希望能够对读者有一定的帮助。

一. 亘古不变的安装

如果你要安装Cordova首先你要安装node.js 和git client 这两个你可以直接百度到官网上寻找下载,其中node.js两个版本的前一个版本是稳定版,后一个版本是最新版,我下的是稳定版。
终端运行sudo npm install -g cordova 输入密码的时候是不会后退显示的,所以查着数来写吧。
创建一个cordova项目:

cordova create hello com.example.hello HelloWorld

整体的运行操作


命令行的整体命令

hello:新建的文件夹的名称,你的程序会放在这下面。
com.example.hello:AppID ,个人编写的话就跟着com.example来写就行。
HelloWorld:应用项目的名称。
然后我们进入到hello的文件夹下 cd hello
在这个文件夹下cordova platform add ios 添加一个 iOS平台。
这样咱们就创建了一个 cordova项目,你可以打开platform/ios 运行下面的应用程序,成功的话是这样的


启动成功.png

二.插件需要什么东西

在百度上打开Cordova iOS 自定义插件的搜索,基本上都是告诉你要写几个文件。


整体结构.png

1.plugin.xml 这个是你整体插件的配置文件,里面有你的插件能够应用的平台和所需要依赖的库,以及你写的主体插件的类的引援。

2.src/ios/类名 格式很重要!的这里面就是你和网页界面交互的接口,主要就是以方法名调用自己OC的方法为主体的。

3.www 这个是你写的js接口 ,h5界面可以通过这些接口来完成对上面的你的OC类的调用。

然后我们详细讲一下这三个部分是怎么写的

1.src/ios/类名 (再次提示结构很重要)

首先,在刚刚的那个准备好的 Cordova项目中创建一个继承与CDVPlugin的类,可能会报错将头文件#import <Cordova/Cordova.h> 改成<Cordova/CDPlugin.h>就好了
在网络上去找自定义的 iOS Cordova 插件 基本上都是会说我们在这个类里面写一个获取终端信息的方法。搞得我以为只有通过获取终端信息的方法才能进行我们自己的调用。其实不是,这里面你只要你以一个-(void)init:(CDVInvokedUrlCommand*)command这种格式也就是类名加上js给我们传递的值的形式来搞就可以了

自己写的一个方法
传过来的command是我们OC界面从网页获取到的数值,我们可以通过command.arguments这个数组来取得数值也就是objectAtIndex:0,比如登录啊什么的给我们传来的用户名密码都是通过command来传递的。而下面的pluginResult是一个传回给网页的字典数据,这里面我是直接随便传递了个字典给他。就是为了js端知道调用成功。

2.www文件夹下的js文件

让原生蛋疼的js文件,我的是网页那边给写的,我就按他的来说下:


JS文件.png

从上到下第一部分是:

    cordova.define("cordova-plugin-openim.OpenImKit", function(require, exports, module) {var exec = require('cordova/exec');

双引号下面的就是你自己定义的插件的整体的文件夹就是最外面的文件夹,点后面的就是你的类名。后面的function 啥的跟着写就行,下一行 var 你的类 =function(){};
第二部分:这是js调用oc的方法:

类名.prototype.方法名=function(传递给OC的参数,OC回应给JS,JS调用的方法){ exec(成功的回调方法,失败的回调方法,类名,方法名,传递给OC的参数);}

第三部分:程序入口

module.exports =new 类名;

3.plugin.xml文件,格式如下

<?xml version ="1.0"  encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:rim="http://www.blackberry.com/ns/widgets"
xmld:android="http://schemas.android.com/apk/res/anroid"
id="cordova-plugin-openim"    //你的插件的唯一id推荐还是写     文件夹的名字
version="1.0.0"
<name>OpenImKit</name>       //类名
<description>Cordova OpenImKit Plugin</description>  //描述
<license>Apache 2.0</license>
<keywords>cordova,OpenImKit</keywords>
*********************我是分割线   下面是ios平台的配置  *************************
 <platform name="ios">
    <config-file target="config.xml" parent="/*">
              <feature name="OpenImKit">
                         <param name="ios-package" value="OpenImKitClass"> 
              <feature>
    </config-file>
            <header-file src="src/ios/OpenImKitClass.h">
            <source-file src="src/ios/OpenImKitClass.m">
//如果要依赖系统库
<framework src="src/ios/libs/AddressBook.framework" />  
//如果需要其他三方的framework,先将这些三方的库复制到src/ios     目录下,比如我们在这下里面新建一个Test文件夹,整体放三方的     framework,那关联格式:
<framework src="src/ios/Test/UTDID.framework" custom="true" />
//如果需要将捆绑包bundle或者是图片之类的文件
<resource-file src="src/ios/Test/WXOpenIMSDKResource.bundle" />
<resource-file src="src/ios/Test/yw_1222.jpg" />

    </platform>
</plugin>

如果没有问题的,恭喜你已经写下了自己的插件,这里面说下我是在就是本文开头的创建的helloworld下面的platform/ios/程序里面的写的自己的插件方法 .h.m,毕竟能报错啊 - - 。

三. 测试插件

我们想要测试插件是否能够真正的成功运行,打开命令行 cd到我们的 helloworld 文件夹下面写下cordova plugin add 后面跟上你的下的文件的地址也可以直接拽到命令行里面。
下面的图里面我之前是把这个项目删除了。我就又建了一遍,下面的就是我从桌面上拽过来的结果- -。这边博文也是写了好几天,都是抽时间。

项目中添加自己的插件.png

1.添加自定义插件

如果成功的话就是会出现installing "插件文件夹" for ios
报错的话,友情提示去找找plugin.xml吧,基本上就是那个的错。就是那种花花绿绿的好好颜色的一堆,原谅我的垃圾比喻。如果有需要的我会专门写一篇报错的。
打开platform下的 iOS程序,在staging文件夹下面www的index.html随便写一个按钮调用,或者是直接调用前面js里面的函数,注意是staging下面的index.html,因为staging上面还有一个www文件夹那个里面写没用的。

index文件

至于h5文件怎么写 = =我给个模版吧,我给个测试用的button的。

<!DOCTYPE html>
<html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <script type="text/javascript" src="cordova.js"></script>
          <script type="text/javascript" src="cordova_plugins.js">   </script>
         <script type="text/javascript">
function buttonClick( ){
 window.AMapLocation.getAmapLocation(function(ret,err)
 {   });
 }
   </script>
   </head>
   <body>
               <p>ExampleObject</p>
               <button onclick="buttonClick()">Im</button>
    </body>       
</html>

这里面那个window的函数就是调用之前你编写的js文件的。window.你的类.调用的方法。

总结

其实之前看了好多的文章等到自己弄会了之后感觉是那么回事,自己做的时候文章中总会漏掉几个点,我不能保证自己写的就会怎么尽善尽美,但也算是把自己之前的疑惑的一些基础操作做了一个详细的讲解吧。在做cordova之前其实自己也有看过那个关于WebViewBridge的交互,后面的文章我也会写一篇关于WebViewBridge怎么用的文章,主要是参考了标哥的文章。这篇文章有什么问题,尽情骚扰互相伤害啊!

后续

突然想起了在加载三方框架的时候会用到代理方法时候,不会走代理方法的解决办法:

高德地图时实的位置.png

比如这个地理位置的代理,其实很简单的,只要在.h文件中重写一下这个方法名就行了,如图:

代理头文件.png

这样可以接着走代理方法了!

其实自己还是有点强迫症的,所以之后要更新一篇把插件搬移到新建项目中,这个我也是从简书的其他地方看见的,自己相当于笔记一样写下自己搬移的过程,也希望正确的方法能够多一些。刚刚和道友一起的因为自己的项目没有和网上的web交互,所以对网上的web怎么连接都是不知道的,幸亏道友告诉的在config.xml中添加访问外部的网址:

//单个网址
<allow-navigation href="http://yourdomain.com/home">
//网址下面的所有连接
 <allow-navigation href="http://yourdomain.com/*">

也希望更多的道友来互相伤害啊!

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

推荐阅读更多精彩内容