本系列教程为博主初次使用开发,内容如有差错,欢迎指正,敬请谅解。

Mac安装ionic和cordova我们已经熟悉,现在使用ionic来创建HTML5使用iOS原生框架等内容的插件。

说明:图中的cordova 请自动切换为ionic使用

1. 创建项目

打开终端,切换到桌面,然后使用ionic创建一个测试项目,命名CountTest.

cd ./Desktop/
sudo ionic start CountDemo 
 或
   //使用cordova ,但是后期cordova不知道怎么引导ionic中,如果你知道请留言告诉我,感谢!
    sudo cordova create CountDemo com.twenty.CountDemo CountDemo

1: 项目创建到桌面的目录名,
2: iOS Bundle Identifier的名称,
3: 项目名
若舍去2,3步骤,iOS Bundle ID会自行创建,3中项目名为默认1中的目录名。

我们创建的项目没有可写权限只有可读权限,因为修改CountTest权限为可读可写可执行

由此可以修改CountTest文件及子文件。

2. 编译iOS项目工程

通过使用ionic编译出iOS项目结构的目录平台。

命令如下:

//添加iOS项目的平台
sudo ionic platform add ios 
或 sudo  cordova platform add ios 

下图输出则添加成功


等待几分钟

//编译iOS项目
sudo ionic build ios
或  sudo cordova build ios

如上图** BUILD SUCCEEDED **成功以后,可以看到文件中platform添加一个iOS平台文件夹。

iOS

使用苹果官方开发工具Xcode打开,如果没有权限使用命令修改权限:

sudo chmod -R 777 .

. 代表当前文件夹 ,打开后结构如下

xcode

我们自定义的插件都在Plugins文件夹下.

3. 插件开发

创建一个CountAdd对象,继承CDVPlugin对象.
ps:CDVPlugin即为cordova库的连接对象。

CountAdd

Command + B 编译Xcode,程序报错'Cordova/Cordova.h' file not found
error

通过查看CordovaLib库文件内容,此库内容中头文件CDV.h包涵全部的类头文件,因此修改如下:
CDV
correct

再次编译成功.

CountAdd.h文件中,声明一个方法:计算大小.CDVInvokedUrlCommand *对象为调用URL命令的时候自动传递的参数。在CountAdd.m中实现此方法。
.h

CountAdd.m中,我们添加如下代码:
.m

1: 获取到调用的命令的唯一ID;
2:    得到传过来的数组的第一个索引值;(后续详细解释)
3:    给得到的数+1;
5:    通过判断给插件的结果设置状态,成功状态 message 所传递的值, 失败状态 message 所传递的值;
6:    通过调用代理发送插件的结果给对应的ID

4. 配置

通过使用WebStorm来打开所创建的CountDemo项目,在项目中的Plugins文件夹中我们创建一个自己的插件目录com.twenty.CountTest,结构如下:

webStorm

ios:    存放Xcode刚才所创建的CountAdd类,
www:     存放调用的和CountAdd 所调用的js文件
plugin.xml :    配置iOS 和 cordova 的内容.

拷贝OC的类ios文件夹目录下,www目录下创建一个与oc类名一样的js文件

13
plugin.xml文件内容如下图:
14

方框内的name要一致,名字随意;
圆形内的值要与OC中继承CDVPlugin类的类名一致;
横线部分名称要与js名称一致
----------------------------------------
  `plugin.xml`中`platform`还有其它的配置`头文件`、`框架`、`plist文件`、`.a文件`以及配置`*-info.plist`文件.

eg:
框架: <framework src="CFNetwork.frame" weak="true"/>

plist文件: <resource-file src="src/ios/PushConfig.plist"/>

默认的info.plist添加key: 
<config-file target="*-info.plist" parent="NSLocationWhenInUseUsageDescription">
<string></string>
</config-file>
若为子类的https加密,可使用以下
<config-file target="*-info.plist" parent="NSAppTransportSecurity">
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
</config-file>

.a文件:  <source-file src="src/ios/lib/libPushSDK-1.8.8.a" framework="true" />

js文件内容的配置如下:

15

方框中的内容要与plugin.xml 中的方框name一致;
红色横线的部分即为OC中CDVPlugin的子类要调用的函数名.

5. 实现调用

为了调用,我们使用angularjs的方法调用,在html中创建一个button按钮,设置点击的函数和控制器.

ps:tab-dash.html文件中创建了按钮

 <div ng-controller="countController">
<button ng-click="handleClick()">点击</button>
</div>

然后在app.js文件中,实现调用的函数
16

至此,在项目的目录中,运行如下命令:

sudo ionic platform update ios
sudo ionic build ios

然后用Xcode打开iOS项目运行即可。

如若打的iOS项目中plugins文件夹不包括OC文件,请手动删除整个platform文件夹,重新执行:
sudo ionic platform add ios
sudo ionic build ios

结果如下:
演示如下
源代码下载