[ios开发Cordova插件] - 安装及项目创建
引言:
cordova这个工具出现后,可以通过h5编写代码,直接打包出ios及android的安装包.让不少公司萌发出节省成本利用h5开发原生app的想法.
然而此类app遇到与手机系统层交互的时候,还是很是蛋疼.网上虽有一些通用插件,但不一定适用产品业务.
例如需要给摄像功能加一个蒙版或者要开发自定义原生控件增加交互体验时,就一脸懵逼样了.这时候还是需要我们oc来开发一些插件给他们使用.
那么开发cordova插件前,首先我们要学会使用及安装这个想让我们OC失业的工具.
本文仅针对ios开发者,初次涉及cordova插件开发
教程目录如下,请根据自己进度自行选择阅读
1.拥有X-Code
2.安装node.js环境
3.使用终端安装cordova
4.创建及运行项目
5.在项目中开发支持入参及回调的插件
一.安装X-Code
!粗滚请的Code-X装没
二.安装Node.js环境
首先进入官网下载Node.js 然后安装
nodeJS环境下载1.png
三.使用终端命令安装cordova
打开终端输入安装命令:
sudo npm install -g cordova
输入电脑密码后等待一会就能安装成功了.如下图
install Cordova 1.png
器大的人已经安装成功了,如果你器小可以选择神油或如下解决方案
-
如果你没有安装GIT Client，请自行下载安装。
-
去Cordova命令行帮助查找关于你问题的命令
四.创建项目
1.首先请建立一个文件夹,并通过终端cd进去 不然创建的项目在根目录下 你都很难找到它
cordova great prj 1.png
2.通过终端命令创建一个项目
cordova create firstCordovaDoc com.aimi.firstCordova firstCordova
参数解释:
-
firstCordovaDoc:对应你整个项目的文件夹名称
-
com.aimi.firstCordova:对应至之后ios工程的bundleID
-
firstCordova:对应至之后ios工程名
3.为项目创建ios工程
首先通过终端进入项目文件夹
cd firstCordovaDoc
greate cordova ios.png
输入终端命令创建ios工程
cordova platform add ios
cordova_ios_plt_2.png
这时候在项目文件夹下的"platforms"文件夹中会多出ios文件夹,进入后就可以看到ios工程了.
cordova_greate_ios3.png
最后我们来试用一下Cordova,cordova的开发是使用h5开发
所以我们先找到其入口Index.html文件,如下图
注意是在Staging文件夹下的index.html文件,而非根目录一下那个
useCaFst1.png
简单写一点html代码,替换index.html中的代码,看看混合开发的h5 app应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面标题</title>
</head>
<body>
<h1 align="center">
YO!Man!
</h1>
</body>
</html>
自己去看一下运行效果吧,必须和原生效果是不能比的
五.在项目中开发互相调用的插件
创建好项目之后,就可以进行插件开发了
这里我们做一个oc及js互相伤(diao)害(yong)的小Demo
文章不想太长,故进行了分类,插件的开发点上面连接跳转吧.
