自定义cordova插件-入门

环境准备

• app开发环境配置
• 使用webstorm编写前端代码,当然你也可以使用其他ide
• 使用android studio编写android代码和插件调试,第一次安装可能会有些坑,,参考如下:
  Android Studio安装教程
  Android Studio安装配置教程

安装android studio请备份一下你的android sdk tools下的templates文件夹,因为安装android studio有可能会被删除.导致如下图打包异常

参考

• 如果遇到android开发问题请积极百度,android开发已经很成熟了,一定能解决问题

项目准备

• 准备一个cordova项目,用于安装插件.可以是任何cordova项目不一定是ionic项目
• 为了方便调试和运行快速,建议创建一个新项目.可以参考这里创建一个ionic新项目
• 保证此项目可以正常打包,用于说明开发环境没有问题

为了演示我刚刚新建了一个ionic项目ionic start ionic_test tabs --cordova

全局安装plugman

• plugman用于创建插件,安装过程如下图

cnpm i -g plugman

• 可以通过plugman -h查看plugman提供的命令及参数.
  
  

创建插件

• 如下图我在D盘根目录创建了一个插件并添加了android平台,也生成了package.json文件. 插件名:nativeLocation,插件id:com.kit.cordova.nativeLocation,版本:0.0.1

package.json是插件描述文件,如果插件只是自己用可以不用生成

plugman create --name nativeLocation --plugin_id com.kit.cordova.nativeLocation --plugin_version 0.0.1
cd nativeLocation\
plugman createpackagejson ./
plugman platform add --platform_name android
plugman platform add --platform_name ios 

安装插件

• 安装插件到准备好的cordova项目中

cordova plugin add D:\nativeLocation

• 插件结构如下图

  
  
  

调用插件

• 查看nativeLocation.js可以看到这个js文件exports了一个coolMethod函数,这个函数有3个参数.第一个参数类型不限作为数组的第一项传入到插件中,第二个和第三个分别是成功和失败回调函数
  

  

• 查看plugin.xml可以看到这个nativeLocation.js对应的cordova调用方法是放到cordova.plugins.nativeLocation命名空间下
  

  

• 调用代码如下,注意coolMethod()是三个参数

declare var cordova;
 click(){
    cordova.plugins.nativeLocation.coolMethod(777, res => {
      // 你也可以把res输出在页面上  this.data = res;    {{data|json}}
      console.log(res);
    }, err => {
      console.log(err);
    })
  }

• 调试插件,需要在真机调试

 cordova platform rm android
 cordova platform add android
 cordova run android

ionic项目修改了src目录下的代码需要先ionic serve或者ionic build或者使用ionic cordova run android运行项目.为了使修改后代码放到www目录下

• 如下图点击按钮,插件成功输出我们的传入的参数.说明插件已经成功安装

  
  
  

• 以上就是创建并安装一个最简单的cordova插件的过程

使用Android Studio打开项目

• 如下图用Android Studio选择你的app项目>platforms>android目录
  

  

• 如果你是第一次用Android Studio打开项目,可能会像下图1界面卡很长时间(超过一分钟),它正在下载gradle,gradle比较大(67M)下载比较慢

• 你可以在进程杀掉Android Studio,然后手动去这里下载,下载哪个版本?看图2.打开你的dists目录,一一点击每个gradle-*目录,看哪个目录gradle*.jar为空(图3)就下载哪个版本,并把下载的jar放进去(图4)

• 然后在用Android Studio打开项目.注意项目是你的app项目>platforms>android目录

图1

图2

图3

图4

• Android Studio打开界面.有时候需要刷新一下如下图

  
  
  

• 用usb连接手机和电脑.点击调试按钮选择连接的手机,在真机上运行
  

  

• 运行到真机上后,点击app页面上的按钮可以在Studio控制台上看到日志信息.这里的控制台就是输出android app运行的日志.app插件bug,闪退等常见问题均可以在这里看到错误日志

  
  
  

插件优化

• 找到插件文件.发现包名太长,Java类名以小写开头.我们先直接在Studio上修改.(以后的plugman可能会对创建的插件有优化 )
  

  

• 修改后类名大写,删除一层包名.

  
  
  

• 如下图点击gradle clear

  
  
  

• 选择android,继续点击调试按钮在真机上运行确保修改没问题

  
  
  

修改插件

• 回到webstorm,如下图删除插件目录中的nativeLocation.java文件.把Studio上的NativeLocation.java复制进来
  

  

• 修改plugin.xml.如下图1和图2分别为修改前后.修改内容看图2标注
  

  

  图1
  
  
  

  图2

• ionic新建的项目id默认是io.ionic.starter.如下图修改成自己的id保证唯一,我这里修改为com.kit.ionicTest
  

  

• 修改完成在真机运行调试.用cordova命令打包运行,不是用Studio运行

 cordova platform rm android
 cordova platform add android
 cordova run android

• 注意执行cordova platform rm android会删除你的app项目>platforms>android目录.所以最好备份一下.如下图

本次简单修改可以不备份.以后在Studio上开发了许多代码就需要备份

总结

• 插件开发步骤

1用plugman创建插件原型并把插件安装到cordova项目中
2.用cordova生成android项目.cordova platform add android
3用Android Studio编辑android项目.(可以实现任何功能,需要懂Java开发语言 )
4把在Android Studio上开发的功能的代码等资源文件拷贝到插件中
5在插件的plugin.xml文件中"描述“android”资源文件放在android项目中的什么位置

• iOS开发步骤和android类似.本人不懂iOS开发语言,对xcode也不熟悉,所以...

• 自定义cordova插件-进阶