android studio cordova插件,自定义cordova插件-入门

环境准备

安装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也不熟悉,所以...