Cordova iOS原生组件创建并调用

最近在学习混合开发 对于iOS原生组件的创建并使用 分享并记录一下自己的经验 希望对新人有所帮助(我使用的是cordova + vue 进行开发)

1.创建一个cordova项目，并添加iOS platforms

cordova create CordovaProject

cd CordovaProject/

cordova platform add ios --save

2.创建插件

plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]

cd ..

plugman create --name CHPlugin --plugin_id CHPlugin --plugin_version 1.0.0

3.使用xcode创建源文件，在src目录下中创建ios文件夹 并将源文件放入其中

注意创建出来的类要继承CDVPlugin类

.h文件

.m文件

4.修改plugin.xml中的内容 并添加一个package.json文件

plugin.xml

修改完后的内容

修改完后的plugin.xml

要添加的json文件

package.json

5.修改www中的js文件

CHPlugin.js

这样一个原生组件基本就完成了，接着把这个组件加入到cordova项目中

6.把组件加入项目

cd CordovaProject/

cordova plugin add 【CHPlugin路径】

补充 ：（cordova plugin rm 【组件名称】//删除组件）

提示如上图表示项目安装组件成功了

7.在vue中使用这个组件

在index.html中加入如下代码

index.html

在需要的地方使用

然后打包 npm run build 将dist文件中的内容复制到CordovaProject/platforms/ios/www 目录下 然后运行项目

8.大功告成

有些教程上会让我们修改config.xml 还有其他一些文件中的内容 其实是不用的 使用了cordova plugin add 命令系统会自动的帮我们填写其中的内容

忽略后面的页面 点击callnative就可以调用原生方法了

让我不解的是cordova这个目录结构 为什么iOS文件夹下还有个www目录 这个www目录不应该是各个平台共享的吗

有什么说的不对的地方欢迎大家指教