天天看點

Cordova+Android的項目建立和自定義插件的使用

一、環境的配置 由于cordova是利用nodeJS進行管理的,是以需要先下載下傳nodeJS,其中包含了npm的管理器。

1、首先通過指令:$ npm install -g cordova 安裝cordova環境,坐等安裝完成即可........
	2、輸入指令後 cordova -v顯示10.0.0(當然這是我的版本)代表安裝成功了
	3、添加Java開發環境的JDK
	4、添加Android開發環境的SDK
           

二、cordova的項目建立

1、cordova create HelloCordova

io.cordova.hellocordova HelloCordovaPro
HelloCordova  是項目的目錄名稱。
io.cordova.hellocordova 是包名
HelloCordovaPro    是您應用的項目名稱。
eg: 本人指令行工具使用的git bash,Cordova項目建立在D盤下:$ cordova create HelloCordova io.cordova.hellocordova HelloCordovaPro
           

2、給 Cordova 項目添加 android 環境,進入 Cordova 項目目錄

$ cd HelloCordova
$ cordova platform add android --save
           

三、自定義插件

Cordova自定義插件開發步驟

(一)建立Cordova項目

在建立項目前請確定安裝Cordova

Cordova環境配置:https://www.w3cschool.cn/cordova/cordova_environment_setup.html

在即将建立的Cordova項目存放目錄打開指令視窗,輸入建立指令

cordova create HelloCordova cn.com.xxxxxxx.hellocordova HelloCordovaPro

HelloCordova 是項目的目錄名稱。

cn.com.xxxxxxx.hellocordova 是包名

HelloCordovaPro 是您應用的項目名稱。

eg: 本人指令行工具使用的git bash,Cordova項目建立在D盤下:$ cordova create HelloCordova cn.com.xxxxxxx.hellocordova HelloCordovaPro

(二)安裝依賴plugman

plugman是用于安裝和解除安裝用于Apache Cordova項目的插件的指令行工具。

https://www.npmjs.com/package/plugman

eg:

進入項目目錄,安裝plugman

$ cd HelloCordova

$ npm install -g plugman

(三)建立插件

定義一個最簡單的Toast插件

1、插件建立

plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]

為了友善管理,将插件建立在 Cordova 項目目錄下的 plugins 檔案夾下(注意起名,不要和原生方法沖突了。)

eg:

$ cd HelloCordova

$ mkdir plugins

$ cd plugins

$ plugman create --name ToastDemo --plugin_id cordova-plugin-toastdemo --plugin_version 1.0.0

2、插件配置

進入插件目錄,添加插件支援的平台環境

$ cd ToastDemo

$ plugman platform add --platform_name android (根據需要是IOS還是android)

$ plugman platform add --platform_name ios (根據需要是IOS還是android)

添加之後将在ToastDemo目錄下産生android或ios兩個目錄,此處隻定義android環境的ToastDemo

3、初始化插件

進入插件目錄

eg:

$ cd ToastDemo

$ npm init

提示的時候可以直接回車,使用預設值直到結束,将建立一個 package.json 檔案

四、插件使用

給 Cordova 項目添加 android 環境,進入 Cordova 項目目錄

$ cd HelloCordova

$ cordova platform add android --save

安裝插件,進入到對應的platforms下安裝

$ cd HelloCordova/platforms

$ cordova plugin add D:\ProjectSpace\Exercise\helloCordova\plugins\ToastDemo

五、插件的使用,js調用。

1、進入頁面添加對應的頁面邏輯

eg:在helloCordova\www項目下的helloCordova\www\index.html中添加觸發的頁面邏輯标簽

Cordova+Android的項目建立和自定義插件的使用

2、在對應的js中調用插件

eg:在Cordova項目下www下的js目錄下即D:\ProjectSpace\Exercise\helloCordova\www\js下找到index.js

Cordova+Android的項目建立和自定義插件的使用