一、環境的配置 由于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中添加觸發的頁面邏輯标簽
2、在對應的js中調用插件
eg:在Cordova項目下www下的js目錄下即D:\ProjectSpace\Exercise\helloCordova\www\js下找到index.js