关于ionic2自定义插件开发的文章,插件怎么调用的文章,好像网上都有,不过作为一个新手来说,从插件的开发到某个页面怎么调用,没有一个完整的过程的话,两篇没有关联的文章也容易看的迷糊。这里放到一起来方便后来人吧。

1、安装plugman

npm install -g plugman。

2、生成插件框架

plugman create --name <pluginname> --plugin_id <pluginid> --plugin_version 0.0.1

如:plugman create --name MyPlugin --plugin_id com.test.helloworld --plugin_version 0.0.1。

执行完之后会自动帮我们生成一套代码框架,这个放哪里生成都一样的,这里我以项目根目录为例。执行之后根目录多了一个文件夹,如图:

这个时候src下面是空的。

3、添加平台支持

进入插件目录,运行相应的平台支持命令

这里以android为例,ios也是一样的。

现在src下面就多了个目录了,如图:

4、安装插件

进入项目的根目录

ionic plugin add 你插件的存储路径

如:

ionic plugin list看一下,如图:

到了这里,最后一个问题来了,怎么调用呢?

1、在你的ts文件中定义一个方法,如图:

2、因为是ts,在这个ts的@Component之前,import之后,写一句declare let cordova: any;不然会报错。因为ts里要给他申明类型。

3、页面定义一个单击事件,调用fun()。

cordova.plugins.MyPlugin.coolMethod方法哪来的,你看看MyPlugin.js这个文件里面就知道了。

ionic2踩坑之自定义插件开发及调用的更多相关文章

  1. ionic2踩坑之文本域自适应高度(自定义指令,适用angular2)

    话不多说,看代码: import { Directive, ElementRef, HostListener,Input, Renderer, Component } from '@angular/c ...

  2. ionic2踩坑之订阅发布模式的实现

    原文地址:http://www.cnblogs.com/eccainiao/p/6429536.html 转载请说明. 在ionic2中实现订阅发布模式,需要用到Events. Events下面有三个 ...

  3. Springcloud踩坑记---使用feignclient远程调用服务404

    公司项目进行微服务改造,由之前的dubbo改用SpringCloud,微服务之间通过FeignClient进行调用,今天在测试的时候,eureka注册中心有相应的服务,但feignclient就是无法 ...

  4. ionic2踩坑之ionic resources失败

    网上关于ionic2怎么修改应用图标和启动画面资料也挺多的.不过大家执行ionic resources的时候不少人都执行失败了,关于执行失败的原因网上很少.下面分享一下我的经验吧. 1.看自己的项目下 ...

  5. ionic2踩坑之兼容android4.3及以下版本

    一个命令就行了 ionic plugin add cordova-plugin-crosswalk-webview --save 执行完之后重新打包. 但是如果要兼容4.0及以下的话.... 帮不了你 ...

  6. ionic2踩坑之ionic build android报错

    自己项目一直跑的好好好好的,build还是run都没问题,今天忽然一个小伙伴build一直报错.\ 错误如下: Error occurred during initialization of VMCo ...

  7. C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式

    C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...

  8. Spark踩坑记——共享变量

    [TOC] 前言 Spark踩坑记--初试 Spark踩坑记--数据库(Hbase+Mysql) Spark踩坑记--Spark Streaming+kafka应用及调优 在前面总结的几篇spark踩 ...

  9. Android SDK 开发——发布使用踩坑之路

    前言 在 Android 开发过程中,有些功能是通用的,或者是多个业务方都需要使用的. 为了统一功能逻辑及避免重复开发,因此将该功能开发成一个 SDK 是相当有必要的. 背景 刚好最近自己遇到了类似需 ...

随机推荐

  1. RTMP、RTSP

    一.参考网址 1.RTMP.RTSP.HTTP视频协议详解(附:直播流地址.播放软件) 2.海康RTSP流转RTMP并推送至WEB端展示 3.使用FFmpeg将rtsp流摄像头视频转码为rtmp播放 ...

  2. Python 模拟 Base64编码

    Base64编码原理:https://blog.csdn.net/wo541075754/article/details/81734770 def Enbs64(s): # 编码后的结果 result ...

  3. Hibernate(三)--关联映射

    1.多对一 product----category category.hbm.xml <?xml version="1.0"?> <!DOCTYPE hibern ...

  4. php随机生成国内IP

    public function rand_ip(){ $ip_long = array( array('607649792', '608174079'), //36.56.0.0-36.63.255. ...

  5. thinkCMF图片上传选择已上传图片

    1.找到上传图片的模板页面 webuploader.html 在上传文件标签后面 添加 <li class=""><a href="#explorer& ...

  6. R语言 批量下载财务报表

    getsheets <- function(symbol,type,file){ pre="http://money.finance.sina.com.cn/corp/go.php/v ...

  7. Storm 重启排查

    Storm实战常见问题及解决方案 https://www.cnblogs.com/catkins/p/5302634.html Storm 重启排查(续) https://www.iteye.com/ ...

  8. 吴裕雄--天生自然 JAVA开发学习:条件语句

    public class Test { public static void main(String args[]){ int x = 10; if( x < 20 ){ System.out. ...

  9. 用FFmpeg+nginx+rtmp搭建环境实现推流

    Windows: 1.下载文件: 链接:https://pan.baidu.com/s/1c2LmIHHw-dwLOlRN6iTIMg 提取码:g7sj 2.解压文件: 解压到nginx-1.7.11 ...

  10. vue 常用知识点

    1.数据变更,页面渲染完成 this.$nextTick(function(){ alert('v-for渲染已经完成') }) 2.iview select组件 setQuery用法 <Sel ...