寫在開始 :
主要介紹了在Android平臺(tái)上使用Cordova 開發(fā) JS/HTML 程序 , Cordova 提供了一些設(shè)備相關(guān)的API, 通過api 可以通過 js 調(diào)用訪問原生的設(shè)備功能 例如 攝像頭, 麥克風(fēng)等功能, 提供了統(tǒng)一的javascript 類庫(kù), 以及為這些類庫(kù)所用的設(shè)備相關(guān)的原生代碼后臺(tái).
一 , 安裝Cordova 開發(fā)環(huán)境
Cordova 命令行開發(fā)工具使用NPM工具包.
1 需要下載安裝 Node.js 我當(dāng)時(shí)下載的時(shí)候翻墻下載的,
2 安裝 cordova 在dos 窗口輸入下面的命令全局安裝
npm install -g cordova
-g 代表全局安裝
二 創(chuàng)建應(yīng)用
使用 dos 窗口來(lái)創(chuàng)建應(yīng)用
1 在文件目錄下創(chuàng)建一個(gè)應(yīng)用
// 路徑名> cordova create [項(xiàng)目名] [包名]
cordova create CordovaDemo com.storm.cordovademo
1.1 Android studio 的安裝 和sdk 的安裝就不介紹了 安裝步驟大家都會(huì)
2 在項(xiàng)目中添加Android 平臺(tái) 進(jìn)入到項(xiàng)目目錄下
// cordova platform add [平臺(tái)名]
cordova platform add android
創(chuàng)建成功后通過Android Studio 導(dǎo)入項(xiàng)目
編譯后項(xiàng)目目錄如圖所示
集成完成后 運(yùn)行 顯示
這樣 就完成了在AS 中集成的cordova項(xiàng)目
二 自定義插件
1 在cordova 中提供了一些常用的插件供大家使用
// 獲取當(dāng)前應(yīng)用的版本號(hào)
cordova plugin add cordova-plugin-app-version
// 獲取網(wǎng)絡(luò)連接信息
cordova plugin add cordova-plugin-network-info
// 獲取 GPS 信息
cordova plugin add cordova-plugin-geolocation
// 獲取設(shè)備信息
cordova plugin add cordova-plugin-device
// 調(diào)用設(shè)備上的攝像頭
cordova plugin add cordova-plugin-camera
// 在設(shè)備上讀/寫
cordova plugin add cordova-plugin-file
// 文件上傳或者下載
cordova plugin add cordova-plugin-file-transfer
// 獲取設(shè)備上聯(lián)系人的信息
cordova plugin add cordova-plugin-contacts
// 二維碼掃描和創(chuàng)建
cordova plugin add phonegap-plugin-barcodescanner
還有好多 自行百度
二 自定義插件 流程
1 安裝 plugman , cordova 需要使用這個(gè)來(lái)創(chuàng)建插件
// -g 代表全局安裝
npm install -g plugman
2 安裝完成后 使用pluginman 創(chuàng)建一個(gè)插件
// plugman create --name[插件名] --plugin_id[插件ID] --plugin_version[插件版本號(hào)]
plugman create --name ToastPlugin --plugin_id cordova-plugin-toast --plugin_version 1.0.0
創(chuàng)建完成后 打開cordova 的項(xiàng)目 可以看到這個(gè)文件夾
生成的插件目錄如下
如果規(guī)范的Android 插件的話 在src目錄下新建android 目錄 并且在android 目錄下新建類
目錄如下 :
一般我使用命令 進(jìn)入到插件目錄下創(chuàng)建目錄
plugman platform add --platform_name android
3 創(chuàng)建完成后
修改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>
plugin id 為插件的id 后面為版本號(hào) 插件名字
js-module 在項(xiàng)目中 asset下的plugin 目錄下js文件 也就是 插件需要的js文件
feature name value 對(duì)應(yīng)android 項(xiàng)目中/ res/xml/config.xml 文件下的 feature 標(biāo)簽的值
source-file 標(biāo)簽對(duì)應(yīng) 了 我們android 編寫的java文件 以及放置的目標(biāo)位置 一一對(duì)應(yīng)
4 然后就是修改js文件
其中的 toast 對(duì)應(yīng)plugin.xml文件feature的name
showToast 對(duì)應(yīng) js 中調(diào)用的方法
和這個(gè)對(duì)應(yīng) js響應(yīng)成功后調(diào)用這個(gè)方法
5 準(zhǔn)備生成package.json文件
生成流程如下 : 創(chuàng)建module
1 命令行進(jìn)到插件目錄下 輸入
npm init
然后會(huì)有提示信息 具體描述可以看的出來(lái) 直接回車生成就可以 , 生成之后也可以修改
然后 還需要增加一些
{
"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 和 平臺(tái)
6 準(zhǔn)備完成后 向android 項(xiàng)目中加入插件
進(jìn)入到項(xiàng)目android 平臺(tái)的目錄 :
cordova plugin add D:\working\Cordova\Demo\ToastPlugin
添加完成.
移除插件
cordova plugin remove cordova-toast-plugin
即可移除
添加成功后 在android 項(xiàng)目目錄下會(huì)多出以下文件
未完待續(xù)....
