cordova自定義插件
注意：存放自定義cordova插件目錄不能有空格可能會報錯
一 .cordova安裝
1.下載node.js，安裝完成后你可以在命令行中使用node和npm.
安裝cordova使用node.js的npm工具蒙揣。打開控制臺輸入：npm install -g cordova
二.安裝plugman
cordova需要用plugman來創(chuàng)建自定義插件 命令：npm install -g plugman
三.用cordova創(chuàng)建android工程
1.創(chuàng)建cordova工程
現(xiàn)在電腦上新建一個cordova文件夾 糠悼，在文件中執(zhí)行命令: cordova creatr dialog com.jcy.android
文件夾中會多一個文件夾這就是你的cordova工程
dialog 是工程名 com.jcy.android 是cordova工程的包名
創(chuàng)建成功后的目錄：
2.生成android工程
先進入到剛剛創(chuàng)建的cordova目錄中柴底，然后開始創(chuàng)建android工程褒墨。
命令:cordova platform add android
android --> 創(chuàng)建的平臺名也可以是iOS等
下圖是創(chuàng)建成功的情況殴玛，失敗的原因有可能是android的環(huán)境沒有配好。
生成android工程的目錄
生成之后我們開始導入到android studio中：
第一步：選擇打開本地已有的android工程束析。
第二步：找到剛剛創(chuàng)建好的android工程導入。
至此就已經(jīng)把cordova插件開頭的部分創(chuàng)建好了憎亚。
四.創(chuàng)建自定義插件
先在電腦上創(chuàng)建一個cordova插件的目錄员寇，然后跳轉(zhuǎn)到該目錄，開始創(chuàng)建cordova插件第美。
plugman create --name dialog-plugin --plugin_id dialog-plugin --plugin_version 1.0.0
--name dialog-plugin --> 插件名
--plugin_id dialog-plugin --> 插件ID
--plugin_version 1.0.0 --> 插件版本號
生成插件的目錄如下
toast-plugin
蝶锋。src
。android
什往。android的目錄
扳缕。www
編寫ToastDemo.java用于被調(diào)用
可以在剛剛創(chuàng)建的Android工程下面編寫這個代碼，具體代碼如下：
execute方法是插件被調(diào)用時别威，會把操作和參數(shù)以及回調(diào)傳遞過來
代碼：
package com.jcy.android;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.provider.MediaStore;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONException;
import static android.media.MediaRecorder.VideoSource.CAMERA;
public class CustomDialog extends CordovaPlugin {
@Override
public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext)throws JSONException {
if("show".equals(action)){
AlertDialog.Builder builder =new AlertDialog.Builder(cordova.getActivity());
builder.setTitle("提示");
builder.setMessage(args.getString(0));
builder.setPositiveButton("確定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
//Toast.makeText(cordova.getContext(),"點擊了確定",Toast.LENGTH_SHORT).show();
openCamra();
callbackContext.success("點擊了確定");
}
});
builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
//Toast.makeText(cordova.getContext(),"點擊了取消",Toast.LENGTH_SHORT).show();
callbackContext.error("點擊了取消");
}
});
builder.create().show();
return true;
}
return super.execute(action, args, callbackContext);
}
private void openCamra(){
CordovaPlugin cordovaPlugin =null;
Intent camera =new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
cordova.startActivityForResult(cordovaPlugin,camera,CAMERA);
}
}
把這個文件復制到剛剛生成的插件目錄下
編輯plugin.xml文件
修改plugin.xml,代碼都有注釋躯舔，如下：
<?xml version='1.0' encoding='utf-8'?>
<plugin id="dialog-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>dialog-plugin</name>
<js-module name="dialog-plugin" src="www/dialog-plugin.js">
<clobbers target="CustomDialog" />
</js-module>
<!--添加Android平臺 -->
<platform name="android">
<config-file target="res/xml/config.xml" parent="/*">
<!-- JS調(diào)用時的名字 -->
<feature name="CustomDialog">
<!-- value：的值是對應的插件中CustomDialog.java存放的路徑 -->
<param name="android-package" value="com.jcy.android.CustomDialog"/>
</feature>
</config-file>
<!-- src:是插件里存放對應.java的路徑， target-dir:安裝插件時把.java文件存放的位置省古，要和上面的value路徑對應 -->
<source-file src="src/android/CustomDialog.java" target-dir="src/com/jcy/android" />
</platform>
</plugin>
編輯www目錄下的toast-plugin.js文件
修改為：
varexec =require('cordova/exec');
// ToastShow： 是plugin.xml文件中的feature標簽 name屬性
// show：是js中調(diào)用的方法名// [arg0]: 表示一個參數(shù)粥庄，[arg0,arg1]:表示兩個參數(shù)
exports.show =function(arg0, success, error)
{
exec(success, error,'CustomDialog','show', [arg0]);
};
五.初始化插件
進入到插件目錄，初始化插件 命令 npm init
效果圖如下豺妓，輸入信息時有括號的按照括號里面的輸入惜互，沒有的可以跳過。
六.向項目中添加自定義插件
上面基本上就完成了一個簡單的自定義插件的制作科侈，接下來把插件添加到之前創(chuàng)建的Android工程中測試载佳，制作是否成功。
添加的方法和上面一樣臀栈，先進入到platforms目錄下
然后輸入 cordova plugin add D:\newDialog\dialog-plugin
D:\newDialog\dialog-plugin 新建插件的目錄
添加成功
然后在Android studio中調(diào)用測試蔫慧。調(diào)用方式通俗的講就是dialog-plugin.js文件中的那兩個參數(shù)。
先在 index.html 中加
<button id="dialog" style="font-size:24px">彈窗</button >
在index.js 調(diào)用
注意 :CustomDialog.show("參數(shù)"权薯，"success","error");
1.suceess:成功回調(diào)
2.error:失敗回調(diào)
3.順序一定不能錯９枚恪！Ｃ蓑肌黍析！
成功！
七.注意
1.命令最好用管理員運行
2.提示 Android target 和Gradle 未安裝
缺少環(huán)境變量
新建 變量名：Android_Platform_Tools 變量值 ：Android sdk 目錄下找到 platform-tools 全路徑加進去
再將 Android_Platform_Tools 添加到Path中
完美解決屎开！
基礎內(nèi)容大概就這些 大家有疑問可以在評論中問阐枣，看到了會回復，有錯誤也歡迎指出，共同學習蔼两。
