随着项目的发展,越来越多的项目都是用webAPP的形式实现的,但在其中难免需要用到原生插件,我们拿cordova来举例:
一、创建ionic项目
1.安装node.js npm
1.1打开终端,逐步输入一下命令行,来查看是否安装node.js 和 npm
$ npm -v
$ node -v
如果npm或者node可能并非最新版本或者没有安装,可以到nodejs官网下载最新版本.
当然也可以通过git命令行下载(不建议,太慢了)
下载完成后,在终端上重新执行以上两行命令。
2.安装ionic和cordova包
2.1终端输入一下命令行:
$ sudo cnpm install -g cordova ionic
ps:等待时间较长,耐心等候
2.2安装成功后,终端中输入一下命令行查看报内容:
$ ionic info
**ps:不安装的情况下就是不能在此环境下编译等,但是对于浏览器运行无影响.**
`ios-sim`代表模拟器运行环境,
`ios-deploy`代表真机运行环境。
按照提示安装
我只装了模拟器运行环境。
3、创建ionic项目
终端运行
$ cd ./Desktop //进入桌面
$ sudo ionic start testDemo blank
漫长的等待。。。
完成后,我们会在桌面上看见一个testDemo文件,该文件的目录构成如下
添加iOS平台
$ ionic platform add ios (可能会需要sudo)
获得该文件的操作权
$sudo chmod -R 777 . (包括句号,不要漏掉了)
ionic build ios
ionic emulate ios //模拟器运行
至此,ionic项目创建完毕。
关掉终端。
二、创建iOS原生插件
安装plugman
$ sudo npm install -g plugman
创建插件
$ cd desktop
plugman create --name <pluginname> --plugin_id <pluginid> --plugin_version 0.0.1。
例如:
$ sudo plugman create --name testDemoPlugin --plugin_id com.plugin.testDemoPlugin --plugin_version 0.0.1
添加ios平台
$ cd testDemoPlugin
$ sudo plugman platform add --platform_name ios
$sudo plugman createpackagejson (插件路径) //给插件添加package.json文件
$ sudo chmod -R 777 .//获得该插件的操作权限。
此时再看,src文件夹里面增加了iOS文件。
四、给cordova项目添加插件
回到上面建立的cordova项目中
$ cd testDemo
$ sudo ionic cordova plugin add Users/zhangxu/Desktop/testDemoPlugin(你创建的插件的路径)
完成之后,就将你创建的那个自定义插件添加到了该项目中
-------------------------------------------------------------
第四步完成之后,许多同学可能会纳闷,到现在了,怎么还没用到原生的代码呢,并且,创建的两个不知道是什么的东东后,里面的iOS模块都是自己生成的,根本就没有我们自己写的代码的踪影。
不要急,往下看
我们只需将写好的iOS原生代码全部移植到插件的src/ios文件下就可以了。