环境准备
- 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也不熟悉,所以...
网友评论