码迷,mamicode.com
首页 > 移动开发 > 详细

PhoneGap(Cordova)通过自定义plugin插件实现javascript与android交互

时间:2016-05-03 18:17:24      阅读:310      评论:0      收藏:0      [点我收藏+]

标签:

一.配置相关环境


1,安装jdk jdk-7u79-windows-x64.exe (应该是64-Bit Server VM 版本,若不是需要调换否则eclipse启动不起来)
配置环境变量
2,安装node,node-v4.2.4-x64.msi
3,安装cordova 。命令:npm install -g cordova@版本号(若是最新的话,就不需要加 @版本号)
4,安装sdk。 installer_r24.3.3-windows.exe
5,安装 apache-ant,复制 apache-ant-1.9.6-bin 文件夹到任意位置,并配置 ANT_HOME
6,安装ADT,可以从网上下载后安装,也可以在线安装,但都很慢。可以复制Android-sdk文件夹下所有内容到任意位置,可以与 apache-ant-1.9.6-bin 放在同一个目录下
配置环境变量 ANDROID_HOME 指到 Android-sdk 目录下
7,打开 eclipse-SDK-3.7.2-win32-x86_64 中的eclipse.exe 启动 eclipse ;
修改:SDK path 使其指向Android-sdk 目录 .preferences–>Android
8,重启Eclipse
9,Eclipse连接手机联调:
a,连接手机到电脑 安装手机驱动程序
b,打开手机中的 开发者模式 开启 USB联调功能

二、创建工程(使用命令行)


1.安装phonegap,cordova
命令:
npm install -g phonegap
npm install -g cordova@4.2.0(以版本号为4.2.0为例)
2.查看版本号
命令:
phonegap -version
cordova -version
3.创建phonegap工程
命令:
1.切换盘符(需要创建工程的目录 ,例:d: cd demo)
2.cordova create hello com.example.hello HelloWorld(在hello文件夹下创建一个HelloWorld工程)
3.cd hello
4.cordova platform add android
5.cordova build
(如果不出什么问题,此时工程已创建完毕。在D:demo/hello/platforms/android中就是Android工程)

技术分享

三、编写插件


1.将创建好的工程导入Eclipse(File–>Import–>Android–>Existing Android Code Into Workspace)
技术分享

技术分享
注意:导入工程后,需要将www文件夹以及config.xml文件的根目录修改一下
(右键选中对应的文件,点击Propreties选项进行路径修改)
技术分享
技术分享

修改完毕后,点击Project–>clean一下
2.编写插件
<1>配置 cordova _plugins.js 文件
在www文件夹下创建cordova _plugins.js 文件。
技术分享

这里要配置2个地方:
(1)module.exports= [{}];
技术分享
file 代表 javascript写的接口位置
id 代表 唯一
merges(clobbers) 代表你在 javascript中调用该接口的语句 (类似activity中的 getApplication() 等等 ;就是个调用语句)
(2)module.exports.metadata = { }
技术分享

配置id标号随意(不要与其他的标号重复)

<2>编写javascript接口文件(bluetooth.js)
技术分享

技术分享

<3>在res/xml 目录下配置 config.xml 文件
技术分享

feature的name属性 非常重要
name必须是步骤<2>中 function中调用的类名
value属性指定插件在src目录下的java文件 (命名空间)
<4>在Javascript中调用插件
方法:技术分享

技术分享

四、编译工程,调用插件


自定义插件类MyPlugins继承自CordovaPlugin重写execute()方法实现与JS的交互
技术分享

(如有错误,欢迎指正!)

PhoneGap(Cordova)通过自定义plugin插件实现javascript与android交互

标签:

原文地址:http://blog.csdn.net/he_666/article/details/51303752

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!