美文网首页iOS移动端开发混合編程專題Cordova iOS Platform
关于iOS Cordova自定义插件的傻瓜式讲解

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

作者: iSuAbner | 来源:发表于2016-07-18 15:16 被阅读4066次

因为公司的需求,自己做了一段时间的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/*">

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

相关文章

网友评论

  • yahzon:mark一下。和Android的差不多。不过看不到ios的语法,和项目框架。
  • wang1992:我在插件www文件夹下的js文件中,引入了插件,在调用插件时总是提示找不到CustomAlertMethod这个方法怎么回事
    var CustomAlertMethod = {
    coolMethod : function(){
    cordova.exec(success, error, "WLAlertPlugin", "coolMethod", []);
    }
    };
    module.exports = CustomAlertMethod;
  • skylor:cordova platform add iOS这个命令中要区分大小写吧 cordova platform add ios
    skylor:@iSuAbner 不谢不谢 我也是来学习的
    iSuAbner:@VinlorJiang 嗯 截图里面的是ios 文中写了iOS 谢谢提醒
  • 庆华_8f67:你好,我用的ionic,导入第三方framework以后运行ionic cordova build不通过,编译失败,该咋办?报错信息我私信你了,有空的话,能不能帮我看看
  • 8ab5c8533be6:👍👍👍👍👍
  • 15e64cb0aa93:大神我有好多问题....比如点一个按钮之后进入h5 这个界面是不是得继承CDVViewController 还是继承UIViewController 这个界面就不能用uiwebview加载h5那种方法了吧。怎么才能在服务器获取的h5里也能通过cordova调用原生....我现在只知道可以在index.html里写怎么和服务器web交互还是不懂...
    iSuAbner:@Jerain 恩 index.html只是一个入口,我们这边原声写完功能是插件的形式。也就是像原声点击button的时候的后续action,至于这个button放在那里是h5自己随便在哪个界面都可以的。h5通过我们写的插件中的js规范调用,也就是像我们是后台 给h5前端提供接口告诉他们h5 中的button点击之后显示的内容,只要调用插件js就好。
    15e64cb0aa93:@KoreaHappyend 嗯嗯 谢谢大神 :sob: 那他们把整个www文件给我了,这里只能有一个html吧,像index.html那个。别的h5是不是就用不了cordova了...还是可以放好多个html...刚才听完大神的回答我已初步明白怎么调服务器的h5了 谢谢大神 :grin:
    iSuAbner:@Jerain 点进去的界面确实是继承与CDVViewController,就不用你再新建一个web去load URL,服务器的h5页面是你用命令行新建Cordova工程的时候的那个www的整个文件夹,你们的h5会把他写的整个www文件给你,你再放到工程里面通过接口的每一个自定义方法来实现www中的button点击后的oc界面动作。慢慢理解,先把脑袋清空,因为第一次走的时候总感觉自己这的一些认知是对的,然后以这个对的为基础向上否定,应该先从大局观明白流程在分布确认细节。加油 :stuck_out_tongue_winking_eye:
  • 清無:没看懂这是个啥玩意。。。。没听说过,百度了,资料也少
    清無:@KoreaHappyend soga,tks
    iSuAbner:@菲拉兔 恩 Cordova主要的作用就是H5JS调用原声界面 这个东西不是一边能看懂呢 非常需要耐心 第一次看的反应肯定就是这是什么鬼东西 。
  • 95024800643e:QQ752441867,急求
  • 95024800643e:大哥,我用cordova调用ios插件的时候出现一个问题,就是调用里面.a静态库开始老是出错,求大哥解答
    iSuAbner:@Mrico 嗯
  • fcc9d82d309a:写得很好
    iSuAbner:@XZanYI 谢谢
  • 春泥Fu:没什么事,就突然想评论。
    iSuAbner:@春泥Fu 谢谢评论😂
  • 767dacc1880c:骚年,我见你骨骼惊奇,一定是混编能手,方便加个QQ容在下咨询你一些cordova的东西吗?QQ:877252079

本文标题:关于iOS Cordova自定义插件的傻瓜式讲解

本文链接:https://www.haomeiwen.com/subject/skwpjttx.html