Android 和 Cordova 混合开发 以及自定义插件
写在开始 :
主要介绍了在Android平台上使用Cordova 开发 JS/HTML 程序 , Cordova 提供了一些设备相关的API, 通过api 可以通过 js 调用访问原生的设备功能 例如 摄像头, 麦克风等功能, 提供了统一的javascript 类库, 以及为这些类库所用的设备相关的原生代码后台.
一 , 安装Cordova 开发环境
Cordova 命令行开发工具使用NPM工具包.
1 需要下载安装 Node.js 我当时下载的时候翻墙下载的,
2 安装 cordova 在dos 窗口输入下面的命令全局安装
npm install -g cordova
-g 代表全局安装
二 创建应用
使用 dos 窗口来创建应用
1 在文件目录下创建一个应用
// 路径名> cordova create [项目名] [包名]
cordova create CordovaDemo com.storm.cordovademo
1.1 Android studio 的安装 和sdk 的安装就不介绍了 安装步骤大家都会
2 在项目中添加Android 平台 进入到项目目录下
// cordova platform add [平台名]
cordova platform add android
创建成功后通过Android Studio 导入项目
导入cordova目录下android平台.png
编译后项目目录如图所示
导入完成的目录结构.png
集成完成后 运行 显示
运行结果 .png
这样 就完成了在AS 中集成的cordova项目
二 自定义插件
1 在cordova 中提供了一些常用的插件供大家使用
// 获取当前应用的版本号
cordova plugin add cordova-plugin-app-version
// 获取网络连接信息
cordova plugin add cordova-plugin-network-info
// 获取 GPS 信息
cordova plugin add cordova-plugin-geolocation
// 获取设备信息
cordova plugin add cordova-plugin-device
// 调用设备上的摄像头
cordova plugin add cordova-plugin-camera
// 在设备上读/写
cordova plugin add cordova-plugin-file
// 文件上传或者下载
cordova plugin add cordova-plugin-file-transfer
// 获取设备上联系人的信息
cordova plugin add cordova-plugin-contacts
// 二维码扫描和创建
cordova plugin add phonegap-plugin-barcodescanner
还有好多 自行百度
二 自定义插件 流程
1 安装 plugman , cordova 需要使用这个来创建插件
// -g 代表全局安装
npm install -g plugman
2 安装完成后 使用pluginman 创建一个插件
// plugman create --name[插件名] --plugin_id[插件ID] --plugin_version[插件版本号]
plugman create --name ToastPlugin --plugin_id cordova-plugin-toast --plugin_version 1.0.0
创建完成后 打开cordova 的项目 可以看到这个文件夹
插件所在的文件夹.png
插件文件夹下的目录.png
生成的插件目录如下
插件目录.png
如果规范的Android 插件的话 在src目录下新建android 目录 并且在android 目录下新建类
目录如下 :
添加android后目录.png
一般我使用命令 进入到插件目录下创建目录
plugman platform add --platform_name android
3 创建完成后
修改plugin.xml 文件中的配置
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-toast-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>ToastPlugin</name>
<js-module name="ToastPlugin" src="www/ToastPlugin.js">
<clobbers target="navigator.toast"/>
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="ToastPlugin"><param name="android-package" value="org.apache.cordova.toast.ToastPlugin"/></feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml"></config-file>
<source-file src="src/android/ToastPlugin.java" target-dir="src/org/apache/cordova/toast"/>
</platform>
</plugin>
添加到android项目中.png
plugin id 为插件的id 后面为版本号 插件名字
js-module 在项目中 asset下的plugin 目录下js文件 也就是 插件需要的js文件
feature name value 对应android 项目中/ res/xml/config.xml 文件下的 feature 标签的值
config.xml
source-file 标签对应 了 我们android 编写的java文件 以及放置的目标位置 一一对应
image.png
image.png
4 然后就是修改js文件
js文件
其中的 toast 对应plugin.xml文件feature的name
showToast 对应 js 中调用的方法
image.png
和这个对应 js响应成功后调用这个方法
5 准备生成package.json文件
package.json
生成流程如下 : 创建module
1 命令行进到插件目录下 输入
npm init
然后会有提示信息 具体描述可以看的出来 直接回车生成就可以 , 生成之后也可以修改
image.png
然后 还需要增加一些
image.png
{
"name": "toastplugin",
"version": "1.0.0",
"description": "",
"cordova": {
"id": "cordova-toast-plugin",
"paltforms": [
"android"
]
},
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "storm",
"license": "ISC"
}
添加控件的Id 和 平台
6 准备完成后 向android 项目中加入插件
进入到项目android 平台的目录 :
cordova plugin add D:\working\Cordova\Demo\ToastPlugin
添加完成.
移除插件
cordova plugin remove cordova-toast-plugin
即可移除
添加成功后 在android 项目目录下会多出以下文件
image.png
image.png
未完待续....
