关于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/*">

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

推荐阅读更多精彩内容