简介

ionic 是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

环境搭建

Node.js的安装请看我上一篇简书,在这里我就不多说了

1.安装plugman插件,终端输入

sudo npm install -g plugman```
 以管理员权限安装

####2.新建一个自定义插件ZJPlugman，用弹框显示我们的内容
终端任意目录下输入
plugman create --name #pluginName# --plugin_id #pluginID# --plugin_version #version# [--path <directory>] [--variable NAME=VALUE]

把#pluginName#替换为 ZJPlugman。
把#pluginID# 替换为 cordova.plugin.ZJPlugman
把#version# 替换为 0.0.1
[--path <directory>] [--variable NAME=VALUE] 这两个是可选参数，这里不写了。这样会在当前目录下（desktop）创建一个新的目录ZJPlugman

plugman create --name ZJPlugman --plugin_id cordova.plugin.ZJPlugman --plugin_version 0.0.1

文件夹目录如下

![Paste_Image.png](https://img.haomeiwen.com/i1097226/f86c2d653edff36b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####3.在插件中添加平台
向ZJPlugman项目中添加Android和ios平台，把platform替换为android和ios即可，首先进入插件文件路径，然后添加Android和iOS平台

cd ZJPlugman
plugman platform add --platform_name android
plugman platform add --platform_name ios

我这里只添加了iOS平台，文件目录如下

![Paste_Image.png](https://img.haomeiwen.com/i1097226/a79187666a1de333.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####4.解读生成文件
1.先看配置文件：plugin.xml

![Paste_Image.png](https://img.haomeiwen.com/i1097226/29cfcad2422c5a9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这样看有点乱 将其复制出来再[JSON](http://json.cn/)解析工具上查看在这里我就简单的标记几个
>解释一下关键的几个元素：
(1) id：插件标识，即一开始我们创建插件时输入的cordova.plugin.ZJPlugman
(2) name:插件名称，即新建插件是输入的ZJPlugman
(3) js-module:对应的javascript文件路径，src属性指向www/ZJPlugman.js
(4) platform:支持的平台，就是刚才我们这是刚才我们通过“ plugman platform add --platform_name ios ”添加进来的，这里是安卓和iOS的插件配置信息。


![Paste_Image.png](https://img.haomeiwen.com/i1097226/3c306bc08a792a85.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.介绍下www/ZJPlugman.js文件
>步骤很简单:
第一步是引入cordova下的exec库；
第二步是执行插件方法
exec(success, error, "DZFPlugin", "coolMethod", [arg0]);
success:调用成功时的回调方法
error :调用失败时的回调方法
"DZFPlugin" ：是插件的名称
"coolMethod" :执行插件里的方法，即原生的方法
[arg0]：可选参数，执行方法的参数数组
最后的js文件方法如下，由于只是做了一个demo，所以原生方法名字还是用的插件自带原生文件的类名，秩序自己替换成自己定义的原生方法名字即可。

![Paste_Image.png](https://img.haomeiwen.com/i1097226/c72007b5148367dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#安装自定义插件
根据[上一篇](http://www.jianshu.com/p/fbd666fd2977)简书生成的demo，进行示例

进入到项目目录下,我这里的demo叫FirstIonic
sudo cordova plugin add plugin-id或者插件路径 ---------本项目是插件的本地路径，是否安装成功请见下图，以iOS为例。

![Paste_Image.png](https://img.haomeiwen.com/i1097226/7580d4fb1181019c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
查看工程会发现工程目录下已经将插件集成成功

![Paste_Image.png](https://img.haomeiwen.com/i1097226/0ad0dbaeb08fd827.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
打开项目目录下的platforms/ios 就能看到你的iOS项目工程 运行起来

![Paste_Image.png](https://img.haomeiwen.com/i1097226/393a82c8c1e276db.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#第一个插件小项目
打开你的项目 会发现项目里有两个www  我们打开Staging 目录下的www
找到文件`/Staging/www/templates/tab-dash.html`进行编辑
添加如下代码

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

![Paste_Image.png](https://img.haomeiwen.com/i1097226/d4d2088918fed0e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
然后再进到`Staging/www/js/controllers.js`进行编辑
添加如下代码

.controller('CustomMethodController', function($scope){
$scope.handleClick = function() {
successCallBack = function(num) {
alert(num);
}
errorCallBack = function(data) {
alert(data);
}
cordova.plugins.ZJPlugman.coolMethod("调用成功了~",successCallBack,errorCallBack);
}
})

![Paste_Image.png](https://img.haomeiwen.com/i1097226/da3aea412f4591cf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#展示项目

![Paste_Image.png](https://img.haomeiwen.com/i1097226/9a287f42b0fd3c9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
点击按钮

![Paste_Image.png](https://img.haomeiwen.com/i1097226/30a7ca9a5705be28.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

[FirstIonic例子](https://github.com/948769029/FirstIonic)点击下载
---
#结束语
到这里就结束了，如若不懂的话可以👇留言，也可以加入群讨论
喜欢的话 记得关注、收藏、点赞哟
###群号：[552048526]()